[Android] Ripple Effect Button

안드로이드 5.0 Rollipop(API 21)부터 Material Design을 지원합니다. Material Design이 적용된 상태에서 버튼을 터치하면 Ripple Animation Effect가 나타나게 됩니다.

버튼 외에 다른 Widget에 Ripple Effect를 추가 혹은 변경하기 위해서는 RippleDrawable을 사용해야 합니다. 이 포스트에서는 XML을 통해 RippleDrawable을 생성하는 방법에 대해 설명합니다.

먼저 Material Design은 API 21부터 지원하기 때문에 res/drawable-21 폴더에 ripple_background.xml을 추가한 후 다음과 같은 코드를 작성합니다.

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#33ffaaaa">
    <!-- 위의 색상은 Ripple Effect의 Color를 가리킵니다. -->    

    <item>
        <!-- 
            Item 하위에 Drawable를 추가할 수 있습니다. 
            이는 버튼의 배경이 됩니다.
        -->    
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="#ff550000"/>
        </shape>
    </item>
</ripple>

API 21 미만의 하위호환성을 위해 res/drawable 폴더에 ripple_background.xml을 추가한 후 과거와 동일한 방법으로 배경으로 사용할 drawable 을 생성해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="#ff700000" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="#ffffaaaa" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
            <solid android:color="#ffffaaaa" />
        </shape>
    </item>
</selector>

이제 위에서 작성한 ripple_background를 기존의 Widget의 Background에 추가하시면 정상적으로 Ripple 효과가 나타나게 됩니다.

<!-- 버튼의 배경으로 지정 -->
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="테스트 버튼"
    android:textColor="#ffffffff"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/ripple_background" />

<!-- 버튼이 아니더라도 배경으로 사용할 수 있습니다 -->
<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:padding="10dp"
    android:clickable="true"
    android:background="@drawable/ripple_background">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="테스트 버튼"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:textColor="#ffffffff"
        android:layout_gravity="center_vertical"/>
</FrameLayout>