[Android] Ripple Effect 라운드 버튼 만들기

라운드 백그라운드 버튼에 깔끔하게 Ripple 효과를 적용하는 방법입니다.

프로젝트를 새로 생성하고, 기본 TextView의 Hellow World!를 버튼으로 변경하였습니다.

 

<activity_main.xml>

<androidx.appcompat.widget.AppCompatButton
    android:layout_width="wrap_content"
    android:layout_height="44dp"
    android:text="Hello World!"
    android:textColor="@color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:paddingHorizontal="14dp"
    style="?android:attr/borderlessButtonStyle"
    android:background="@drawable/round_button_background"
    android:foreground="?android:attr/selectableItemBackgroundBorderless" />

 

<drawable/round_button_background.xml>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="22dp" />
    <solid android:color="@color/teal_200" />
</shape>

 

버튼 속성에 background 값으로 배경을 설정하고, foreground 값으로 ripple 속성을 적용하여 터치시 ripple 효과나 나오도록 합니다.

 

위와 같이 하는 경우, 아래 그림과 같이 라운드 버튼 밖으로 ripple효과가 삐져나오게 됩니다.

좀더 깔끔한 ripple 효과를 적용하기 위해 drawable/round_button_background.xml 파일을 수정해 줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight">
<item>
    <shape android:shape="rectangle">
        <corners android:radius="22dp" />
        <solid android:color="@color/teal_200" />
    </shape>
</item>
</ripple>

 

그리고, activity_main.xml의 foreground 속성도 삭제해 줍니다.

 

위와 같이 수정후, 실행하면 아래 그림과 같이 깔끔하게 Ripple 효과가 적용된 것을 보실수 있습니다.

전체 소스코드는 아래 Github 링크를 확인해주세요.

GitHub - rcbuilders/RemindSampleApp: https://heeeju4lov.tistory.com/ 블로그에서 Android + Kotlin 강좌에서 사용함.