버튼에서 본 애니메이션 효과. 나도 해보고 싶다.

버튼을 만들면 깜박깜박한 효과가 전부였던 나.

물결처럼 흐르는 애니메이션이 있는 버튼처럼 만들어 보고 싶었다.

그.래.서.

내가 한번 해보겠다!

특별한 설정없이 저런 애니메이션 효과를 주고싶다면

간단하게 레이아웃에서 설정할 수 있다.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".content.barcode.BarcodeFragment">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_40"
        android:gravity="center">
        <ImageView
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_80"
            android:scaleType="fitCenter"
            android:clickable="true"
            android:src="@drawable/ic_action_home_normal"
            android:background="?android:attr/selectableItemBackground"/>
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_40"
        android:gravity="center">
        <ImageView
            android:layout_width="@dimen/dp_80"
            android:layout_height="@dimen/dp_80"
            android:scaleType="fitCenter"
            android:clickable="true"
            android:src="@drawable/ic_action_home_normal"
            android:background="?android:attr/selectableItemBackgroundBorderless"/>
    </LinearLayout>
</LinearLayout>

background를 보자.

영상에서 봤을 때, 위 이미지는 부드럽게 배경색이 바뀌는 효과가 있었다.

이것은 selectableItemBackground 이다.

그리고 아래 이미지처럼 퍼지는 효과는 selectableItemBackgroundBorderless 이다.

참고로 이미지에 클릭효과를 주려면 android:clickable 옵션을 넣어야 한다.

다만 아래 이미지 효과는 색상이 다르다.

위 이미지 효과는 기본으로 세팅된 색상에 영향을 받는다.

하지만 아래는 커스터마이징을 해서 색상을 변경한 것이다.

자세히보면 커스터마이징 된 것은 둥그런 모양으로 물결을 만든다.

Ripple 리소스로 이런 표현이 가능하다.

다만 api level 21 이후에 적용가능하기 때문에 drawable에서 분리하여 표현해야 한다.

ripple_sample.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/cyon_a500">
</ripple>

drawable-v21/selector_click_ripple.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ripple_sample" />
</selector>

drawable/selector_click_ripple.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@color/white" />
    <item android:drawable="@color/grey_800_" />
</selector>

위와 같이 준비하면 리소스는 준비가 된 것이다.

v21 미만의 경우에는 깜박깜박하는 효과만 나타나게 된다.

이제 이 리소스를 style.xml에 넣어보자.

Activity에 적용된 theme를 보고 style에 적용하면된다.

selectableItemBackgroundBorderless로 아래 예시에는 나와 있지만

android:selectableItemBackground로도 가능하다.

AndroidManifest.xml

<activity
    android:name=".content.SampleActivity"
    android:configChanges="orientation|keyboardHidden|screenSize"
    android:theme="@style/Theme.SampleTheme" />

styles.xml

<style name="Theme.SampleTheme" parent="Theme.Design.Light.NoActionBar" >
    <item name="android:windowBackground">@android:color/white</item>
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="android:colorAccent">@color/colorAccent</item>
    <!-- 생략 -->
    <item name="android:selectableItemBackgroundBorderless">@drawable/selector_click_ripple</item>
</style>

참고자료

• How can I modify ripple color when using ?attr/selectableItemBackground as background?
• 돼지왕 왕돼지 놀이터 (Ripple 관련)
  
• Codepath (Ripple 관련)
• Simple setup for item backgrounds pre - post lollipop
• 꿈꾸는 개발자 로그
• Adding ripple effect for View in onClick