チェックボックスの色を変更する方法は?


247

CheckBoxAndroidでデフォルトの色を変更するにはどうすればよいですか?
デフォルトでCheckBoxは緑色ですが、この色を変更したいと思います。
できない場合はカスタムの作り方を教えてくださいCheckBox


1
フォントの色を変更しようとしていますか?または実際のボックスの色は?

1
実際のボックスの色を変更
Piyush 14

72
を設定するandroid:buttonTint="@color/mybrown"と、ボックスの色を簡単に変更できます。
shauvik 2015年

6
@Shauvikはマテリアルデザインに取り組んでいます:)
Mucahit

9
@shauvik app:buttonTint="@color/mybrown"代わりに使用する方が良いです。これにより、API <21で機能します
Nikaoto 2017

回答:


187

minSdkVersion21歳以上の場合、android:buttonTint属性を使用してチェックボックスの色を更新します。

<CheckBox
  ...
  android:buttonTint="@color/tint_color" />

AppCompatライブラリを使用し、21未満のAndroidバージョンをサポートするプロジェクトでは、buttonTint属性の互換バージョンを使用できます。

<CheckBox
  ...
  app:buttonTint="@color/tint_color" />

この場合、サブクラス化する場合は、代わりCheckBoxに使用することを忘れないでくださいAppCompatCheckBox

以前の回答:

属性CheckBoxを使用してドローアブルを変更できandroid:button="@drawable/your_check_drawable"ます。


7
独自のドローアブルを作成する必要があります。もっと簡単な方法が必要です...
IgorGanapolsky

14
buttonTintの色を変更する方が簡単です。不必要にカスタマイズする代わりに、ネイティブ要素を使用する必要があります。
Neela 2017

3
注:材料設計スタイリングのために、そこにあるcontentControlオプションは今:materialdoc.com/components/selection-controls
SimpsOff

392

XMLで直接色を変更できます。buttonTintボックスに使用:(APIレベル23以降)

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:buttonTint="@color/CHECK_COLOR" />

appCompatCheckbox v7古いAPIレベルを使用してこれを行うこともできます。

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:buttonTint="@color/COLOR_HERE" /> 

5
AppCompatCheckBox ...ありがとう。私はこれを知りませんでした。
moskis 2016

8
よかった、ありがとう!そして、xmlns:app = " schemas.android.com/apk/res-auto "をメイン/親レイアウトに追加することを忘れないでください
AlbertoMéndezMar

2
'android.support.v7.widget.AppCompatCheckBox'を使用すると機能しません
Zvi

1
これは、レイアウトでCheckBoxを使用するときに自動的に使用されます。このクラスを手動で使用する必要があるのは、カスタムビューを作成するときだけです。
최봉재2017

2
チェック状態とチェックされていない状態に2つの異なる色を設定するのはどうですか?
DYS 2017年

129

チェックボックスのAndroidテーマを設定して、styles.xmlに必要な色を追加できます。

<style name="checkBoxStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">CHECKEDHIGHLIGHTCOLOR</item>
    <item name="android:textColorSecondary">UNCHECKEDCOLOR</item>
</style>

次に、レイアウトファイルで:

<CheckBox
     android:theme="@style/checkBoxStyle"
     android:id="@+id/chooseItemCheckBox"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

android:buttonTint="@color/CHECK_COLOR"この方法とは異なり、Api 23で動作します


5
TEXTCOLORSECONDARY !!!! ありがとうございます!それでおしまい。年齢を検索して、選択されていない背景色を変更するだけで、カスタムドローアブルを使用したくありませんでした。これだよ!
マルガード2016年

@Mulgard助けてくれてうれしい!
Amro elaswar、2016年

2
私のために働いたが、テキストを見ることができるようにCheckBox xmlに追加する必要があった-android:textColor = "@ color / textColor"
Zvi

プログラムでそれをどのように行うのですか?
Zvi

@Zviプログラムでこれを実行できるかどうかはわかりません
Amro elaswar

48

プログラムバージョン:

int states[][] = {{android.R.attr.state_checked}, {}};
int colors[] = {color_for_state_checked, color_for_state_normal}
CompoundButtonCompat.setButtonTintList(checkbox, new ColorStateList(states, colors));

1
おかげさまで。あなたは揺るぎない、より良い解決策。
カルロス

色で予想外の結果が出ましたが、混乱していませんか?
Kirill Karmazin

アンドロイドであなたは常にあなたがそれを動的に変更する必要がある場合を除き、プログラムでXMLファイルにすべてのレイアウトのものを設定していないことを試みる必要があるため@Carlosこれは、「より良い」解決策ではありません
kyay

@kyay「常に」ではない... Androidリソースシステムはごちゃごちゃしていて、多くの場合、プログラムでそれを行う方がはるかに簡単で、保守が容易です。
nyholku

それは一種の懸念の分離に役立ちます
kyay

42

buttonTint21以上のAPIバージョンのボタンとカラーセレクターの色を変更するために使用します。

<android.support.v7.widget.AppCompatCheckBox
                android:id="@+id/check"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:buttonTint="@color/checkbox_filter_tint"
                tools:targetApi="21"/>

res / colors / checkbox_filter_tint.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/light_gray_checkbox"
          android:state_checked="false"/>
    <item android:color="@color/common_red"
          android:state_checked="true"/>
</selector>

3
英語を話し、答えを説明してください
GGO

SOでは常に英語を使用してください。
nyconing 2017

それは良い答えである
のVivek Aナイク

これは、すべてのデバイスで機能するチェック済みカラーとチェックなしカラーの両方を設定するための唯一の簡単なアプローチのようです。
Gumby The Green

これは受け入れられる答えになるはずです。ただし、セレクターがvaluesリソースとして宣言されている場合は機能しません。上記のパスが示すように、colorsリソースフォルダー内にある必要があります。
Benjamin Basmaci

18

組み込みのAndroidビューを構成する方法としてAndroidで彼のスタイルアプローチを使用し、プロジェクトに新しいスタイルを追加することをお勧めします。

<style name="yourStyle" parent="Base.Theme.AppCompat">
    <item name="colorAccent">your_color</item> <!-- for uncheck state -->
    <item name="android:textColorSecondary">your color</item> <!-- for check state -->
</style>

このスタイルをチェックボックスのテーマに追加します:android:theme = "@ style / youStyle"

お役に立てれば。


このソリューションに同意すると、これらの属性は、デフォルトの組み込みAndroidコンポーネントでうまく機能するはずです。
Trung Le

1
これは、9か月前のAmro elaswarの回答の繰り返しです。
jk7 2018

これは実際のソリューションである種類のソリューションです。
Iharob Al Asimi

16

xmlにbuttonTintを追加する

<CheckBox
      android:id="@+id/chk_remember_signup"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:buttonTint="@android:color/white"
      android:text="@string/hint_chk_remember_me" />

2
この回答の内容はafathmanの回答にすでに存在しています
MTCoster

10

styles.xmlファイルに次の行を追加します。

<style>
    <item name="android:colorAccent">@android:color/holo_green_dark</item>
</style>

例を使用して回答を編集し、コメントとして投稿しないでください
ビシュ

4
わずかな修正:<item name = " android:colorAccent> </ item>です。また、これはAPI 21以降でのみ使用できます
。– user3829751

これはcolorAccentを変更し、要求されたものとは異なります
Alberto M

1
Galaxy S3では、CheckBoxのチェック状態のみを変更します。ただし、チェックされていない状態は同じです。
スラバ

9

buttonTintがうまくいきました

android:buttonTint = "@ color / white"

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:id="@+id/agreeCheckBox"
    android:text="@string/i_agree_to_terms_s"
    android:buttonTint="@color/white"
    android:layout_below="@+id/avoid_spam_text"/>

8

私は同じ問題に直面しました、私は以下のテクニックを使用して解決策を得ました。btn_check.xmlfrom android-sdk/platforms/android-#(version)/data/res/drawableをプロジェクトの描画可能なフォルダーにコピーし、「オン」および「オフ」の画像の状態をカスタム画像に変更します。
次に、あなたのxmlはちょうど必要ですandroid:button="@drawable/btn_check"

<CheckBox
    android:button="@drawable/btn_check"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true" />

別のデフォルトのAndroidアイコンを使用する場合は、以下を使用できます。

android:button="@android:drawable/..."

すばらしい答え-カスタムxmlを作成するよりもはるかに簡単です。私にとっては、背景が灰色で、チェックボックスの境界線が表示されませんでした。これを追加しました。今すぐ確認できます:android:button = "@ android:drawable / checkbox_off_background"
Gene Bo

1
このアプローチを使用することには、実は私が気づいたよりも少し多くのことがありましたが、それでも素晴らしいオプションです。以下に詳細を追加しました。stackoverflow.com/ a / 29831532/2162226
Gene Bo


4

100%堅牢なアプローチ。

私の場合、サードパーティのMaterialDialogライブラリからチェックボックスを取得したため、XMLレイアウトソースファイルにアクセスできませんでした。したがって、これをプログラムで解決する必要があります。

  1. xmlでColorStateListを作成します。

res / color / checkbox_tinit_dark_theme.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white"
        android:state_checked="false"/>
    <item android:color="@color/positiveButtonBg"
        android:state_checked="true"/>
</selector>
  1. 次に、それをチェックボックスに適用します。

    ColorStateList darkStateList = ContextCompat.getColorStateList(getContext(), R.color.checkbox_tint_dark_theme);
    CompoundButtonCompat.setButtonTintList(checkbox, darkStateList);

PSさらに、誰かが興味を持っている場合は、MaterialDialogダイアログからチェックボックスを取得する方法を次に示します(で設定した場合.checkBoxPromptRes(...))。

CheckBox checkbox = (CheckBox) dialog.getView().findViewById(R.id.md_promptCheckbox);

お役に立てれば。


3

Drawable resource file下にxmlを作成してres->drawable名前を付けます。たとえば、checkbox_custom_01.xml

<?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/checkbox_custom_01_checked_white_green_32" />
  <item 
   android:state_checked="false" 
   android:drawable="@drawable/checkbox_custom_01_unchecked_gray_32" />
</selector>

カスタムチェックボックスの画像ファイル(pngを推奨)をres->drawableフォルダーにアップロードします。

次に、レイアウトファイルに移動し、チェックボックスを

<CheckBox
    android:id="@+id/checkBox1"
    android:button="@drawable/checkbox_custom_01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:focusable="false"
    android:focusableInTouchMode="false"
    android:text="CheckBox"
    android:textSize="32dip"/>

android:button以前に作成した正しいXMLファイルをポイントする限り、何でもカスタマイズできます。

初心者への注意:必須ではありませんが、レイアウトツリー全体でチェックボックスに一意のIDを付けることをお勧めします。


3

こんにちはこれはダークテーマとライトテーマの両方のテーマコードです。

<attr name="buttonsearch_picture" format="reference"/>
<attr name="buttonrefresh_picture" format="reference"/>

<style name="Theme.Light" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:textColorPrimary">@color/black</item>
    <item name="android:textColorSecondary">@color/black</item>
    <item name="android:textColor">@color/material_gray_800</item>
    <item name="actionOverflowButtonStyle">@style/LightOverflowButtonStyle</item>
    <item name="buttonsearch_picture">@drawable/ic_search_black</item>
    <item name="buttonrefresh_picture">@drawable/ic_refresh_black</item>
</style>

<style name="Theme.Dark" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:textColorSecondary">@color/material_gray_500</item>
    <item name="android:textColor">@color/material_gray_800</item>
    <item name="actionOverflowButtonStyle">@style/DarkOverflowButtonStyle</item>
    <item name="buttonsearch_picture">@drawable/ic_search_white</item>
    <item name="buttonrefresh_picture">@drawable/ic_refresh_white</item>
    <item name="android:colorBackground">#ffffff</item>
    <item name="android:alertDialogTheme">@style/LightDialogTheme</item>
    <item name="android:alertDialogStyle">@style/LightDialogTheme</item>
  <!-- <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>-->
    <item name="android:popupMenuStyle">@style/PopupMenu</item>
</style>

チェックボックスの色を変更したい場合は、「colorAccent」属性がチェック状態に使用され、「android:textColorSecondary」が状態チェック解除に使用されます。

「actionOverflowButtonStyle」は、アクションバーのオーバーフローアイコンの色を変更するために使用します。

「buttonsearch_picture」属性は、アクションバーのアクションボタンの色合いの変更に使用されます。これは、style.xmlのカスタム属性です

<attr name="buttonsearch_picture" format="reference"/>

アプリで使用している更新ボタンも同じです。

「android:popupMenuStyle」属性は、暗いテーマで明るいテーマのポップアップメニュースタイルを取得するために使用されています。

<style name="PopupMenu" parent="Theme.AppCompat.Light.NoActionBar">
</style>

これは、Rocks Playerアプリで使用しているツールバーコードです。

 <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    app:contentInsetStart="0dp"
    android:title="Rocks Player"
    android:layout_width="match_parent"
    android:elevation="4dp"
    android:layout_height="48dp"
    app:layout_scrollFlags="scroll|enterAlways"
    android:minHeight="48dp"
    app:titleTextAppearance="@style/Toolbar.TitleText"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary"
    >
</android.support.v7.widget.Toolbar>

テーマ:-

 <style name="AppTheme0" parent="Theme.Light">
    <item name="colorPrimary">#ffffff</item>
    <item name="colorPrimaryDark">#cccccc</item>
    <item name="colorAccent">#0294ff</item>
</style>

<style name="AppTheme1" parent="Theme.Dark">
    <item name="colorPrimary">#4161b2</item>
    <item name="colorPrimaryDark">#4161b2</item>
    <item name="colorAccent">#4161b2</item>
</style>

2

ドローアブルで独自のxmlを作成し、これをandroid:background = "@ drawable / your_xml"として使用できます

ボーダーコーナーにすべてを与えることができます

<item>
    <shape>
        <gradient

            android:endColor="#fff"
            android:startColor="#fff"/>
        <corners
            android:radius="2dp"/>
        <stroke
            android:width="15dp"
            android:color="#0013669e"/>

    </shape>
</item>


1
ドローアブルベクターグラフィックスについて知っておくのは簡単ですが、この答えはボタンの色合いに関するOPの質問には答えません。
Mike Poole

2

「colors.xml」では、次の2つのプロパティを使用できます。

<color name="colorControlNormal">#eeeeee</color>
<color name="colorControlActivated">#eeeeee</color>

colorControlNormalはチェックボックスの通常のビュー用であり、colorControlActivatedはチェックボックスがオンの場合に使用されます。


1

<CheckBox>中に埋め込むことで、の背景色を変更できます<LinearLayout>。次に、の背景<LinearLayout>色を希望の色に変更します。


問題は、背景ではなくチェックボックスの色についてです
Zvi

1

以下のコードを試してください。それは私のために働いています。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/checked" 
          android:state_checked="true">
        <color android:color="@color/yello" />
    </item>
    <!-- checked -->
    <item android:drawable="@drawable/unchecked" 
          android:state_checked="false">
        <color android:color="@color/black"></color>
    </item>
    <!-- unchecked -->
    <item android:drawable="@drawable/checked" 
          android:state_focused="true">
        <color android:color="@color/yello"></color>
    </item>
    <!-- on focus -->
    <item android:drawable="@drawable/unchecked">
        <color android:color="@color/black"></color>
    </item>
    <!-- default -->
</selector>

とCheckBox

<CheckBox
    Button="@style/currentcy_check_box_style"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="20dp"
    android:text="@string/step_one_currency_aud" />

1

上記のようにandroidアイコンを使用する場合..

android:button="@android:drawable/..."

..これは良いオプションですが、これを機能させるには、次のように、チェックマークを表示/非表示にするトグルロジックを追加する必要があることがわかりました。

    checkBoxShowPwd.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

        // checkbox status is changed from uncheck to checked.
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

            int btnDrawable = android.R.drawable.checkbox_off_background;

            if (isChecked)
            {
                btnDrawable = android.R.drawable.checkbox_on_background;
            }

            checkBoxShowPwd.setButtonDrawable(btnDrawable);

        }
    });

まあ、これは本当に必要ない余分な作業です。ドローアブルのxmlファイルでは、セレクターのオンまたはオフのドローアブルリソースへの参照を指定します。これにより、チェックボックスの状態に応じて、適切なドローアブルが自動的に配置されます。
jkincali 2017

0

ほとんどの回答はxmlファイルを経由します。ほとんどのAndroidバージョンで有効な回答が見つかり、2つのステータスが1つの色になっている場合は、UnCheckを確認してください。これが私の解決策です。

コトリン:

val colorFilter = PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP)
CompoundButtonCompat.getButtonDrawable(checkBox)?.colorFilter = colorFilter

Java:

ColorFilter colorFilter = new PorterDuffColorFilter(Color.CYAN, PorterDuff.Mode.SRC_ATOP);
Drawable drawable = CompoundButtonCompat.getButtonDrawable(checkBox);
if (drawable != null) {
    drawable.setColorFilter(colorFilter);
}

-1

プログラムで色を設定するはるかに簡単な方法があります。以下のメソッドを使用して、Checkbox.setButtonTintList(ColorStateList.valueOf(getContext()。getColor(R.color.yourcolor)))


-2

以下のコード行を使用して、Javaコードで動的にチェックボックスの背景を変更できます。

//Setting up background color on checkbox.
 checkbox.setBackgroundColor(Color.parseColor("#00e2a5"));

この回答はこのサイトからのものでした。このサイトを使用してRGBカラーを16進値に変換することもできます。parseColorにフィードする必要があります

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.