[Android / Wear OS] 간단한 점수판 앱 제작하기 - ③ 버튼 Ripple 효과 적용하기

+, - 버튼을 만들어보자.

먼저 xml 파일에서 기본적인 버튼을 넣은 화면은 다음과 같다.

 

 

솔직히 말하면... 못생겼다.

이를 안드로이드도 알고 있는지, 기본적인 버튼을 만들면 다음과 같은 경고문을 띄워준다.

Buttons in button bars should be borderless; use style="?android:attr/buttonBarButtonStyle"

버튼은 경계가 없어야 하고, style="?android:attr/buttonBarButtonStyle"를 추가하라는 말인데 그래서 바로 추가해 보았다.

 

 

버튼의 경계선이 사라지고 배경이 투명한 색으로 바뀌었다.

확실히, style 문장 하나를 추가해주니 훨씬 보기 좋은 모양으로 버튼의 생김새가 변하였다.

그런데 나는 버튼이 눌릴 때 색이 변하는 터치 효과가 '사각형'으로 설정되어있는 것을 '원형'으로 바꾸고 싶었다.

 

 

res/drawable 폴더에서 New → Drawable Resource File을 선택해준다.

 

File name에는 원하는 파일 이름을, Root element에는 ripple을 입력하고 OK를 누른다.

안드로이드에서 버튼을 눌렀을 때 실제로 눌린듯한 색상 효과를 내는 것을 "ripple"이라고 한다.

그리고 다음과 같이 ripple_round_button.xml을 작성해준다.

그리고 버튼에서 android:background="@drawable/ripple_round_button" 을 추가해 ripple을 적용시킬 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
</ripple>

 

 

위의 xml파일에서 color를 "?android:colorControlHighlight"로 설정하면 기본 강조 색상으로 설정할 수 있고

이외의 다른 색상으로 설정하면 해당 색상으로 ripple 효과를 설정할 수 있다.

그런데 ripple이 잘 적용되었지만 효과가 view의 바깥까지 퍼져나가게 된다.

이를 해결하기 위해선 ripple_round_button.xml에서 mask를 추가하면 된다.

 

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask"
        android:drawable="@android:color/black">
    </item>
</ripple>

 

 

mask를 적용했더니 이제 ripple 효과가 view의 바깥까지 퍼져나가지 않게 되었다!

(참고로 mask의 색상은 ripple 효과에 영향을 끼치지 않는다. 그렇다고 지정을 안해주면 에러가 발생한다...)

그런데 처음에 목표했던 것은 ripple 효과가 원형으로 퍼져나가는 것이고 이를 위해 shape를 추가해준다.

 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
        <item android:id="@android:id/mask">
            <shape android:shape="oval">
                <solid android:color="@color/black" />
            </shape>
        </item>
</ripple>

 

 

마침내 원하는 결과를 얻어냈다! (마찬가지로 solid의 색상은 ripple 효과에 영향을 끼치지 않는다)

이제 나머지 버튼들도 모두 ripple을 적용해보자.

 

 

모든 버튼에 ripple 효과가 잘 적용되어 보여지는 모습이다!

더 자세한 내용은 아래 공식 문서를 참고하면 좋을 것 같다.

 

https://developer.android.com/reference/android/graphics/drawable/RippleDrawable

RippleDrawable  |  Android Developers