[Android Studio] 버튼 누르는 효과 만들기 클릭 이벤트 효과 Button Press 안드로이드 스튜디오

[Android Studio] 버튼 누르는 효과 만들기 클릭 이벤트 효과 Button Press 안드로이드 스튜디오

 

저번 시간에 버튼을 둥글게 만드는 custum button resource를 생성하여 적용시켰었다.

기억이 안 난다면 아래 링크로 돌아가 보자

2020/07/03 - [APP/AndroidStudio] - [Android Studio] 버튼 둥글게 만들기 안드로이드 스튜디오 Button Round

 

일반적인 커스텀 버튼은 버튼을 눌렀을 때 누르는 효과가 없다.

이번 시간에는 버튼을 꾹 누르는 동안에 눌렀다는 효과가 보일 수 있도록 바꿔보자

저번 시간에 만든 커스텀 버튼을 이용할 것이니 이전 포스팅을 꼭 보고 시작하자

 

1. 저번 시간과 같이 커스텀 버튼 리소스 파일 생성하기

우선 drawable 폴더에 resource 파일을 생성하자

필자는 button_round.xml라고 이름을 지었다.

resource file 생성 하기

 

내용은 아래와 같이 작성한다

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >
    <solid android:color="#000000" />
    <corners
        android:bottomLeftRadius="12dp"
        android:bottomRightRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp" />
</shape>

방금 만든 리소스 파일은 버튼을 누르기 전 상태의 버튼 모양을 만든 것이다.

 

2. 눌렀을 때 사용할 커스텀 버튼 리소스 파일을 하나 더 생성하기

 

새로 xml resource파일을 생성해서 버튼을 눌렀을 때 상태의 모양을 만들자

필자는 2번째 파일을 button_round_press라는 이름으로 지었다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >
    <solid android:color="#333333" />
    <corners
        android:bottomLeftRadius="12dp"
        android:bottomRightRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp" />
</shape>

 

 

3. 두 개의 리소스 파일을 버튼에 적용시켜주는 리소스 파일 생성하기

 

그다음 2개의 리소스파일을 하나의 버튼에 넣을 수 있도록 중계해주는 resource 파일을 생성한다.

필자는 button_back이라고 이름을 지었다.

(지금까지 총 3개의 리소스 파일)

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

</selector>

이제 button_back 리소스 파일을 이용해 버튼 background 속성에 적용시켜준다.

 

  <Button
            android:id="@+id/btn_pass"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="35dp"
            android:layout_marginTop="50dp"
            android:layout_marginRight="35dp"
            android:background="@drawable/button_back"
            android:text="로그인"
            android:textColor="#fff"
            android:textSize="20sp"
            android:textStyle="bold" />

 

결과

참 쉽죠?