안드로이드 Layout에 gradient로 그림자효과 주기 (Layout Shadow gradient)

Layout 혹은 View에 살짝 그림자효과를 주고 싶을때가 있다. 롤리팝(API 21) 이상은 elevation 이라는 속성이 추가되어 손쉽게 그림자 추가가 가능하지만 롤리팝 이하의 버전인 경우 수작업으로 그림자를 추가해야한다. 그림자는 추가하는 방법에는 여러가지가 있다. 나인패치를 이용하는 방법, 코드로 적용하는 방법 등등..

여러방법들 중 Shape와 gradient 속성을 xml에 정의하여 그림자를 표시하는 방법이 가장 괜찮을듯 하다. 다만 그림자가 들어갈 새로운 영역(View나 layout) 을 별도로 만들어줘야하는게 단점이라면 단점. 그림자 넣을 영역을 layout xml에 만든다. 반공간이므로 View나 LinearLayout 등 아무거나 가능. 원하는 그림자의 크기를 height에 입력한다.

<view 
   android:orientation="vertical" 
   android:layout_width="match_parent" 
   android:layout_height="16dp" 
   android:layout_gravity="bottom" 
   android:background="@drawable/upper_shadow_todo">
</view>

upper_shadow_todo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#ffe6e6e6"
        android:angle="270">
    </gradient>
</shape>

그림자가 layout의 위에 있다면 startColor 를 무조건 투명으로 지정해야한다. 여기서는 @android:color/transparent endColor는 그림자가 시작되는 색상으로 지정한다. endColor 부터 startColor 까지 gradient 처리되면서 자연스럽게 그림자효과가 발생한다. 여기서 주의할 점은 startColor, endColor 모두 alpha값을 투명으로해야 한다.

적용 후

Layout 구조

빨간 사각형이 그림자를 주고싶은 layout, 파란 사각형이 그림자효과를 줘야할 empty view 이다. empty view에 위에서 선언한 gradient xml 을 background 로 지정해주면 위처럼 자연스럽게 그림자 표시가 될것이다.