Android

[Android] 버튼에 눌림 효과 주기 Button Pressed Effect (Fade 효과는 보너스)

욘두로이드 2023. 1. 21. 20:30

결과물

방법

setOnPressedListener 함수를 사용해 직접 구현해도 되지만

Selector를 Button의 Background로 설정하는 것으로 매우 간단히 구현할 수 있다.

 

Step 1

Drawable Resource 추가

이름은 selector_button_background 라고 지었다.

 

 

Step 2

그리고 추가한 XML에 다음과 같이 작성해준다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@color/orange"/>
    <item android:state_pressed="true" android:drawable="@color/pink"/>
</selector>

Selector는 이름에서도 알 수 있듯 뷰에서 전달받은 상태와 동일한 Item을 Return 해주는 역할을 하는 태그이며

하나 이상의 Item을 가져야 한다.

 

pressed 외에도 다양한 속성을 제공한다.

자세한 내용은 공식 페이지 설명을 참고하는 것이 좋겠다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize=["true" | "false"]
    android:dither=["true" | "false"]
    android:variablePadding=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:state_pressed=["true" | "false"]
        android:state_focused=["true" | "false"]
        android:state_hovered=["true" | "false"]
        android:state_selected=["true" | "false"]
        android:state_checkable=["true" | "false"]
        android:state_checked=["true" | "false"]
        android:state_enabled=["true" | "false"]
        android:state_activated=["true" | "false"]
        android:state_window_focused=["true" | "false"] />
</selector>

출처: https://developer.android.com/guide/topics/resources/drawable-resource

 

드로어블 리소스  |  Android 개발자  |  Android Developers

드로어블 리소스 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 드로어블 리소스는 화면에 그릴 수 있으며 getDrawable(int)와 같은 API를 사용하여 가져오거나 a

developer.android.com

 

Step 3

마지막으로 원하는 버튼에 background로 설정해 준다.

 

여기까지 하면 버튼의 터치리스너가

MotionEvent.ACTION_DOWN을 수신하는 즉시

<item android:state_pressed="true" android:drawable="@color/pink"/>

이 Item을 background에 set 해주고 색상이 변경될 것이다.

 

Fade 효과 주기

만약 여기서 Fade 효과를 주기 원한다면 Selector에 다음 속성을 추가하면 된다.

android:enterFadeDuration="@android:integer/config_longAnimTime"
android:exitFadeDuration="@android:integer/config_longAnimTime"

 

끝.

 

샘플소스 GITHUB (SelectorDurationActivity 참고)