안드로이드 앱개발 스터디11 - 01 (Selector )

https://www.youtube.com/watch?v=9E0WwR_6P9w&list=PLC51MBz7PMyyyR2l4gGBMFMMUfYmBkZxm&index=28 

안드로이드 앱 개발 강의

#27 버튼 클릭 효과 디자인 (Selector)

버튼을 클릭하면 버튼 색깔이 바뀌거나 그림이 바뀌는 등 클릭 효과를 넣어주는 것이다.

 

1. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="300dp"
        android:background="@drawable/selector_button" //이건 좀 이따가 할 거니까 패스
        android:text="Hanseol"
        android:textColor="#448AFF"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_marginTop="200dp"
        android:background="@drawable/selector_button_img" //이것도 좀 이따 할 거니까 
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

버튼을 두 개 만들어주고, 첫 번째 버튼은 원하는 대로 마음껏 꾸며준다. 첫 번째, 두 번째 버튼의 background 부분(14줄, 29줄)은 좀 이따 selector 파일을 만들어 준 뒤에 넣어주는 것이므로 지금은 패스한다.

 

2. selector_button.xml

drawable 폴더 안에 Drawable Resource File을 만든다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#96FFE6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
 
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#BAFFEE"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

• android:state_pressed="true/false" : true는 버튼을 눌렀을 때, false는 버튼을 누르지 않았을 때를 의미한다.
• solid android:color : 버튼 색깔을 지정해준다.
• corners android:radius : 버튼 네 귀퉁이를 얼마나 둥글게 해줄지 설정한다.

원하는 대로 버튼을 디자인 해주면 된다. 버튼을 누르지 않았을 때 버튼의 모양은 미리 볼 수 있지만, 버튼을 눌렀을 때의 모양은 미리 볼 수 없다.

 

3. 이미지 버튼에 넣을 사진/아이콘 가져오기

방금 2번 과정에서 만든 버튼은 버튼 안에 텍스트가 들어간 버튼이었고 이번에는 이미지 자체가 버튼이 되게 만들 것이다. 버튼을 누르지 않았을 때, 눌렀을 때 띄울 사진을 하나씩 복사해서 drawable 폴더에 복사 붙여넣기 한다.

iconfinder에서 다운로드 받은 아이콘이다. 나는 버튼을 누르지 않았을 때는 빈 구름, 누르면 색칠된 구름이 뜨게 만들었다.

 

4. selector_button_img.xml

2번에서 만든 파일을 복사 붙여넣기 한다. 이 버튼에는 이미지를 넣어줄 것이므로 설정을 다르게 한다.

<?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/cloudtwo">
 
    </item>
 
    <item android:state_pressed="false" android:drawable="@drawable/cloudone">
 
    </item>
</selector>

다른 설정은 필요없고, android:drawable="이미지 이름" 만 입력해주면 된다.

 

5. activity_main.xml

1번에서 좀 이따 한다고 했던 ground 부분을 지금 해주면 된다. 그리고 이미지 버튼의 크기가 생각했던 게 아닐 수가 있다. 그러면 이미지를 넣은 버튼의 layout_width 와 layout_height 를 조절해주면 된다.

 

6. backgroundTint 제거

4번까지 하고나서 실행을 시켜보면 설정해줬던 버튼 색깔도 아니고, 아이콘 색깔도 이상하게 보라색일 것이다. 그건 기본적으로 그 색깔이 설정돼 있기 때문이다.

values - themes - themes.xml 에 들어가서 (themes.xml(night) 아니다.) <Style>의 parent를 parent="Theme.AppCompat.Light"라고 바꿔주면 해결된다.