公開日：2020/02/16
更新日：2020/08/03

【Kotlin基礎】RadioButtonでラジオボタンを実装する方法を解説

Kotlinでラジオボタンを実装する方法が知りたい。
RadioButtonをコードで動的に実装したい。
選択項目が変更された時の処理を実装したい。

Kotlinでは、RadioButtonとRadioGroupというViewを組み合わせることで、ラジオボタン（複数の選択肢から1つを選択するボタン）を実装することができます。

RadioButtonとRadioGroupの2つのViewを使用するので、思ったように実装できず、選択状態の切り替えなどが正しく機能しなくて困っている方、たくさんいらっしゃるのではないでしょうか？

そこで本記事では、RadioButton、RadioGroupの基本的な実装方法や、コードで動的に実装する方法、そして、選択項目変更のイベント取得方法について、サンプルコードを交え、わかりやすく解説しております。

１．RadioButtonでラジオボタンを実装する方法
- １－１．xmlでRadioButtonを実装する
- １－２．コードで動的にRadioButtonを実装する
２．RadioButtonの基本的な使い方
３．選択項目が変更されたイベントを受け取る方法
４．まとめ

RadioButtonでラジオボタンを実装する方法

Kotlinでラジオボタンを実装するには、RadioButtonと、RadioGroupというViewを使用します。

【公式ドキュメント】： Radio Buttons | Android Developers

RadioButton、RadioGroupを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。

xmlでRadioButtonを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

xmlで実装

<RadioGroup
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

RadioGroupを実装するには、<RadioGroup/>タグを使用します。

RadioButtonを実装するには、<RadioButton/>タグを使用します。
RadioButtonは、RadioGroupのタグ内に実装します。そうすることで、RadioGroup内に実装されたRadioButton達がグループ化され、1つが選択されると、他が選択解除されるようになります。

RadioButtonのテキストは、android:textで、指定することができます。

Point

xmlでラジオボタンを実装するには、<RadioGroup/>タグ、<RadioButton/>タグを使用する
RadioButtonは、RadioGroupの子Viewとなるように実装する
xmlでラジオボタンのテキストは、android:textで指定する

コードで動的にRadioButtonを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

コードで実装

// 1つ目のRadioButton生成
val radioButton1 = RadioButton(this)
radioButton1.text = "ボタン１"

// 2つ目のRadioButton生成
val radioButton2 = RadioButton(this)
radioButton2.text = "ボタン２"

// 3つ目のRadioButton生成
val radioButton3 = RadioButton(this)
radioButton3.text = "ボタン３"

// RadioGroupの生成
val radioGroup = RadioGroup(this)
// RadioGroupに、3つのRadioButtonを子Viewとして追加
radioGroup.addView(radioButton1)
radioGroup.addView(radioButton2)
radioGroup.addView(radioButton3)

// LinearLayoutに、RadioGroupを子Viewとして追加(LinearLayoutは、xmlで定義済みとする)
val linearLayout = findViewById<LinearLayout>(R.id.container)
linearLayout.addView(radioGroup)

RadioButton()で、RadioButtonのインスタンスを、RadioGroup()で、RadioGroupのインスタンスを生成しております。

コードで動的にRadioButtonのテキストを指定するには、textを使用します。

RadioGroupの子ViewとしてRadioButtonを追加するには、addView()を使用します。

最後に、親レイアウトのlinearLayoutに対し、addView()でRadioGroupを追加しております。

Point

コードで実装するには、RadioButton()、RadioGroup()でインスタンスを生成する
コードでRadioButtonのテキストを指定するには、textを使用する
コードでRadioGroupの子ViewとしてRadioButtonを追加するには、RadioGroupにaddView()する

RadioButtonの基本的な使い方

選択状態を変更する方法

RadioButtonの選択状態を変更するには、RadioGroupから変更する方法と、RadioButtonから変更する方法があります。

RadioGroupから選択状態を変更する

RadioGroupから選択状態を変更するには、check()を使用します。

MainActivity.kt
activity_main.xml

val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_2)

<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

check()の引数には、選択状態にしたいRadioButtonのIDを指定します。

Point

RadioGroupから任意のRadioButtonを選択状態に変更するには、check()を使用する。check()の引数には、選択状態にしたいRadioButtonのIDを指定する

RadioButtonから選択状態を変更する

RadioButtonから選択状態を変更するには、isCheckedを使用します。

MainActivity.kt
activity_main.xml

val radioButton = findViewById<RadioButton>(R.id.radio_button_2)
radioButton.isChecked = true

<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

isCheckedに、trueを指定すると選択状態になり、falseを指定すると選択状態が解除されます。

また、同じRadioGroup内の2つのRadioButtonに対し、isChecked = trueを設定すると、最後に設定されたRadioButtonが選択状態となります。

Point

RadioButtonから、自身の選択状態を変更するには、isCheckedを使用する

選択されているRadioButtonのIDを取得する方法

選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用します。

MainActivity.kt
activity_main.xml

// RadioGroupから、RadioButton1を選択状態に変更
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_1)

// 選択状態のRadioButtonのIDを取得
val id = radioGroup.checkedRadioButtonId

// IDをもとに、選択状態のRadioButtonを取得し、ボタンのテキストを出力
val checkedRadioButton = findViewById<RadioButton>(id)
println(checkedRadioButton.text)

<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

RadioGroupに対し、checkedRadioButtonIdで選択状態のRadioButtonのIDを取得し、そのIDをもとに、RadioButtonを取得しております。

上記のサンプルコードを実行すると、「ボタン１」と出力されます。

Point

選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用する

全てのチェック状態を解除する方法

全てのチェック状態を解除するには、clearCheck()を使用します。

MainActivity.kt
activity_main.xml

val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_1)
radioGroup.clearCheck()

<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

check()でRadioButton1を選択状態に変更した後、clearCheck()で選択状態を解除しております。

Point

全ての選択状態を解除するには、clearCheck()を使用する

選択項目が変更されたイベントを受け取る方法

最後に、RadioButtonの選択項目が変更された時のイベントを受け取る方法を紹介致します。選択項目変更のイベントを受け取るには、setOnCheckedChangeListenerを実装します。

以下は、ラジオボタンを選択すると、選択したラジオボタンのテキストがトーストで表示されるサンプルコードです。

MainActivity.kt
activity_main.xml

val radioGroup = findViewById<RadioGroup>(R.id.radio_group)

// 選択項目変更のイベント追加
radioGroup.setOnCheckedChangeListener { group, checkedId ->
   // checkedIdから、選択されたRadioButtonを取得
   val radioButton = findViewById<RadioButton>(checkedId)
   Toast.makeText(this, radioButton.text, Toast.LENGTH_SHORT).show()
}

<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン１"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン２"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン３"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

setOnCheckedChangeListenerの後のブロック{ }内に、選択項目が変更された時に行いたい処理を実装します。また、ブロック内では、RadioGroup(サンプルコードのgroup)と、選択されたRadioButtonのID(サンプルコードのcheckedId)を受け取ることができます。

Point

選択項目変更イベントを実装するには、setOnCheckedChangeListenerを使用する
選択項目が変更された時に行いたい処理は、setOnCheckedChangeListenerの後のブロック{ }内に実装する
ブロック内では、項目変更が行なわれたRadioGroupと選択されたRadioButtonのIDを受け取ることができる

まとめ

xmlでラジオボタンを実装するには、<RadioGroup/>タグ、<RadioButton/>タグを使用する
RadioButtonは、RadioGroupの子Viewとなるように実装する
xmlでラジオボタンのテキストは、android:textで指定する
コードで実装するには、RadioButton()、RadioGroup()でインスタンスを生成する
コードでRadioButtonのテキストを指定するには、textを使用する
コードでRadioGroupの子ViewとしてRadioButtonを追加するには、RadioGroupにaddView()する
RadioGroupから任意のRadioButtonを選択状態に変更するには、check()を使用する。check()の引数には、選択状態にしたいRadioButtonのIDを指定する
RadioButtonから、自身の選択状態を変更するには、isCheckedを使用する
選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用する
全ての選択状態を解除するには、clearCheck()を使用する
選択項目変更イベントを実装するには、setOnCheckedChangeListenerを使用する
選択項目が変更された時に行いたい処理は、setOnCheckedChangeListenerの後のブロック{ }内に実装する
ブロック内では、項目変更が行なわれたRadioGroupと選択されたRadioButtonのIDを受け取ることができる