【Android】＜Kotlin＞チェックボックス（Checkbox）を完全マスター！基本の実装から選択制御、複数のうち1つだけ選択可能にする方法、デザインカスタマイズまで全て解説

2025年1月12日

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

本日は、
Kotlinのチェックボックス（Checkbox）の実装方法、選択状態の監視やカスタマイズなど様々ご紹介します！

この記事を読んでわかること…
・画面にチェックボックス（Checkbox）を実装する方法
・チェックボックスの選択を感知する方法
・複数のチェックボックスで1つだけ選択可能にするロジック
・チェックボックスのカスタマイズ方法

環境

Kotlin (ver 1.9.0)
Android Studio (Giraffe | 2022.3.1 Patch 3)

画面にチェックボックス（Checkbox）を実装する方法

Kotlinでアプリ画面にチェックボックスを作成するには、
レイアウトファイルに<Checkbox>をセットします。

<CheckBox
    android:id="@+id/myCheckBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="同意する" />

<CheckBox> は、AndroidアプリケーションのXMLレイアウトで使用されるUIコンポーネントの一種です。
ユーザーがチェック（選択）またはアンチェック（選択解除）できるボタンを作成します。

チェックの状態（checked）を持ち、true または false の2つの状態が存在します。

具体的には、レイアウトファイルに以下のようにチェックボックスを置いていきます。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選択肢1" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選択肢2" />

    <CheckBox
        android:id="@+id/checkBox3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="選択肢3" />

</LinearLayout>

ビルドすると以下のように画面が表示されます。

チェックボックスの選択を感知する方法

続いて、
チェックボックスが「チェックされた時」や「解除された時」を感知して、特定の処理を行うよう実装します。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val checkBox1 = findViewById<CheckBox>(R.id.checkBox1)
        val checkBox2 = findViewById<CheckBox>(R.id.checkBox2)

        checkBox1.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                Toast.makeText(this, "選択肢1が選択されました", Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this, "選択肢1の選択が解除されました", Toast.LENGTH_SHORT).show()
            }
        }

        checkBox2.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                Toast.makeText(this, "選択肢2が選択されました", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

9行目：

setOnCheckedChangeListener
- CheckBoxが提供するリスナー（イベント監視）です。
- ユーザーがチェックボックスをチェックまたはチェック解除したときに呼び出されます。
- ユーザーがチェックボックスを操作するたびに、リスナー内のコードが実行されます。

_（最初の引数）
- チェックボックス自体を表します。
- このコードでは使わないため、アンダースコア（_）を使用して省略しています。
- 必要であれば、以下のように書き換え可能です

setOnCheckedChangeListener { buttonView, isChecked ->
    println("操作されたチェックボックス: ${buttonView.id}")
}

isChecked（2番目の引数）
- チェックボックスの現在の状態を示します。
- true: チェックされている状態。
- false: チェックが外されている状態。クボックスが選択された場合のみ以下の処理を実行。

複数のチェックボックスで1つだけ選択可能にするロジック

複数のチェックボックスの中から1つだけ選択可能にするには、以下のように実装します。

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val checkBox1 = findViewById<CheckBox>(R.id.checkBox1)
        val checkBox2 = findViewById<CheckBox>(R.id.checkBox2)
        val checkBox3 = findViewById<CheckBox>(R.id.checkBox3)

        val checkBoxes = listOf(checkBox1, checkBox2, checkBox3)

        checkBoxes.forEach { checkBox ->
            checkBox.setOnCheckedChangeListener { _, isChecked ->
                if (isChecked) {
                    checkBoxes.forEach { otherCheckBox ->
                        if (otherCheckBox != checkBox) {
                            otherCheckBox.isChecked = false
                        }
                    }
                }
            }
        }
    }
}

12行目〜18行目：

checkBoxes.forEach
- 複数のチェックボックスをリストで管理し、それぞれに処理を設定します。
setOnCheckedChangeListener
- チェックボックスの状態が変わったとき（チェックされた/解除された）に処理を実行します。
if (isChecked)
- チェックボックスが選択された場合のみ以下の処理を実行。
他のチェックボックスの選択を解除:
- 選択されたチェックボックス以外（otherCheckBox != checkBox）のチェックを外します（isChecked = false）。

ビルドしてチェックボックスを選択すると、以下の動きになります。

チェックボックスのカスタマイズ方法

チェックボックスの色を変更

チェックボックスのチェックマークの色を変更するには、buttonTint属性を使用します。

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="カスタムチェックボックス"
    android:buttonTint="@color/primaryColor" />

チェックボックスの背景を変更

チェックボックス全体の背景を変更するには、background属性を使用します。

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="背景付きチェックボックス"
    android:background="@drawable/custom_checkbox_background" />

カスタムチェックマークのアイコンを変更

チェックマーク自体をカスタマイズするには、button属性を使用します。

<CheckBox
    android:id="@+id/checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="アイコン付きチェックボックス"
    android:button="@drawable/custom_checkbox_icon" />

（カスタムアイコンをXMLで定義するか、画像リソースを使用します。）

まとめ

おつかれさまでした。いかがでしたでしょうか！

Checkboxを設置するフォーム送信画面や機能は、開発していく上で必ず出てきますよね。

ぜひ覚えて、アプリ開発で試してみてくださいね〜！

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

株式会社メモリアインク

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率８３％
【フリーランス】マージン一律５万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。