Como alterar a cor de uma caixa de seleção?

247

Como altero a CheckBoxcor padrão no Android?
Por padrão, a CheckBoxcor é verde e desejo alterar essa cor.
Se não for possível, diga-me como fazer um costume CheckBox?

Piyush
fonte
1
Você está tentando mudar a cor da fonte? Ou a cor da caixa real?
1
cor da caixa real que eu mudo #
Piyush
72
Definir o android:buttonTint="@color/mybrown"é uma maneira fácil de alterar a cor da caixa.
shauvik
6
@Shauvik-lo apenas trabalhando no design de material :)
Mücahit
9
@shauvik é melhor usar app:buttonTint="@color/mybrown"em vez disso, desta forma ele pode trabalhar em API <21
Nikaoto

Respostas:

187

Se você minSdkVersiontem mais de 21 anos, use o android:buttonTintatributo para atualizar a cor de uma caixa de seleção:

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

Em projetos que usam a biblioteca AppCompat e suportam versões do Android abaixo de 21, você pode usar uma versão compatível do buttonTintatributo:

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

Nesse caso, se você deseja subclassificar a CheckBox, não se esqueça de usar AppCompatCheckBox.

RESPOSTA ANTERIOR:

Você pode alterar CheckBoxs desenháveis ​​usando o android:button="@drawable/your_check_drawable"atributo

Michael
fonte
7
Você teria que criar seu próprio drawable. Tem que haver uma maneira mais simples e direta ...
IgorGanapolsky
14
Alterar a cor do botãoA cor é uma maneira mais direta. Temos que usar os elementos nativos em vez de personalizá-lo desnecessariamente.
Neela
3
Nota: Para o projeto styling material, há as contentControlopções agora: materialdoc.com/components/selection-controls
SimpsOff
392

Você pode alterar a cor diretamente no XML. Use buttonTintpara a caixa: (a partir do nível 23 da API)

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

Você também pode fazer isso usando appCompatCheckbox v7os níveis de API mais antigos:

<android.support.v7.widget.AppCompatCheckBox 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:buttonTint="@color/COLOR_HERE" /> 
afathman
fonte
5
AppCompatCheckBox ... Obrigado. Eu não sabia disso.
moskis
8
Nice, obrigado! E não se esqueça de adicionar xmlns: app = " schemas.android.com/apk/res-auto " ao seu layout principal / principal
Alberto Méndez
2
Não estou trabalhando para mim usando 'android.support.v7.widget.AppCompatCheckBox'
Zvi
1
Isso será usado automaticamente quando você usar o CheckBox em seus layouts. Você só precisa usar manualmente essa classe ao escrever modos de exibição personalizados.
최봉재
2
Que tal definir 2 cores diferentes para estados verificados e não verificados?
DYS 29/11
129

você pode definir o tema android da caixa de seleção para obter a cor desejada em seu styles.xml, adicione:

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

então no seu arquivo de layout:

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

ao contrário do uso android:buttonTint="@color/CHECK_COLOR"desse método, funciona na API 23

Amro elaswar
fonte
5
TEXTCOLORSECONDARY !!!! Obrigado cara! É isso aí. Procurei por idades para alterar apenas a cor de fundo não selecionada e não queria trabalhar com desenháveis ​​personalizados. É isso!
Mulgard 27/05
@Mulgard feliz por poder ajudar!
Amro elaswar
2
Trabalhou para mim, mas necessário para adicionar à xml CheckBox para ser capaz de ver o texto - android: textColor = "@ cor / textColor"
Zvi
Como faço isso também programaticamente?
Zvi 16/07
@Zvi Não estou certo que você pode fazer isso programaticamente
Amro elaswar
48

Versão programática:

int states[][] = {{android.R.attr.state_checked}, {}};
int colors[] = {color_for_state_checked, color_for_state_normal}
CompoundButtonCompat.setButtonTintList(checkbox, new ColorStateList(states, colors));
mbonnin
fonte
1
Graças à você. Você arrasa, a melhor solução.
Carlos
isso me deu um resultado inesperado com cores, você tem certeza de que não confundiu nada?
Kirill Karmazin
@Carlos Esta não é uma "melhor" solução, porque no android você deve sempre tentar definir todo o material de layout no arquivo xml e não por meio de programação, exceto quando você precisa mudar dinamicamente
kyay
@kyay Nem sempre "... o sistema de recursos do Android está uma bagunça e, muitas vezes, fazer isso de forma programática é muito mais fácil e sustentável.
Nyholku
É uma espécie de ajuda separação de interesses
kyay
42

Use buttonTintpara alterar a cor do botão e do seletor de cores para a versão acima de 21+ 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>
D. Sergeev
fonte
3
Você pode falar Inglês e explicar a sua resposta plse
GGO
Sempre fique com o inglês em SO.
Nyconing
É uma resposta melhor
Vivek A Naik 23/11
Essa parece ser a única abordagem simples para definir as cores marcadas e desmarcadas que funcionam em todos os dispositivos.
Gumby The Green
Essa deve ser a resposta aceita. Embora se deva notar que ele não funciona quando o seletor é declarado como um valuesrecurso. Conforme indicado pelo caminho mostrado acima, ele deve estar dentro da colorspasta de recursos.
Benjamin Basmaci
18

Eu sugeriria que ele usasse a abordagem de estilo no android como a maneira de configurar as visualizações internas do android, adicione um novo estilo ao seu projeto:

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

e adicione atribuir esse estilo ao tema da caixa de seleção: android: theme = "@ style / youStyle"

espero que isto ajude.

Bahadin Khalilieh
fonte
De acordo com esta solução, esses atributos devem funcionar melhor com o componente android interno padrão sem problemas no drawable, como a resposta votada.
precisa
1
Esta é uma repetição da resposta de Amro elaswar de 9 meses antes.
Jk7
Este é o tipo de solução que é UMA SOLUÇÃO REAL.
Iharob Al Asimi
16

Adicionar buttonTint no seu xml

<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" />
Shweta Chauhan
fonte
2
O conteúdo desta resposta já existe na resposta de afathman .
MTCoster
10

Adicione esta linha ao seu styles.xmlarquivo:

<style>
    <item name="android:colorAccent">@android:color/holo_green_dark</item>
</style>
Yogesh Rathi
fonte
Por favor, edite sua resposta com o seu exemplo e não a publique como comentário #
224
4
Correção leve: é <item name = " android : colorAccent> </item>. Além disso, isso só está disponível a partir da API 21.
#
isso muda o colorAccent, não é o que foi solicitado #
Alberto M
1
No Galaxy S3, ele altera apenas o estado verificado de uma CheckBox. Mas o estado não verificado ainda é o mesmo.
Slava 15/05
9

buttonTint trabalhou para mim tentar

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"/>
Sai Gopi N
fonte
8

Me enfrentou o mesmo problema, consegui uma solução usando abaixo technic. Copie o btn_check.xmlde android-sdk/platforms/android-#(version)/data/res/drawablepara a pasta de desenho do seu projeto e altere os estados da imagem 'on' e 'off' para as imagens personalizadas.
Então seu xml precisará apenasandroid:button="@drawable/btn_check"

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

Se você quiser usar diferentes ícones padrão do Android, poderá usar:

android:button="@android:drawable/..."
sravan
fonte
Ótima resposta - muito mais fácil do que criar xml personalizado. Obrigado! Para mim, tenho um plano de fundo cinza e a borda da caixa de seleção não estava visível. Eu adicionei isso e você pode vê-lo agora: android: button = "@ android: drawable / checkbox_off_background"
Gene Bo
1
Na verdade, há um pouco mais de uso dessa abordagem do que eu imaginava ... mas ainda é uma boa opção. Eu adicionei detalhes abaixo stackoverflow.com/a/29831532/2162226
Gene Bo
5

Você pode alterar a checkboxcor usando uma linha de código simples

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

Kishore Reddy
fonte
4

Abordagem 100% robusta.

No meu caso, não tive acesso ao arquivo de origem do layout XML, pois recebo o Checkbox de uma lib MaterialDialog de terceiros. Então eu tenho que resolver isso programaticamente.

  1. Crie um ColorStateList em 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. Em seguida, aplique-o na caixa de seleção:

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

PS Além disso, se alguém estiver interessado, veja como você pode obter sua caixa de seleção na caixa de diálogo MaterialDialog (se você a definir .checkBoxPromptRes(...)):

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

Espero que isto ajude.

Kirill Karmazin
fonte
3

crie um xml Drawable resource fileabaixo res->drawablee nomeie-o, por exemplo,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>

Carregue seus arquivos de imagem personalizados da caixa de seleção (eu recomendo png) para o seu res->drawable pasta.

Em seguida, vá no seu arquivo de layout e altere sua caixa de seleção para

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

você pode personalizar qualquer coisa, desde que android:buttonaponte para o arquivo XML correto criado anteriormente.

OBSERVAÇÃO PARA NEWBIES: embora não seja obrigatório, é uma boa prática nomear sua caixa de seleção com um ID exclusivo em toda a árvore de layout.

Tony Gil
fonte
3

Olá, este é o código do tema para o Tema escuro e o Tema claro.

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

Se você deseja alterar a cor da caixa de seleção, o atributo "colorAccent" será usado para o estado verificado e "android: textColorSecondary" será usado para desmarcar o estado.

"actionOverflowButtonStyle" será usado para alterar a cor do ícone de estouro na barra de ação.

O atributo "buttonsearch_picture" será usado para alterar a cor da tonalidade do Botão de Ação na Barra de Ação. Esse é o Atributo personalizado no style.xml

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

O mesmo é para o botão de atualização que eu estou usando no meu aplicativo.

O atributo "android: popupMenuStyle" está usando para obter o estilo do menu pop-up do tema Light no tema Escuro.

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

E esse é o código da barra de ferramentas que estou usando no meu aplicativo 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>

Temas:-

 <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>
Ashish Saini
fonte
2

você pode criar seu próprio xml no drawable e usá-lo como android: background = "@ drawable / your_xml"

em que você pode dar tudo no canto da borda

<item>
    <shape>
        <gradient

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

    </shape>
</item>

abhiruchi vijay
fonte
1
Embora seja interessante saber sobre gráficos vetoriais desenháveis, essa resposta não responde à pergunta do OP sobre a tonalidade do botão.
Mike Poole
2

Você pode usar as duas propriedades a seguir em "colors.xml"

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

colorControlNormal é para a exibição normal da caixa de seleção e colorControlActivated é para quando a caixa de seleção está marcada.

Tajveer Singh Nijjar
fonte
1

Você pode alterar a cor do plano de fundo <CheckBox>incorporando-a dentro de a <LinearLayout>. Em seguida, altere a cor de fundo <LinearLayout>para a cor desejada.

mellowg
fonte
A questão é sobre a cor da caixa de seleção e não o plano de fundo.
Zvi 16/07
1

Você deve tentar o código abaixo. Está funcionando para mim.

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

e 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" />
Imtiyaz Khalani
fonte
1

Se você estiver usando os ícones do Android, conforme descrito acima ..

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

.. é uma boa opção, mas, para que isso funcione - achei que você precisava adicionar lógica de alternância para mostrar / ocultar a marca de seleção, assim:

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

        }
    });
Gene Bo
fonte
Bem, este é um trabalho extra que realmente não é necessário. No arquivo xml do drawable, você fornece referências para ativar ou desativar os recursos drawable para o seletor. Isso coloca automaticamente o drawable correto de acordo com o estado da caixa de seleção.
Jkincali
0

A maioria das respostas passa pelo arquivo xml. Se você encontrar uma resposta ativa para a maioria das versões do Android e tiver apenas uma cor para os dois status Marque a opção Desmarcar: eis a minha solução:

Kotlin:

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);
}
Chanh
fonte
-1

Há uma maneira muito mais fácil de definir cores programaticamente. Use o método abaixo, Checkbox.setButtonTintList (ColorStateList.valueOf (getContext (). GetColor (R.color.yourcolor)))

Swaroop
fonte
-2

Você pode usar as linhas de código abaixo para alterar o plano de fundo da caixa de seleção dinamicamente no seu código java.

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

Esta resposta foi deste site . Você também pode usar este site para converter sua cor RGB no valor hexadecimal, é necessário alimentar o parseColor

Arsene Foka
fonte