안드로이드 버튼 클릭 시 퍼지는 effct주기(Ripple Effect)

안드로이드에선 기본적으로 버튼을 추가하면

클릭 시 해당 부분부터 퍼지는 이펙트가 내장되어있다.

 

하지만 버튼에 색상을 넣기 위해 background를 설정하면 이러한 이펙트가 사라지게 된다.

그래서 이번 글에선 이러한 퍼지는 이펙트를 직접 custom하여 버튼에 추가하는 방법을 알아보자.

 

일단 res/drawable폴더에 원하는 이름의 xml파일을하나 생성한다.

여기선 btn_effect.xml이라는 파일을 생성하도록 하겠다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#303030"> <!-- 이펙트 색상 -->


    <!-- 배경 색상 -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="#000000"/>
        </shape>
    </item>

</ripple>

위와 같이 추가하고, 이를 적용시킬 버튼에 background로 설정해주도록 한다.

.
.
생략
.
.
            <Button
                android:id="@+id/Btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="20dp"
                android:background="@drawable/btn_effect"
                android:gravity="center"
                android:text="+"
                android:textSize="50dp"/>
.
.
생략
.
.

위에선 검은 배경에 회색 이펙트를 주어서 잘 안보이는데,

직접 색을 바꿔서 해보는걸 추천한다.