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

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

이와 같습니다. 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 인것 같습니다. 이건 단지 개인별로 차이가 있겟지만요 ^^