[Android] Text shaodw style...

Android 의 TextView에는 shadow 효과가 기본적으로 있습니다. shadow효과로 다양한 TextStyle을 만들 수 있는데 이번 포스트에서는 shadow효과의 다양한 value에 의해서 어떤 효과가 나오는지 확인해 볼려고 합니다.

우선 TextView에 있는 shadow 효과에 사용되는 xml attribute와 method를 확인해 보면

android:shadowColor

Place a shadow of the specified color behind the text.

Must be a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type.

This corresponds to the global attribute resource symbol shadowColor.

Related Methods

• setShadowLayer(float,float,float,int)

android:shadowDx

Horizontal offset of the shadow.

Must be a floating point value, such as "1.2".

This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type.

This corresponds to the global attribute resource symbol shadowDx.

Related Methods

• setShadowLayer(float,float,float,int)

android:shadowDy

Vertical offset of the shadow.

Must be a floating point value, such as "1.2".

This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type.

This corresponds to the global attribute resource symbol shadowDy.

Related Methods

• setShadowLayer(float,float,float,int)

android:shadowRadius

Radius of the shadow.

Must be a floating point value, such as "1.2".

This may also be a reference to a resource (in the form "@[package:]type:name") or theme attribute (in the form "?[package:][type:]name") containing a value of this type.

This corresponds to the global attribute resource symbol shadowRadius.

Related Methods

• setShadowLayer(float,float,float,int)

이와 같습니다. shadowColor는 shadow의 색상, shadowDx는 shadow의 X방향 offset, shadowDy는 shadow의 Y방향 offset, shadowRadius는 shadow의 반지름이 됩니다.

샘플코드를 확인해 보겠습니다.

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:padding="10dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="0.01"
            android:text="Shadow Style"
            android:textColor="#000000" />
</LinearLayout>

이와 같이 하면 결과는

이와 같습니다. 검은 Shodow Style 아래에 회색의 shadow가 있는 것을 확인할 수 있습니다. 그림자 위치를 더 멀리 하고 싶아면 shadowDx와 shadowDy값을 더 많이 주면 됩니다.

위의 결과에 shadowRadius값을 변경했을 때 코드는

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:padding="10dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="1.5"
            android:text="Shadow Style"
            android:textColor="#000000" />
</LinearLayout>

이와 같이 했을 경우 결과는

이렇게 됩니다. shadowRadius값에 따라서 shadow모양이 변경된 것을 볼 수 있습니다.

그럼 이번에는 shadow의 방향을 바꾸도록 하겠습니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"


        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#7F000000"
            android:shadowDx="3"
            android:shadowDy="-3"
            android:shadowRadius="1.5"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>

이와 같이 했을 때 결과는

이와 같습니다.그림자가 오른쪽 위 방향으로 변경되었습니다. shadowDx와 shadowDy의 값의 +- 에 따라서 값이 shadow방향이 변경 됩니다. 소위 발하는 그림자가 45` 방향이면 shadowDx는 +, shadowDy는 -을 주고, 135`방향을 경우는 둘다 +의 값을 주면 됩니다.

이번에는 shoadow를 이용한 blur 효과 비슷하게 주는 방법입니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#FFFFFF"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="3"
            android:text="Shadow Style"
            android:textColor="#FFFFFF" />
    </LinearLayout>

이와 같이 shadowDx와 shadowDy의 값을 0.. shadowRadius값만 +로 주었을 때 결과는

이와 같습니다. 글자 주변으로 blur 효과가 나타는 것을 볼 수 있습니다.

이번에는 네온사인?? 같은 효과 입니다.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#FFFFFF"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="2"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10dip" >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:shadowColor="#00FF00"
            android:shadowDx="0"
            android:shadowDy="0"
            android:shadowRadius="2"
            android:text="Shadow Style"
            android:textColor="#000000" />
    </LinearLayout>

이와 같이 했을 때 결과는

이와 같습니다. 이건 단지 배경과 글자색을 같게 하고 그림자 색상만 다르게 했을 때 입니다. 

TextView의 shadowDx, shadowDy, shadowRadius값에 따라서 TextView의 효과를 확인해보았습니다. 그런데 저는 제일 많이 쓰는 것은 단지 ShadowDx=2 shadowDy=2 shadowRadius=2 인것 같습니다. 이건 단지 개인별로 차이가 있겟지만요 ^^