[안드로이드] 선택자(Selector) 누르기(Pressed) vs 선택하기(Selected) 버튼 쉽게 변경하는 방법 drawable.xml

이번 시간에는 drawable파일을 만들고

selector태그에 속해있는  누르기(Pressed)와

선택하기(selected)를 사용해서 버튼 모양을

쉽게 변경하는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면

2. 모양 drawable파일 만들기

3. 선택자 누르기 drawable 파일 만들기

4. 선택자 선택하기 drawable 파일 만들기  

5. 메인 화면 구성 activity_main.xml

6. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

2. 모양 drawable파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: blue_style

 - 설명 - 

 - 내부 색상은 파랑

 - 사이즈는 가로 100dp, 세로 50dp

 - 모서리 라운드는 5dp

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

    <solid
        android:color="@color/blue_200"/>

    <size
        android:width="100dp"
        android:height="50dp"/>

    <corners
        android:radius="5dp"/>
</shape>

 

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: pink_style

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

    <solid
        android:color="@color/pink_200"/>

    <size
        android:width="100dp"
        android:height="50dp"/>

    <corners
        android:radius="5dp"/>
</shape>

 색상

res -> values -> colors.xml

<color name="pink_200">#F48FB1</color>
<color name="blue_200">#90CAF9</color>

3. 선택자 누르기 drawable 파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: selector_pressed

- 설명 - 

 state_pressed="true":  누른 상태면 blue_style 적용

누르지 않은 상태면 pink_style 적용

<?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/blue_style"/>

    <item
        android:drawable="@drawable/pink_style"/>
</selector>

 

 

4. 선택자 선택하기 drawable 파일 만들기  

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: selector_selected

- 설명 - 

 state_selected="true":  선택 상태면 blue_style 적용

선택되지 않은 상태면 pink_style 적용

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/blue_style"/>

    <item
        android:drawable="@drawable/pink_style"/>
</selector>

5. 메인 화면 구성 activity_main.xml

 - 설명 - 

1. 첫 번째 버튼은 누르기 drawable 파일 적용

2. 두 번째 버튼은 선택하기 drawable 파일 적용

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/press_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/selector_pressed"
            android:text="pressed"
            android:textSize="15sp" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/selected_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:background="@drawable/selector_selected"
            android:text="selected"
            android:textSize="15sp" />

</LinearLayout>

6. 메인 코드 구현 MainActivity.java

 - 설명 - 

1. 선택 상태 변수를 하나 만들고 기본값은 false

2. 버튼을 누르면 선택상태 변수값을 통해 

 선택되어 있는지 아닌지를 판단한다. 

public class MainActivity extends AppCompatActivity {

    Button selectedBtn;

    boolean selected = false; //선택 상태

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        selectedBtn = findViewById(R.id.selected_btn);
        selectedBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if(selected){
                    selectedBtn.setSelected(false); //선택 아님
                    selected = false;
                }else{
                    selectedBtn.setSelected(true); //선택
                    selected = true;
                }
            }
        });
    }
}

2022.02.18 - [안드로이드] - [안드로이드] 사각형(Rectangle), 원형(Oval), 선(Line) 모양 쉽게 만드는 방법 - Drawable.xml

[안드로이드] 사각형(Rectangle), 원형(Oval), 선(Line) 모양 쉽게 만드는 방법 - Drawable.xml

2022.02.17 - [안드로이드] - [안드로이드] 뷰(View) 거리두는 방법 Margin 사용법

[안드로이드] 뷰(View) 거리두는 방법 Margin 사용법

2022.02.15 - [안드로이드] - [안드로이드] 색상(Color) 공통 관리하는 방법

[안드로이드] 색상(Color) 공통 관리하는 방법