[Android Kotlin] radio button 예제

오늘은 내가 만들고 있는 프로젝트에서 새로 알게 된 radio button 이 클릭된 것의 텍스트를 가져와서 textView에 보여주는 예제를 만들어 보겠다.

 

먼저 나는 커스텀 다이얼로그를 사용하고, 그것을 view binding을 통해 예제를 만들었기 때문에

build.gradle에 추가를 해보도록 하겠다.

 

build.gradle(app)

plugin {
	...
}

android {
	...
    buildFeatures {
        viewBinding = true
    }
}

dependencies {
	....
}

뷰 바인딩에 대한 방법은 여기서 자세히 알려주지 않을 것이기 때문에 미리 공부하고 오시길 바란다.

 

그 다음 dialog에 쓰일 레이아웃을 만들어 주도록 하자

 

custom_dualog_set_standard.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="20dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/main_color"
            android:gravity="center"
            android:textSize="35sp"
            android:text="기준 선택"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="유형"
            android:textSize="20sp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="10dp"/>

        <RadioGroup
            android:id="@+id/standard_radio_group1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="5dp"
            android:orientation="horizontal">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:text="없음" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:text="식단" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:text="운동" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:text="급식" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginEnd="10dp"
                android:text="자유" />
        </RadioGroup>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="기준"
            android:textSize="20sp"
            android:layout_marginStart="30dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="10dp"/>

        <RadioGroup
            android:id="@+id/standard_radio_group2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:text="없음" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:text="최신순" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:text="오래된순" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:text="좋아요순" />

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginEnd="5dp"
                android:text="추천순" />
        </RadioGroup>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:orientation="horizontal">

             <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/standard_apply"
                android:layout_width="150dp"
                android:layout_height="40dp"
                android:background="@drawable/button_background"
                android:layout_marginEnd="20dp"
                android:text="적용"/>

            <androidx.appcompat.widget.AppCompatButton
                android:id="@+id/standard_cancel"
                android:layout_width="150dp"
                android:layout_height="40dp"
                android:background="@drawable/button_background2"
                android:text="취소"/>
        </LinearLayout>

    </LinearLayout>

</androidx.cardview.widget.CardView>

 

custom_dualog_set_standard 결과

 

fragment에서 기능 구현

 

이제 fragment에 기능을 구현해 보도록 하자.

class BoardFragment: Fragment() {
	...
    
    // dialog 기능 구현
    private fun setStandard() {
        dialog = Dialog(requireContext())
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)

        val dialogBinding: CustomDialogSetStandardBinding = CustomDialogSetStandardBinding.inflate(
            LayoutInflater.from(context))
        dialog.setContentView(dialogBinding.root)

        dialog.show()
        dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

        dialogBinding.standardApply.setOnClickListener {
            val selectedRadio1 = dialogBinding.standardRadioGroup1.checkedRadioButtonId
            val selectedRadio2 = dialogBinding.standardRadioGroup2.checkedRadioButtonId

            Log.d("Diet Management", "setStandard selected radio button: $selectedRadio1, $selectedRadio2")

            val radioBtn1 = dialog.findViewById<View>(selectedRadio1) as RadioButton?
            val radioBtn2 = dialog.findViewById<View>(selectedRadio2) as RadioButton?

            Log.d("Diet Management", "setStandard: ${radioBtn1?.text}/${radioBtn2?.text}")

            binding.standardTextview.text = "${radioBtn1?.text}/${radioBtn2?.text}"
            dialog.dismiss()
        }

        dialogBinding.standardCancel.setOnClickListener {
            dialog.dismiss()
        }
    }
}

 

1. view binding 추가

val dialogBinding: CustomDialogSetStandardBinding = CustomDialogSetStandardBinding.inflate(
    LayoutInflater.from(context))

 

2. dialog 배경 지우기

dialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

저 코드를 쓰지 않으면 다이얼로그의 흰색 배경이 지워지지 않는다.

 

3. radio button 클릭 id

val selectedRadio1 = dialogBinding.standardRadioGroup1.checkedRadioButtonId
val selectedRadio2 = dialogBinding.standardRadioGroup2.checkedRadioButtonId

 

4. 텍스트 값 얻어오기

val radioBtn1 = dialog.findViewById<View>(selectedRadio1) as RadioButton?
val radioBtn2 = dialog.findViewById<View>(selectedRadio2) as RadioButton?

binding.standardTextview.text = "${radioBtn1?.text}/${radioBtn2?.text}"

결과 화면

클릭된 버튼들의 text가 textView에 적용 된 것을 볼 수 있다.