[안드로이드] 선택자(Selector) 체크(checked) 체크박스(checkBox) 쉽게 활성화/비활성화 하는 방법 drawable.xml

이번 시간에는 체크박스의 체크상태에

따라 색상이 변경되고,  체크상태에 따라

버튼(Button)이 비활성화되었다가

활성화되는 방법에 대하여 알아보겠습니다.

---

목차

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

 - 설명 - 

 - solid: 내부 색상은 파랑

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

 - radius: 모서리 라운드는 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_checked

 - 설명 - 

 sate_checked="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_checked="true"
        android:drawable="@drawable/blue_style"/>

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

 

4. 선택자 활성화 drawable 파일 만들기  

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

file name: selector_enabled

 - 설명 - 

 sate_enabled="false" 비활성화 상태면 blue_style 적용

 활성화 상태면 pink_style 적용

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

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

 

5. 메인 화면 구성 activity_main.xml

 - 설명 -

 1. 하나의 체크박스, 하나의 버튼

 2. 체크를 하면 체크 drawable 파일 적용되어

 체크면 파란색으로, 체크가 아니면 분홍색으로 변경된다.

3. 체크를 하면 버튼을 비활성화시킨다. 

4. 체크가 해제되면 다시 활성화시킨다. 

5. 버튼에 활성화 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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatCheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_checked"
        android:text="Check"
        android:textSize="15sp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/enabled_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_enabled"
        android:layout_marginTop="50dp"
        android:text="활성화"
        android:textSize="15sp" />

</LinearLayout>

 

6. 메인 코드 구현 MainActivity.java

 - 설명 - 

 1. 버튼 클릭시 메시지 발생

 2. 체크 상태에 따라 버튼 활성화, 비활성화 

public class MainActivity extends AppCompatActivity {

    Button enabledBtn;

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

        enabledBtn = findViewById(R.id.enabled_btn);
        enabledBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "눌렀음", Toast.LENGTH_SHORT).show();
            }
        });


        CheckBox checkBox = findViewById(R.id.checkbox);

        checkBox = findViewById(R.id.checkBox);
        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {

                if(checked){
                    enabledBtn.setEnabled(false);
                    enabledBtn.setText("비활성화");
                }else{
                    enabledBtn.setEnabled(true);
                    enabledBtn.setText("활성화");
                }
            }
        });
    }
}

2022.02.20 - [안드로이드] - [안드로이드] 선택자(Selector) 포커스(Focused) 에디트 텍스트(EditText) 쉽게 외곽선, 색상 주는 방법 drawable.xml

[안드로이드] 선택자(Selector) 포커스(Focused) 에디트텍스트(EditText) 쉽게 외곽선, 색상 주는 방법 dra

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

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

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

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