Alterar a cor do círculo do botão de opção


158

Quero mudar a cor do círculo do RadioButton em um dos meus projetos , não consegui entender qual propriedade definir. A cor de fundo que estou usando é preta, então fica invisível. Quero definir a cor do círculo para branco.



Use duas imagens para o botão de opção, uma é selecionada e a outra não. Clique no botão Radiobutton usando o recurso setbackground ou o seletor xml.
SAURABH_12 15/06

Respostas:


288

Mais simples, basta definir o botão Cor da tinta: (só funciona no nível 21 da API ou acima)

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="true"
    android:buttonTint="@color/your_color"/>

em seus values ​​/ colors.xml, coloque sua cor nesse caso avermelhada:

<color name="your_color">#e75748</color>

Resultado:

Botão de opção Android colorido

Se você quiser fazer isso por código (também api 21 e acima):

if(Build.VERSION.SDK_INT>=21)
{

    ColorStateList colorStateList = new ColorStateList(
            new int[][]{

                    new int[]{-android.R.attr.state_enabled}, //disabled
                    new int[]{android.R.attr.state_enabled} //enabled
            },
            new int[] {

                    Color.BLACK //disabled
                    ,Color.BLUE //enabled

            }
        );                       


    radio.setButtonTintList(colorStateList);//set the color tint list
    radio.invalidate(); //could not be necessary
}

1
@emaillenin, se você quiser alterar a tonalidade de cor, código que você deve usar control.getDrawable().setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);, onde controlé o controle que você deseja alterar a tonalidade e coloré um valor inteiro da cor que você quer, por exemploR.color.red
Jorge Arimany

1
@JorgeArimany Para um RadioButton, é getButtonDrawable ou getCompoundDrawables? getCompoundDrawables retorna uma Lista
Lenin Raj Rajasekaran

@emaillenin, obrigado, minha resposta ao seu comentário foi para outros controles, como um botão, eu atualizei a minha resposta, adicionando o código que você está procurando, espero que ajude você
Jorge Arimany

3
@JorgeArimany Eu já trabalhei com> 21 anos. Estou procurando respostas especificamente para <21
Lenin Raj Rajasekaran

Para alterar a cor de um botão marcado, você pode adicionar ou substituir um estado android.R.attr.state_checkede adicionar a cor.
6rchid 10/02

159

Atualização: 1. use este aqui

   <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />

2. Em seguida, adicione esta linha no layout pai ou Alt + Enterno Android Studio para adicionar automaticamente xmlns:app="http://schemas.android.com/apk/res-auto"

O Exemplo Mínimo deve ficar assim:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatRadioButton
        android:id="@+id/rbtn_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:buttonTint="@color/primary" />

</LinearLayout>

3. No seu programa, você deve chamar assim. AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

Basicamente, esse tipo de padrão pode ser aplicado a todos os tipos de AppCompact, como AppCompatCheckBox, AppCompatButton e assim por diante.

Resposta antiga:

Para oferecer suporte abaixo da API do Android 21, você pode usar AppCompatRadioButton. Em seguida, use o setSupportButtonTintListmétodo para alterar a cor. Este é o meu trecho de código para criar um botão de opção.

    AppCompatRadioButton rb;
    rb = new AppCompatRadioButton(mContext);

    ColorStateList colorStateList = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{

                    Color.DKGRAY
                    , Color.rgb (242,81,112),
            }
    );
    rb.setSupportButtonTintList(colorStateList);

Resultado testado na API 19:

Este é testado na API 19

Veja o link de referência do Android para mais detalhes.


10
Esta resposta deve ser a aceita. Se você deseja adicionar este botão de opção de suporte através do xml, use #<android.support.v7.widget.AppCompatRadioButton ../>
Vinayak Garg

22
setSupportButtonTintListé um método privado que você não pretende usar. Os botões de opção se comportam de maneira estranha em determinadas versões do Android. Em vez disso, use CompoundButtonCompat.setButtonTintList(rb, colorStateList).
Wampastompa 18/03/16

2
@wampastompa está certo. Na API 22, o resultado foi que vi apenas um círculo externo, nunca preenchido quando marcado. @aknay; atualize sua resposta
Nino van Hooff

1
Estou na API 16. Eu adiciono os botões do AppCompat Radio, conforme listado acima, mas ele ainda não está sendo exibido corretamente.
tccpg288

1
você não precisa de código, veja a resposta de IgorOliveira. Funciona para todas as versões.
Kirill Karmazin

77
<android.support.v7.widget.AppCompatRadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buttonTint="@color/Color" />

11
Esta é a resposta para dispositivos pré, atuais e pós pirulito !! Grande
sdelvalle57

1
Essa deve ser a resposta aceita. Curto e perfeito. NOTA: use app: buttonTint = "@ color / Color", mas não andoid: buttonTint = "@ color / Color"!
Kirill Karmazin

@KirillKarmazin aceito deve ser o que funciona para <21
user924

56

Trabalhando na API pré-21 e pós-21. Em seu artigo styles.xml:

<!-- custom style -->
<style name="radionbutton"
       parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
    <item name="android:button">@drawable/radiobutton_drawable</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">false</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

Seu radio buttonem xml deve se parecer com:

<RadioButton
    android:layout_width="wrap_content"
    style="@style/radionbutton"
    android:checked="false"
    android:layout_height="wrap_content"
    />

Agora tudo que você precisa fazer é fazer um radiobutton_drawable.xmlna sua drawable folder. Aqui está o que você precisa colocar nele:

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

O seu radio_unchecked.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <stroke android:width="1dp" android:color="@color/colorAccent"/>
  <size android:width="30dp" android:height="30dp"/>
</shape>

O seu radio_checked.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <stroke android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="30dp" android:height="30dp"/>
    </shape>
  </item>
  <item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
    <shape android:shape="oval">
      <solid android:width="1dp" android:color="@color/colorAccent"/>
      <size android:width="10dp" android:height="10dp"/>
    </shape>
  </item>
</layer-list>

Apenas substitua @color/colorAccentpela cor de sua escolha.


Como eu faria isso programaticamente?
Tcpg288

@ tccpg288 Se você usar este xml e se você quer mudar a cor de programação, basta usar radioButton.setChecked (false) ou radioButton.setChecked (true)
Vaibhav Sharma

Eu não entendo sua pergunta. Você pode por favor elaborar?
Vaibhav Sharma

Meu erro, importa se eu uso o RadioButton regular ou o AppCompat RadioButton?
tccpg288

1
Não está funcionando. E quando eu inicializo o RadioButton? Aqui está o meu código: mPollAnswerArrayList.add ((indexCreated), new RadioButton ((getActivity (). GetApplicationContext ()), null, R.style.radiobutton));
tccpg288

18

Você precisa usar este código:

<android.support.v7.widget.AppCompatRadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:buttonTint="@color/black"
                    android:text="Radiobutton1"
                    app:buttonTint="@color/black" />

Usando em app:buttonTintvez de android:buttonTinte também em android.support.v7.widget.AppCompatRadioButtonvez de Radiobutton!


16
  1. Declare o estilo customizado em seu arquivo styles.xml.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">  
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>  
  2. Aplique esse estilo ao seu RadioButton via atributo android: theme.

    <RadioButton  
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Radio Button"
        android:theme="@style/MyRadioButton"/>

    somente se sua atividade se estender AppCompatActivity


1
Isso deve ser aceito como resposta, funciona em todas as versões e é mais limpo
Antonis Radz

Eu tive que usar <item name="android:colorControlActivated">@color/pink</item>para que funcionasse para mim. Ainda não sei por que. Caso contrário, esta é uma boa resposta.
Taylor Venissat 18/02

16

Para sob API 21

Crie um estilo personalizado RadioButton style.xml

 <style name="RadioButton" parent="Theme.AppCompat.Light">
     <item name="colorAccent">@color/green</item>
     <item name="android:textColorSecondary">@color/mediumGray</item>
     <item name="colorControlNormal">@color/red</item>
 </style>

No layout, use o tema:

<RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:theme="@style/RadioButton" />

Para API 21 e mais

Basta usar buttonTint

 <RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:buttonTint="@color/green" />

Deve ser clarificado: buttonTint trabalha para API 21 e aplicativos que usam AppCompat / AndroidX, não importa API
Chisko

12

A pergunta é antiga, mas acho que minha resposta ajudará as pessoas. Você pode alterar a cor do estado desmarcado e marcado do botão de opção usando o estilo em xml.

<RadioButton
    android:id="@+id/rb"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/RadioButtonStyle" />

Em style.xml

<style name="RadioButtonStyle" parent="Theme.AppCompat.Light">
        <item name="colorAccent">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
</style>

Você pode definir as cores desejadas neste estilo.


O tema dentro do RadioButton não funciona (mais?). Ele trava ao clicar no botão, porque o método onClick não foi encontrado, embora esteja aqui.
Bevor

esse problema terá outro motivo. Verifique se você está obtendo o ID da visualização correta antes de implementar o onClick nessa visualização.
Jaura 29/03

9

Defina a buttonTintpropriedade Por exemplo android:buttonTint="#99FF33",.


9
Isso ocorre somente após a API 21
miracle-doh

7

Eu fiz isso da maneira mais curta assim (trabalhando na API pré-21 e pós-21)

Seu botão de opção em xml deve ficar assim

  <RadioButton android:id="@+id/radioid"                    
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"                 
                android:button="@drawable/radiodraw" />

em radiodraw.xml

  <?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">    
      <item android:state_checked="false" >
          <shape  android:shape="oval" >
              <stroke android:width="1dp" android:color="#000"/>
              <size android:width="30dp" android:height="30dp"/>
              <solid android:color="@android:color/transparent"/>
          </shape>
      </item>
      <item android:state_checked="true">
          <layer-list>
              <item>
                  <shape android:shape="oval">
                      <stroke android:width="1dp" android:color="#000"/>
                      <size android:width="30dp" android:height="30dp"/>
                      <solid android:color="@android:color/transparent"/>
                  </shape>
              </item>
              <item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
                  <shape android:shape="oval">
                      <solid android:width="1dp" android:color="#000"/>
                      <size android:width="10dp" android:height="10dp"/>
                  </shape>
              </item>
          </layer-list>
      </item>
  </selector>

precisa adicionar cores transparentes para desenhar o status desmarcado; caso contrário, ele desenha um oval preto sólido.


6

Às vezes, você só precisa substituir o colorControlNormal assim:

    <style name="RadioButtonStyle" parent="AppTheme">
       <item name="colorControlNormal">@color/pink</item>
       <item name="colorAccent">@color/colorPrimary</item>
       <item name="android:textColorSecondary">@color/black</item>
    </style>

E você receberá um botão como este:

insira a descrição da imagem aqui

colorControlNormal usado para o estado não verificado e colorAccent para marcado.


5

Existe um atributo xml para ele:

android:buttonTint="yourcolor"

Verifique se o seu min API é maior que 21 ou isso não vai funcionar
Jcorretjer

você pode usar isso para compatibilidade com versões anteriores: app: buttonTint = "your_color"
Mridul Das

"Make sure your min API is higher then 21 or this won't work"isso é falso. Eu sou alvo API 17 com AndroidX e esta é a única coisa que funcionou para mim
Chisko

3

Para aqueles que desejam alterar os estados de desativado, marcado e ativado, você executa as seguintes etapas:

<!-- Or androidX radio button or material design radio button -->
<android.support.v7.widget.AppCompatRadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:buttonTint="@color/black"
                    android:text="Radiobutton1"
                    app:buttonTint="@color/radio_button_color" />

em seguida, na pasta res de cores, crie um arquivo chamado "radio_button_color.xml":

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

2
<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:buttonTint="@color/my_color"/>

O botão Todos muda de cor, a caixa circular e a verificação central.


1
Mas não a ondulação ;-)
Waza_Be

1

RadioButton, por padrão, assume a cor do colorAccent no arquivo res / values ​​/ colors.xml. Então vá para esse arquivo e altere o valor de

<color name="colorAccent">#3F51B5</color>

para a cor que você deseja.


0

A maneira mais fácil é mudar a colourAccentcor, values->colours.xml
mas esteja ciente de que isso também mudará outras coisas, como editar a cor do cursor do texto etc.

< color name="colorAccent">#75aeff</color >


0

Se você deseja definir cores diferentes para o botão de opção clicado e não clicado, use:

   android:buttonTint="@drawable/radiobutton"  in xml of the radiobutton and your radiobutton.xml will be:  
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#1E88E5"/>
<item android:state_checked="true" android:color="#00e676"/>
<item android:color="#ffffff"/>


0

basta usar o android:buttonTint="@color/colorPrimary"atributo na tag, espero que ajude


0

Eu tive esse problema. Se o seu aplicativo tiver um plano de fundo preto e você tiver muitos botões de opção invisíveis devido ao plano de fundo, é complicado editar o android: buttonTint de cada um, a melhor solução é alterar o tema principal em seu arquivo styles.xml

eu mudei

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

para

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

Assim, os círculos dos RadioButtons se tornaram um tom mais claro de cinza e agora são visíveis mesmo com um fundo preto.

Este é o meu arquivo style.xml:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>


-4

@ jh314 está correto. No AndroidManifest.xml,

 <application
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"></application>

Em style.xml

  <!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">@color/red</item>
    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>

o nome do item deve ser colorAccent, decide a cor padrão dos widgets do aplicativo.

Mas se você quiser alterar a cor no código, talvez a resposta de @ aknay esteja correta.


Isso não fornece uma resposta para a pergunta. Depois de ter reputação suficiente, você poderá comentar qualquer postagem ; em vez disso, forneça respostas que não exijam esclarecimentos do solicitante . - Do comentário
semirturgay 25/03

Minha resposta é alterar a cor básica do aplicativo e, claro, ele pode mudar a cor do botão de opção para branco.
Iturbo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.