Bagaimana cara mengubah warna kotak centang?


247

Bagaimana cara mengubah CheckBoxwarna default di Android?
Secara default CheckBoxwarnanya hijau, dan saya ingin mengubah warna ini.
Jika tidak memungkinkan, tolong beri tahu saya cara membuat kebiasaan CheckBox?


1
Apakah Anda mencoba mengubah warna font? Atau warna kotak yang sebenarnya?

1
warna kotak yang sebenarnya saya ubah
Piyush

72
Pengaturan android:buttonTint="@color/mybrown"adalah cara mudah untuk mengubah warna kotak.
shauvik

6
@Shauvik itu hanya bekerja pada desain material :)
Mucahit

9
@shauvik lebih baik digunakan app:buttonTint="@color/mybrown"sebagai gantinya, dengan cara ini bisa bekerja pada API <21
Nikaoto

Jawaban:


187

Jika minSdkVersion21+ Anda menggunakan android:buttonTintatribut untuk memperbarui warna kotak centang:

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

Dalam proyek-proyek yang menggunakan pustaka AppCompat dan mendukung versi Android di bawah 21 Anda dapat menggunakan versi compat dari buttonTintatribut:

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

Dalam hal ini jika Anda ingin subkelas a CheckBoxjangan lupa untuk menggunakannya AppCompatCheckBox.

JAWABAN SEBELUMNYA:

Anda dapat mengubah CheckBoxdrawable menggunakan android:button="@drawable/your_check_drawable"atribut.


7
Anda harus membuat drawable Anda sendiri. Pasti ada jalan yang lebih lurus ke depan ...
IgorGanapolsky

14
Mengubah warna tombol adalah cara yang lebih lurus ke depan. Kita harus menggunakan elemen asli alih-alih mengubahnya secara tidak perlu.
Neela

3
Catatan: Untuk gaya desain material, ada contentControlopsi sekarang: materialdoc.com/components/selection-controls
SimpsOff

392

Anda dapat mengubah warna secara langsung dalam XML. Gunakan buttonTintuntuk kotak: (pada API level 23)

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

Anda juga dapat melakukan ini menggunakan appCompatCheckbox v7 level API yang lebih lama:

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

5
AppCompatCheckBox ... Terima kasih. Saya tidak tahu ini.
moskis

8
Terima kasih banyak! Dan jangan lupa untuk menambahkan xmlns: app = " schemas.android.com/apk/res-auto " ke tata letak utama / induk Anda
Alberto Méndez

2
Tidak berfungsi untuk saya menggunakan 'android.support.v7.widget.AppCompatCheckBox'
Zvi

1
Ini akan secara otomatis digunakan ketika Anda menggunakan Kotak Centang di tata letak Anda. Anda hanya perlu menggunakan kelas ini secara manual saat menulis tampilan khusus.
최봉재

2
Bagaimana dengan mengatur 2 warna berbeda untuk status diperiksa dan tidak dicentang?
DYS

130

Anda dapat mengatur tema android dari kotak centang untuk mendapatkan warna yang Anda inginkan di styles.xml Anda tambahkan:

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

lalu di file tata letak Anda:

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

tidak seperti menggunakan android:buttonTint="@color/CHECK_COLOR"metode ini bekerja di bawah Api 23


5
TEXTCOLORSECONDARY !!!! Terima kasih kawan! Itu dia. Saya mencari lama untuk hanya mengubah warna latar belakang yang tidak dipilih dan tidak ingin bekerja dengan drawables kustom. Ini dia!
Mulgard

@ Malgard senang saya bisa membantu!
Amro elaswar

2
Bekerja untuk saya, tetapi perlu menambahkan ke kotak centang xml untuk dapat melihat teks - android: textColor = "@ color / textColor"
Zvi

Bagaimana saya melakukannya secara terprogram?
Zvi

@ Zvi Saya tidak yakin Anda bisa melakukan ini secara
pemrograman

48

Versi terprogram:

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
Terima kasih untukmu Anda batu, Solusi yang lebih baik.
Carlos

itu memberi saya hasil yang tidak terduga dengan warna, apakah Anda yakin Anda tidak membingungkan apa pun?
Kirill Karmazin

@Carlos Ini bukan solusi "lebih baik", karena di android Anda harus selalu mencoba untuk mengatur semua hal tata letak dalam file xml dan tidak terprogram kecuali ketika Anda perlu mengubahnya secara dinamis
kyay

@kyay Tidak "selalu" ... sistem sumber daya Android berantakan dan sering melakukannya secara terprogram jauh lebih mudah dan lebih dapat dipertahankan.
nyholku

Ini semacam membantu pemisahan kekhawatiran
kyay

42

Gunakan buttonTintuntuk mengubah warna tombol dan pemilih warna untuk di atas 21+ versi 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
Bisakah Anda berbicara bahasa Inggris dan jelaskan jawaban Anda
GGO

Selalu gunakan bahasa Inggris di SO.
nyconing

Ini adalah jawaban yang lebih baik
Vivek A Naik

Ini tampaknya menjadi satu-satunya pendekatan sederhana untuk mengatur warna yang dicentang dan tidak dicentang yang berfungsi pada semua perangkat.
Gumby The Green

Ini harus menjadi jawaban yang diterima. Meskipun harus dicatat bahwa itu tidak berfungsi ketika pemilih dinyatakan sebagai valuessumber daya. Seperti yang ditunjukkan oleh jalur yang ditunjukkan di atas, harus ada di dalam colorsfolder sumber daya.
Benjamin Basmaci

18

Saya akan menyarankan untuk menggunakan pendekatan gaya di Android sebagai cara untuk mengkonfigurasi tampilan Android bawaan, tambahkan gaya baru di proyek Anda:

<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>

dan tambahkan tetapkan gaya ini ke tema kotak centang: android: theme = "@ style / youStyle"

semoga ini membantu.


Setuju dengan solusi ini, atribut-atribut tersebut harus bekerja lebih baik dengan komponen bawaan bawaan Android tanpa repot pada drawable seperti jawaban yang dipilih.
Trung Le

1
Ini adalah pengulangan jawaban Amro elaswar dari 9 bulan sebelumnya.
jk7

Ini adalah jenis solusi yang merupakan SOLUSI NYATA.
Iharob Al Asimi

16

Tambahkan buttonTint di xml Anda

<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
Isi dari jawaban ini sudah ada dalam jawaban afathman .
MTCoster

10

Tambahkan baris ini di styles.xmlfile Anda :

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

Harap edit jawaban Anda dengan contoh Anda dan jangan mempostingnya sebagai komentar
bish

4
Koreksi sedikit: Ini <item name = " android : colorAccent> </item>. Juga, ini hanya tersedia dari API 21 dan lebih tinggi.
user3829751

ini mengubah colorAccent, bukan itu yang diminta
Alberto M

1
Pada Galaxy S3 itu hanya mengubah keadaan diperiksa kotak centang. Tetapi keadaan yang tidak diperiksa masih sama.
Slava

9

buttonTint berhasil untuk saya coba

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

Saya menghadapi masalah yang sama, saya mendapat solusi menggunakan teknik di bawah ini. Salin btn_check.xmldari android-sdk/platforms/android-#(version)/data/res/drawableke folder yang dapat ditarik proyek Anda dan ubah status gambar 'on' dan 'off' menjadi gambar khusus Anda.
Maka xml Anda hanya perluandroid:button="@drawable/btn_check"

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

Jika Anda ingin menggunakan berbagai ikon Android default, Anda dapat menggunakan:

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

Jawaban yang bagus - jauh lebih mudah daripada membuat xml kustom .. terima kasih! Bagi saya, saya memiliki latar belakang abu-abu dan batas kotak centang tidak terlihat. Saya menambahkan ini dan Anda dapat melihatnya sekarang: android: button = "@ android: drawable / checkbox_off_background"
Gene Bo

1
Sebenarnya ada sedikit lebih banyak untuk menggunakan pendekatan ini daripada yang saya sadari .. tapi masih merupakan opsi yang bagus. Saya telah menambahkan detail di bawah stackoverflow.com/a/29831532/2162226
Gene Bo

5

Anda dapat mengubah checkboxwarna menggunakan garis kode menghanguskan

android:buttonTint="@color/app_color" //whatever color


4

Pendekatan 100% kuat.

Dalam kasus saya, saya tidak memiliki akses ke file sumber tata letak XML, karena saya mendapatkan kotak centang dari lib MaterialDialog pihak ke-3. Jadi saya harus menyelesaikan ini secara terprogram.

  1. Buat ColorStateList dalam xml:

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. Kemudian menerapkannya ke kotak centang:

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

PS Selain itu jika seseorang tertarik, berikut adalah bagaimana Anda bisa mendapatkan kotak centang dari dialog MaterialDialog (jika Anda mengaturnya dengan .checkBoxPromptRes(...)):

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

Semoga ini membantu.


3

buat xml di Drawable resource filebawah res->drawabledan beri nama, misalnya,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>

Unggah file gambar kotak centang khusus Anda (saya sarankan png) ke res->drawablefolder Anda .

Lalu buka file tata letak Anda dan ubah kotak centang Anda ke

<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"/>

Anda dapat menyesuaikan apa pun, selama android:buttonmenunjuk ke file XML yang benar yang Anda buat sebelumnya.

CATATAN UNTUK NEWBIES: meskipun tidak wajib, tetap merupakan praktik yang baik untuk memberi nama kotak centang Anda dengan id unik di seluruh pohon tata letak Anda.


3

Hai Ini adalah kode tema untuk Dark Theme dan Light Theme.

<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>

Jika Anda ingin mengubah warna kotak centang maka atribut "colorAccent" akan digunakan untuk status yang dicentang dan "android: textColorSecondary" akan digunakan untuk menghapus centang status.

"actionOverflowButtonStyle" akan digunakan untuk mengubah warna ikon overflow di bilah Tindakan.

Atribut "buttonsearch_picture" akan digunakan untuk mengubah warna warna Tombol Tindakan di Bilah Tindakan. Ini adalah atribut khusus di style.xml

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

Sama untuk tombol refresh yang saya gunakan di aplikasi saya.

Atribut "android: popupMenuStyle" digunakan untuk mendapatkan gaya menu popup tema Cahaya dalam tema Gelap.

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

Dan ini adalah Kode bilah alat yang saya gunakan di Aplikasi Rocks Player saya.

 <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>

Tema: -

 <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

Anda dapat membuat xml Anda sendiri di drawable dan menggunakan ini sebagai android: background = "@ drawable / your_xml"

bahwa Anda dapat memberikan segalanya sudut perbatasan

<item>
    <shape>
        <gradient

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

    </shape>
</item>


1
Meskipun tidak perlu tahu tentang grafik vektor yang dapat digambar, jawaban ini tidak menjawab pertanyaan OP tentang warna tombol.
Mike Poole

2

Anda dapat menggunakan dua properti berikut di "colors.xml"

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

colorControlNormal adalah untuk tampilan kotak centang normal, dan colorControlActivated adalah untuk ketika kotak centang dicentang.


1

Anda dapat mengubah warna latar belakang <CheckBox>dengan menyematkannya di dalam a <LinearLayout>. Kemudian ubah warna latar belakang <LinearLayout>menjadi warna yang Anda inginkan.


Pertanyaannya adalah tentang warna kotak centang dan bukan latar belakang
Zvi

1

Anda harus mencoba kode di bawah ini. Ini bekerja untuk saya.

<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>

dan Kotak centang

<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

Jika Anda akan menggunakan ikon android, seperti dijelaskan di atas ..

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

.. itu adalah opsi yang bagus, tetapi agar ini berfungsi - saya menemukan Anda perlu menambahkan toggle logic untuk menampilkan / menyembunyikan tanda centang, seperti ini:

    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);

        }
    });

Ya, ini pekerjaan ekstra yang sebenarnya tidak perlu. Dalam file xml drawable, Anda memberikan referensi ke atau menonaktifkan sumber daya yang dapat ditarik untuk pemilih. Ini secara otomatis menempatkan gambar yang benar sesuai dengan kondisi kotak centang.
jkincali

0

Sebagian besar jawaban melalui file xml. Jika Anda menemukan jawaban aktif untuk sebagian besar versi Android dan hanya satu warna untuk dua status Periksa sebuah Hapus centang: di sini adalah solusi saya:

Kotlin:

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

Jawa:

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

-1

Ada cara yang lebih mudah untuk mengatur warna secara terprogram. Gunakan metode di bawah ini, Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))


-2

Anda dapat menggunakan baris kode di bawah ini untuk mengubah latar belakang Kotak Centang secara dinamis dalam kode java Anda.

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

Jawaban ini dari situs ini . Anda juga dapat menggunakan situs ini untuk mengubah warna RGB Anda ke nilai Hex, Anda perlu memberi makan parseColor

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.