Android kotlin CheckBox 非活性時にチェックボックス背景色の変更を行いたい

実現したいこと

ここに実現したいことを箇条書きで書いてください。

kotlinでCheckBoxの非活性にチェックボックスの背景色を非活性が分かりやすいようにグレーなど変更したい

前提

アンドロイドでとある条件の場合、チェックボックスを非活性にするのですが、
非活性にはなりますが、背景色が変わらないため、非活性か活性かの判断がつきにくいので
非活性の場合は
とある条件とは以下のようなチェックボックスがある場合、全てをチェックすると
全て以外のチェックボックスを非活性に仕様としています。
□全て
□条件１
□条件２
□条件３
↓
☑全て
▦条件１
▦条件２
▦条件３

発生している問題・エラーメッセージ

活性時

↓
非活性時

チェックが付いているものはわかりやすいのですが
チェックがついていないものは非活性が判断付きにくいため
チェックボックスの背景色がグレーになればと思っています。

該当のソースコード

setting_fragment.xml

kotlin
1<?xml version="1.0" encoding="utf-8"?>
2<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context=".SettingFragment">
8
9    <!-- 画面をスクロールさせる -->
10    <ScrollView
11        android:layout_width="match_parent"
12        android:layout_height="match_parent"
13        android:layout_marginTop="16dp"
14        android:layout_marginStart="16dp"
15        android:id="@+id/scrollView">
16
17        <!-- スクロールさせたいTextViewを複数設定したいため、LinearLayoutとしてまとめる -->
18        <LinearLayout
19            android:id="@+id/LinearLayout"
20            android:orientation="vertical"
21            android:layout_height="wrap_content"
22            android:layout_width="fill_parent">
23
24            <!-- クラスのチェックボックス -->
25            <TextView
26                android:id="@+id/class_textview"
27                android:layout_width="wrap_content"
28                android:layout_height="wrap_content"
29                android:text="@string/classname"
30                android:textSize="20sp"
31                android:textColor="@color/grey_600"
32                />
33            <CheckBox
34                android:id="@+id/class_checkbox_all"
35                android:layout_width="wrap_content"
36                android:layout_height="wrap_content"
37                android:text="全て"
38                android:layout_marginStart="20dp"
39                android:textColor="@color/grey_600"
40                />
41            <CheckBox
42                android:id="@+id/class_checkbox1"
43                android:layout_width="wrap_content"
44                android:layout_height="wrap_content"
45                android:text="@string/class01"
46                android:layout_marginStart="20dp"
47                android:textColor="@color/grey_600"
48                />
49            <CheckBox
50                android:id="@+id/class_checkbox2"
51                android:layout_width="wrap_content"
52                android:layout_height="wrap_content"
53                android:text="@string/class02"
54                android:layout_marginStart="20dp"
55                android:textColor="@color/grey_600"
56                />
57            <CheckBox
58                android:id="@+id/class_checkbox3"
59                android:layout_width="wrap_content"
60                android:layout_height="wrap_content"
61                android:text="@string/class03"
62                android:layout_marginStart="20dp"
63                android:textColor="@color/grey_600"
64                />
65            <CheckBox
66                android:id="@+id/class_checkbox4"
67                android:layout_width="wrap_content"
68                android:layout_height="wrap_content"
69                android:text="@string/class04"
70                android:layout_marginStart="20dp"
71                android:textColor="@color/grey_600"
72                />
73            <CheckBox
74                android:id="@+id/class_checkbox5"
75                android:layout_width="wrap_content"
76                android:layout_height="wrap_content"
77                android:text="@string/class05"
78                android:layout_marginStart="20dp"
79                android:textColor="@color/grey_600"
80                />
81            <CheckBox
82                android:id="@+id/class_checkbox6"
83                android:layout_width="wrap_content"
84                android:layout_height="wrap_content"
85                android:text="@string/class06"
86                android:layout_marginStart="20dp"
87                android:textColor="@color/grey_600"
88                />
89            <CheckBox
90                android:id="@+id/class_checkbox7"
91                android:layout_width="wrap_content"
92                android:layout_height="wrap_content"
93                android:text="@string/class07"
94                android:layout_marginStart="20dp"
95                android:textColor="@color/grey_600"
96                />
97            <CheckBox
98                android:id="@+id/class_checkbox8"
99                android:layout_width="wrap_content"
100                android:layout_height="wrap_content"
101                android:text="@string/class08"
102                android:layout_marginStart="20dp"
103                android:textColor="@color/grey_600"
104                />
105
106            <LinearLayout
107                android:layout_width="match_parent"
108                android:layout_height="wrap_content"
109                android:orientation="horizontal">
110            <Button
111                android:id="@+id/save_button"
112                android:layout_width="wrap_content"
113                android:layout_height="wrap_content"
114                android:layout_marginTop="32dp"
115                android:layout_marginBottom="20dp"
116                android:onClick="saveData"
117                android:text="@string/save_btn"
118                android:layout_gravity="center_horizontal"
119                android:layout_weight="1"
120                />
121
122            </LinearLayout>
123        </LinearLayout>
124    </ScrollView>
125</androidx.constraintlayout.widget.ConstraintLayout>

kotlion
1package jp.co.test
2
3import android.annotation.SuppressLint
4import android.graphics.Color
5import android.os.Bundle
6import android.util.Log
7import android.view.LayoutInflater
8import android.view.View
9import android.view.ViewGroup
10import android.widget.Button
11import android.widget.CheckBox
12import android.widget.Toast
13import androidx.fragment.app.Fragment
14import kotlinx.coroutines.CoroutineScope
15import kotlinx.coroutines.Dispatchers
16import kotlinx.coroutines.launch
17import kotlinx.coroutines.withContext
18
19/**
20 * 設定
21 */
22class SettingFragment : Fragment() {
23
24  // 保存ボタン
25  private lateinit var saveButton: Button
26  // 全てチェックボックスクラス
27  private lateinit var classAllCheckBox: CheckBox
28
29  // クラスチェックボックスMap
30  private var classCheckBoxMap = mutableMapOf<String, CheckBox>()
31
32  // 選択IDX
33  private var lstIdx:String? = ""
34
35  // クラスMap（key:名称、val:コード値）
36  private val classesMap = mapOf(
37    "0.15(3tクラス)以下" to "1",
38    "0.2" to "2",
39    "0.25" to "3",
40    "0.45" to "4",
41    "0.7" to "5",
42    "1.2" to "6",
43    "1.6以上" to "7",
44    "その他" to "8"
45  )
46  /**
47   *  onCreateView
48   *  @return view
49   */
50  override fun onCreateView(
51    inflater: LayoutInflater, container: ViewGroup?,
52    savedInstanceState: Bundle?
53  ): View? {
54    val view = inflater.inflate(R.layout.fragment_setting, container, false)
55    // putXXXXに対応するgetXXXXで値を取得
56    lstIdx = arguments?.getString("BUNDLE_KEY_IDX") // "プッシュ通知一覧選択IDX"
57
58    // リソースの初期化
59    initializeResource(view,lstIdx)
60
61    return view
62  }
63
64  /**
65   * リソースの初期化
66   * @param view
67   */
68  private fun initializeResource(view: View, lstIdx: String?) {
69    Log.d(TAG, "initializeResource")
70    // 起動画像が表示されるため背景色を城に設定
71    view.setBackgroundColor(Color.WHITE)
72    // 保存ボタンの初期設定
73    saveButton = view.findViewById<Button>(R.id.save_button)
74    saveButton.setOnClickListener {
75      //saveData(attachmentConditions,false)
76    }
77
78    // 全てチェックの設定
79    // 全てチェックボックスクラス
80    classAllCheckBox = view.findViewById<CheckBox>(R.id.class_checkbox_all)
81
82    // 全てチェックボックスの設定
83    classAllCheckBox.setOnClickListener {
84      if(classAllCheckBox.isChecked){
85        // チェックの場合、全て以外を非活性とする
86        for (map in classCheckBoxMap) {
87          val cb = map.value
88          cb.setEnabled(false)
89          //cb.setBackgroundColor(Color.GRAY)
90        }
91      }else{
92        // チェック無しの場合、全て以外を活性とする
93        for (map in classCheckBoxMap) {
94          val cb = map.value
95          cb.setEnabled(true);
96          //cb.setBackgroundColor(Color.WHITE)
97        }
98      }
99    }
100  }
101  companion object {
102    const val TAG: String = "SettingFragment"
103  }
104}
105

試したこと

CheckBoxに以下のように背景色を設定すると
cb.setBackgroundColor(Color.GRAY)
ラベル全体がグレーになってしまいました。。

補足情報（FW/ツールのバージョンなど）

Android Studio Flamingo | 2022.2.1

jimbe

2023/06/27 03:25

操作自体を変更するという方法があると思います。「全て」とその他のチェックボックスが排他となっていますが、そもそも「全て」がチェックボックスである必要があるでしょうか。「全て」をボタンにして、押したら全てのチェックボックスにチェックを入れる動作をするとすれば、各チェックボックスの活性を変更する必要は無くなりますし、例えば 0.45m3 が含まれるかを見るのに『0.45m3 にチェックが付いているか or 「全て」にチェックが付いているか』と複数個所を見なくても『0.45m3 のチェックを見る』だけで済みます。

abebebe0715

2023/06/28 05:51

お返事ありがとうございます。各項目の一番上に「全て」のチェックボックスが欲しいという要望がありまして操作を変更することは難しいのです。 jimbeさんの言われている通りボタンとチェックボックスとに分けるという案も素晴らしいと思うのですが。

jimbe

2023/06/28 06:51

要望だったのですね、了解です。それで、「全て」チェックボックスを選択した場合、他のチェックボックス全てにチェックを自動で付けるのは要望的には可能でしょうか、不可能でしょうか。

abebebe0715

2023/06/28 07:01

お返事ありがとうございます。画面の情報をDBに保管するのですがその際に全てにチェックが付いている場合はnullとして保管。全てにチェックが付いていない場合は、1,2,5のようにチェックをついている情報を保管というサーバー側の仕様なんです。 nullの場合は全件抽出の対象といるようでして。ですので上記の要望も裏で制御すればいけそうなのですができれば活性非活性で画面上とＤＢ保管上の動作が同じとしたいです。

jimbe

2023/06/28 07:15

>画面上とＤＢ保管上の動作が同じとしたい了解です。 DB の 1 つのテキストフィールドに、・「全て」がチェックの場合は null ・「全て」が未チェックの場合は、チェック状態の番号を "," 区切りで並べた文字列を保存するのでしょうか。つまり、「全て」をチェックして DB に保存すると、チェック前の個々の状態は分からなくなるということであっていますか?

abebebe0715

2023/06/28 07:24

合ってます！全てをチェック　→　全てをチェック解除　その場合、他のチェックはクリアとしてOKの要望です。

jimbe

2023/06/28 07:29 編集

DB と同じ感じにすると読み込み時に「全て」以外が全て(^^; チェック無しになるので分かり難いのですね。ざっくり検索した所では、チェックボックスの画像を selector で切り替えるのを自分で書いて、disable の時の画像として希望の背景のモノを設定する感じになりそうです。 AppCompatCheckBox が使用している selector を探して disable 時の画像とか設定とかが分かれば弄り用があるということかもしれません。

abebebe0715

2023/06/28 08:09

ありがとうございます。チェックが付いている場合はそれっぽくグレーになったので何か設定等でどうにかなるかなとも思ったのですが画像を設定という方向ですね。こちらの方針で進めていきたいと思います。ありがとうございました。また詰まりましたらご質問するかもしれないです！

jimbe

2023/06/28 11:10

checkbox はチェックの付くボタンでは無く実際には文字列(TextView)のアイコンがクリックで切り替わるような感じなので、テキストとチェックの背景が一つになっていて分けて設定出来ない感じですね。なのでチェックの画像として背景が灰色のを用意しておいて不活性の時はその画像を表示するように・・・と検索と実験をやってみていたのですが、どうも良い感じになりません。いっそ checkbox の文字列を消して横に textview を付けるかと思いましたが、 checkbox の右に余計な空白があって不格好になってしまいました。

abebebe0715

2023/06/29 08:01

ご親切に色々試していただきありがとうございます！！ Webですぐにできるちょっとしたことが難しかったりとアプリ開発はとても大変です。画像を設定することでなんとか解決できました。ありがとうございました！！

行動規範の内容に同意します

回答2件

自己解決

出来ました！

「全て」チェックOFFの場合

「全て」チェックONの場合

チェックボックスを画像にして対応を行いました。
以下のリンクを参考にし
https://wikiwiki.jp/android/%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E7%94%BB%E5%83%8F%E5%A4%89%E6%9B%B4%28CheckBox%2CRadioButton%29
https://note.com/flashcards/n/n6cf8a14ed510

１．各画像の作成
・チェックOff画像、チェックOn画像、チェックボックス非活性画像の三つの画像を用意
・Drawableに上記の画像を追加

２．button.xmlを新規で作成し、チェックボックスの動作にてどの画像を使用するかを設定

button.###
1<?xml version="1.0" encoding="UTF-8"?>
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <!-- (1) -->
4    <item
5        android:state_checked="true"
6        android:state_pressed="true"
7        android:drawable="@drawable/icon_check_on3" />
8    <!-- (2) -->
9    <item
10        android:state_checked="true"
11        android:drawable="@drawable/icon_check_on3" />
12    <!-- (3) -->
13    <item
14        android:state_checked="false"
15        android:state_pressed="true"
16        android:drawable="@drawable/icon_check3" />
17    <!-- (4) -->
18    <item
19        android:state_checked="false"
20        android:drawable="@drawable/icon_check3" />
21    <item
22        android:state_enabled="false"
23        android:drawable="@drawable/icon_check_disabled3" />
24</selector>

３．themas.xmlに追加

themes.xml　抜粋
1    <!-- CheckBox -->
2    <style name="ImageCheckBox" parent="Theme.AppCompat.Light">
3        <item name="android:button">@animator/button</item>
4        <item name="android:layout_marginTop">10dp</item>
5    </style>
6

４．テーマに設定したチェックボックスを使用するようxmlを修正

fragment_setting.xml
1            <CheckBox
2                android:id="@+id/use_type_checkbox_all"
3                android:layout_width="wrap_content"
4                android:layout_height="wrap_content"
5                android:text="全て"
6                android:layout_marginStart="20dp"
7                android:textColor="@color/grey_600"
8                android:theme="@style/ImageCheckBox"
9                />
10

投稿2023/06/29 08:00

abebebe0715

総合スコア9

この回答はGPT-4による自動生成回答です

oid:textColor="@color/grey_600"
/>

    </LinearLayout>
</ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>


SettingFragment.kt
```kotlin
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.CheckBox
import androidx.fragment.app.Fragment

class SettingFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.setting_fragment, container, false)

        val classCheckboxAll = view.findViewById<CheckBox>(R.id.class_checkbox_all)
        val classCheckbox1 = view.findViewById<CheckBox>(R.id.class_checkbox1)
        val classCheckbox2 = view.findViewById<CheckBox>(R.id.class_checkbox2)
        val classCheckbox3 = view.findViewById<CheckBox>(R.id.class_checkbox3)
        // 他のチェックボックスも同様に定義

        classCheckboxAll.setOnCheckedChangeListener { _, isChecked ->
            if (isChecked) {
                classCheckbox1.isEnabled = false
                classCheckbox2.isEnabled = false
                classCheckbox3.isEnabled = false
                // 他のチェックボックスも同様に非活性化

                // 背景色を変更
                classCheckbox1.setBackgroundColor(Color.GRAY)
                classCheckbox2.setBackgroundColor(Color.GRAY)
                classCheckbox3.setBackgroundColor(Color.GRAY)
                // 他のチェックボックスも同様に背景色を変更
            } else {
                classCheckbox1.isEnabled = true
                classCheckbox2.isEnabled = true
                classCheckbox3.isEnabled = true
                // 他のチェックボックスも同様に活性化

                // 背景色を元に戻す
                classCheckbox1.setBackgroundColor(Color.TRANSPARENT)
                classCheckbox2.setBackgroundColor(Color.TRANSPARENT)
                classCheckbox3.setBackgroundColor(Color.TRANSPARENT)
                // 他のチェックボックスも同様に背景色を元に戻す
            }
        }

        return view
    }
}

上記のコードでは、全てのチェックボックスがチェックされた場合、他のチェックボックスが非活性になり、背景色がグレーに変更されます。全てのチェックボックスがチェックされていない場合、他のチェックボックスが活性化され、背景色が透明に戻ります。

投稿2023/06/27 00:57