[Android] ripple Effect 커스텀하기

 

Ripple Effect는 적용한 뷰 안에서 사용자의 터치 위치를 중점으로 발생되는 물결 현상입니다.

 

 <!-- An unbounded red ripple. --/>
 <ripple android:color="#ffff0000" />

위 코드처럼 child layout 없이 사용한다면 unbounded( 뷰의 크기를 넘어선) Ripple Effect가 발생합니다.

 

 

 

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

    <item android:id="@android:id/mask"
        android:drawable="@drawable/shape" />
</ripple>

child Layout으로 mask Layout가 설정 된 경우, mask Layout에 설정된 Drawable 위에만 Ripple Effect가 발생한다.

 

 

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

    <item android:drawable="@drawable/round_line"></item>
</ripple>

child Layout으로 mask Layout이 아닌 일반 레이아웃이 설정된 경우, ripple Effect 아래에 그려지는 이미지로 적용된다.

 

 

커스텀 활용

 

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

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"></solid>
            <corners android:radius="12dp"></corners>
        </shape>
    </item>

    <item android:drawable="@drawable/round_line"></item>
</ripple>