Cambia il colore del cerchio del pulsante di opzione


158

Voglio cambiare il colore del cerchio di RadioButton in uno dei miei progetti , non sono riuscito a capire quale proprietà impostare. Il colore di sfondo che sto avendo è nero, quindi diventa invisibile. Voglio impostare il colore del cerchio su bianco.



Usa due immagini per il pulsante di opzione una è selezionata e un'altra no, cambia queste immagini sul pulsante di opzione facendo clic sulla risorsa setbackground o utilizzando il selettore xml.
SAURABH_12

Risposte:


288

Più semplice, basta impostare il colore pulsante: (funziona solo a livello 21 o superiore)

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

nei valori / colors.xml inserisci il colore in questo caso rossastro:

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

Risultato:

Pulsante di opzione Android colorato

Se vuoi farlo con il codice (anche api 21 e successivi):

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 vuoi cambiare la tinta del colore in base al codice, dovresti usare control.getDrawable().setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);dov'è controlil controllo che vuoi cambiare la tinta ed colorè un valore intero del colore che vuoi ad es.R.color.red
Jorge Arimany,

1
@JorgeArimany Per un RadioButton, è getButtonDrawable o getCompoundDrawables? getCompoundDrawables restituisce un elenco
Lenin Raj Rajasekaran,

@emaillenin, grazie, la mia risposta al tuo commento è stata per altri controlli come un pulsante, ho aggiornato la mia risposta aggiungendo il codice che stai cercando, spero che ti aiuti
Jorge Arimany,

3
@JorgeArimany Ho già funzionato per> 21 .. Sto cercando risposte specifiche per <21
Lenin Raj Rajasekaran,

Per cambiare il colore di un pulsante selezionato è possibile aggiungere o sostituire uno stato con android.R.attr.state_checkede aggiungere il colore.
6rchid

159

Aggiornamento: 1. utilizzare invece questo

   <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. Quindi aggiungere questa riga nel layout principale o Alt + Enterin Android Studio per aggiungere automaticamente xmlns:app="http://schemas.android.com/apk/res-auto"

L'esempio minimo dovrebbe essere simile al seguente:

<?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. Nel tuo programma, dovresti chiamare così. AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

Fondamentalmente, questo tipo di modello può essere applicato per tutti i tipi di AppCompact come AppCompatCheckBox, AppCompatButton e così via.

Vecchia risposta:

Per supportare sotto l'API 21 di Android, puoi usare AppCompatRadioButton. Quindi utilizzare il setSupportButtonTintListmetodo per cambiare il colore. Questo è il mio frammento di codice per creare un pulsante di opzione.

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

Risultato testato su API 19:

Questo è testato su API 19

Vedi il link di riferimento Android per maggiori dettagli.


10
Questa risposta dovrebbe essere quella accettata. Se vuoi aggiungere questo pulsante di opzione tramite xml, usa<android.support.v7.widget.AppCompatRadioButton ../>
Vinayak Garg il

22
setSupportButtonTintListè un metodo privato che non si intende utilizzare. I pulsanti di opzione si comporteranno in modo strano su alcune versioni di Android. Invece, usa CompoundButtonCompat.setButtonTintList(rb, colorStateList).
wampastompa,

2
@wampastompa ha ragione. Su API 22, il risultato è stato che ho visto solo un cerchio esterno, mai riempito quando controllato. @aknay; aggiorna la tua risposta
Nino van Hooff

1
Sono su API 16. Aggiungo i pulsanti di opzione AppCompat come elencato sopra, tuttavia non viene ancora visualizzato correttamente.
tccpg288,

1
non hai bisogno di alcun codice, vedi la risposta di IgorOliveira. Funziona per tutte le versioni.
Kirill Karmazin,

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

11
Questa è la risposta per i dispositivi pre, attuali e post lollypop !! Grande
sdelvalle57,

1
Questa dovrebbe essere la risposta accettata. Corto e perfetto NOTA: usa l'app: buttonTint = "@ color / Color" ma non andoid: buttonTint = "@ color / Color"!
Kirill Karmazin,

@KirillKarmazin accettato dovrebbe essere che funziona per <21
user924

56

Lavorare su API pre 21 e post 21. Nel tuo styles.xmlput:

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

Il tuo radio buttonin xml dovrebbe apparire come:

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

Ora tutto ciò che devi fare è fare un radiobutton_drawable.xmlnel tuo drawable folder. Ecco cosa devi inserire:

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

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

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

Sostituisci semplicemente @color/colorAccentcon il colore che preferisci.


Come lo farei a livello di codice?
tccpg288,

@ tccpg288 Se usi questo xml e se vuoi cambiare il colore a livello di codice, usa semplicemente radioButton.setChecked (false) o radioButton.setChecked (true)
Vaibhav Sharma,

Non capisco la tua domanda. Puoi per favore elaborare?
Vaibhav Sharma,

Errore mio, importa se uso il normale RadioButton o l'AppCompat RadioButton?
tccpg288,

1
Non funziona, che dire quando inizializzo il RadioButton? Ecco il mio codice: mPollAnswerArrayList.add ((indexCreated), nuovo RadioButton ((getActivity (). GetApplicationContext ()), null, R.style.radiobutton));
tccpg288,

18

Devi usare questo codice:

<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 al app:buttonTintposto di android:buttonTinte anche al android.support.v7.widget.AppCompatRadioButtonposto di Radiobutton!


16
  1. Dichiarare lo stile personalizzato nel file styles.xml.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">  
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>  
    
  2. Applica questo stile al tuo RadioButton tramite android: attributo tema.

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

    solo se la tua attività si estende AppCompatActivity


1
Questo dovrebbe essere accettato come una risposta, funziona su tutte le versioni ed è il più pulito
Antonis Radz,

Ho dovuto usarlo <item name="android:colorControlActivated">@color/pink</item>per funzionare per me. Non sono ancora sicuro del perché. Altrimenti, questa è una buona risposta.
Taylor Venissat

16

Per sotto API 21

Crea uno stile personalizzato 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>

Nel layout utilizzare il tema:

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

Per API 21 e altro

Basta usare buttonTint

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

Dovrebbe essere chiarito: buttonTint funziona per API 21 e app che utilizzano AppCompat / AndroidX, indipendentemente dall'API
Chisko,

12

La domanda è vecchia ma penso che la mia risposta aiuterà le persone. Puoi cambiare il colore dello stato deselezionato e controllato del pulsante di opzione usando lo stile in xml.

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

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

Puoi impostare i colori desiderati in questo stile.


Il tema all'interno di RadioButton non funziona (più?). Si arresta in modo anomalo quando si fa clic sul pulsante, perché il metodo onClick non viene trovato, sebbene sia qui.
Bevor

questo problema avrà qualche altro motivo. Assicurati di ottenere l'ID della vista corretto prima di implementare onClick su quella vista.
Jaura


7

L'ho fatto in questo modo (lavorando su API pre 21 e post 21)

Il tuo pulsante di opzione in XML dovrebbe apparire così

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

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

devi aggiungere il colore trasparente per disegnare lo stato non selezionato, altrimenti disegna un ovale nero solido.


6

A volte è sufficiente sostituire colorControlNormal in questo modo:

    <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 otterrai un pulsante come questo:

inserisci qui la descrizione dell'immagine

colorControlNormal utilizzato per lo stato non controllato e colorAccent per selezionato.


5

C'è un attributo xml per questo:

android:buttonTint="yourcolor"

Assicurati che l'API min sia superiore a 21 o che non funzionerà
Jcorretjer,

puoi usarlo per compatibilità con le versioni precedenti: app: buttonTint = "tuo_colore"
Mridul Das

"Make sure your min API is higher then 21 or this won't work"questo è falso. Sto prendendo di mira l'API 17 con AndroidX e questa è l'unica cosa che ha funzionato per me
Chisko,

3

Per coloro che desiderano modificare gli stati di disabilitazione, controllo e abilitazione, è necessario eseguire le seguenti operazioni:

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

quindi nella cartella res di colore crea un file chiamato "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"/>

Tutti i pulsanti cambieranno colore, la casella circolare e il segno di spunta centrale.


1
Ma non l'ondulazione ;-)
Waza_Be

1

RadioButton per impostazione predefinita accetta il colore di colorAccent nel file res / valori / colors.xml. Quindi vai a quel file e cambia il valore di

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

al colore che desideri.


0

Il modo più semplice è cambiare il colourAccentcolore, values->colours.xml
ma tieni presente che cambierà anche altre cose come modificare il colore del cursore di testo ecc.

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


0

Se vuoi impostare un colore diverso per il pulsante di opzione cliccato e non cliccato, usa:

   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

usa solo l' android:buttonTint="@color/colorPrimary"attributo sul tag, spero che ti sia d'aiuto


0

Ho avuto questo problema Se la tua app ha uno sfondo nero e hai molti RadioButton che sono invisibili a causa dello sfondo, è complicato modificare Android: buttonTint di ognuno, la soluzione migliore è cambiare il tema principale nel tuo file styles.xml

Ho cambiato

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

per

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

Quindi i cerchi dei RadioButton sono diventati una tonalità più chiara di grigio e ora sono visibili anche con uno sfondo nero.

Questo è il mio file 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 è corretto. In AndroidManifest.xml,

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

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

il nome dell'articolo deve essere colorAccent, decide il colore predefinito dei widget dell'applicazione.

Ma se vuoi cambiare il colore nel codice, forse la risposta di @ aknay è corretta.


Questo non fornisce una risposta alla domanda. Una volta che hai una reputazione sufficiente , sarai in grado di commentare qualsiasi post ; fornire invece risposte che non richiedono chiarimenti da parte del richiedente . - Dalla recensione
Semirturgay,

La mia risposta è cambiare il colore di base dell'app e ovviamente può cambiare il colore del pulsante di opzione in bianco.
Iturbo
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.