[Android] 기존 버튼에 ripple 효과주기

 

다음과 같은 버튼이 있다고 하자,

enable 상태에 따라 버튼의 색상 (또는 모양)을 다르게 주기 위해 우리는 drawable을 만들어 사용한다.

(사진의 위쪽 버튼은 isEnabled = true, 아래쪽 버튼은 isEnabled = false 이다.)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true">
        <shape
            android:shape="rectangle">
            <stroke android:color="@color/main"
                android:width="2dp"/>
            <corners
                android:radius="30dp"/>
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape
            android:shape="rectangle">
            <stroke android:color="@color/light_gray"
                android:width="2dp"/>
            <corners
                android:radius="30dp"/>
        </shape>
    </item>
</selector>

상태에 따라 색상을 다르게 하고 싶으면 가장 상위 요소로 selector를 사용해야 한다.

그런데 이 상태에서 버튼을 클릭할 때 클릭 효과를 주려면 어떡해야할까?

 

클릭 효과를 줄 때는 ripple 를 사용해 효과를 적용 했었다.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/forth"
    android:effectColor="@color/path"
    android:radius="100dp">
    <item android:id="@android:id/background">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/main"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>
</ripple>

android:color -> 효과의 색상을 의미한다.

android:effectColor -> 효과의 보조 색상이라는데 난 확인하지 못했다. 31 이상부터 사용가능하다고 한다.

android:radius -> 효과가 발생할 반경을 의미한다.

 

ripple이 활성화 되어야 하는 상태에 drawable로 적용해주면 된다.

android:drawable="@drawable/bg_button_ripple"

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:drawable="@drawable/bg_button_ripple">
        <shape
            android:shape="rectangle">
            <stroke android:color="@color/main"
                android:width="2dp"/>
            <corners
                android:radius="30dp"/>
        </shape>
    </item>
    <item android:state_enabled="false">
        <shape
            android:shape="rectangle">
            <stroke android:color="@color/light_gray"
                android:width="2dp"/>
            <corners
                android:radius="30dp"/>
        </shape>
    </item>
</selector>

 

버튼의 상태에 따른 색상과 클릭 효과가 같이 적용된 것을 확인할 수 있다.

---

공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.

말씀해주시면 수정하겠습니다. 감사합니다.

References

아래 글을 참고하여 작성 되었습니다.

[ Android ] 버튼에 Ripple 효과 적용하기

색상 상태 목록 리소스  |  Android 개발자  |  Android Developers

 

RippleDrawable  |  Android Developers