Zmień kolor okręgu przycisku opcji

158

Chcę zmienić kolor koła RadioButton w jednym z moich projektów , nie mogłem zrozumieć, którą właściwość ustawić. Kolor tła, który mam, jest czarny, więc staje się niewidoczny. Chcę ustawić kolor koła na biały.

Amandeep Singh
źródło
skieruj ten link: heliodorj.blogspot.in/2009/04/…
Android Developer
Użyj dwóch obrazów dla przycisku radiowego, jeden jest zaznaczony, a drugi nie, zmień te obrazy po kliknięciu przycisku Radiobutton, używając zasobu setbackground lub używając selektora xml.
SAURABH_12

Odpowiedzi:

288

Prostsze, wystarczy ustawić kolor przycisku Odcień: (działa tylko na poziomie API 21 lub wyższym)

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

w pliku values ​​/ colors.xml umieść swój kolor w tym przypadku jako czerwonawy:

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

Wynik:

Kolorowy przycisk radiowy Androida

Jeśli chcesz to zrobić za pomocą kodu (także API 21 i nowsze):

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
}
Jorge Arimany
źródło
1
@emaillenin, jeśli chcesz zmienić odcień koloru za pomocą kodu, powinieneś użyć control.getDrawable().setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);gdzie controljest kontrolka, którą chcesz zmienić odcień i colorjest wartością całkowitą wybranego koloru, np.R.color.red
Jorge Arimany
1
@JorgeArimany Dla RadioButton, czy jest to getButtonDrawable czy getCompoundDrawables? getCompoundDrawables zwraca Listę
Lenin Raj Rajasekaran
@emaillenin, dziękuję, moja odpowiedź na twój komentarz dotyczyła innych elementów sterujących, takich jak przycisk, zaktualizowałem moją odpowiedź, dodając kod, którego szukasz, mam nadzieję, że ci pomoże
Jorge Arimany
3
@JorgeArimany Mam to działa dla> 21 już .. Szukam odpowiedzi specjalnie dla <21
Lenin Raj Rajasekaran
Aby zmienić kolor zaznaczonego przycisku, możesz dodać lub zamienić stan na android.R.attr.state_checkedi dodać kolor.
6rchid
159

Aktualizacja: 1. zamiast tego użyj tego

   <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. Następnie dodaj tę linię do układu nadrzędnego lub Alt + Enterw Android Studio, aby dodać automatycznie xmlns:app="http://schemas.android.com/apk/res-auto"

Minimalny przykład powinien wyglądać następująco:

<?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. W swoim programie powinien wywołać tak. AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

Zasadniczo ten rodzaj wzorca można zastosować do wszystkich typów AppCompact, takich jak AppCompatCheckBox, AppCompatButton i tak dalej.

Stara odpowiedź:

Aby obsługiwać poniżej Android API 21, możesz użyć AppCompatRadioButton. Następnie użyj setSupportButtonTintListmetody, aby zmienić kolor. To jest mój fragment kodu służący do tworzenia przycisku opcji.

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

Wynik testowany w API 19:

Ten jest testowany na API 19

Więcej szczegółów można znaleźć w odnośniku do systemu Android .

aknay
źródło
10
Ta odpowiedź powinna być akceptowana. Jeśli chcesz dodać ten przycisk opcji wsparcia przez xml, użyj<android.support.v7.widget.AppCompatRadioButton ../>
Vinayak Garg
22
setSupportButtonTintListto prywatna metoda, której nie zamierzasz używać. Przyciski opcji będą działać dziwnie w niektórych wersjach Androida. Zamiast tego użyj CompoundButtonCompat.setButtonTintList(rb, colorStateList).
wampastompa
2
@wampastompa ma rację. Wynik w API 22 był taki, że widziałem tylko zewnętrzne koło, które nigdy nie było wypełnione podczas sprawdzania. @aknay; zaktualizuj swoją odpowiedź
Nino van Hooff
1
Jestem na API 16. Dodaję przyciski radiowe AppCompat wymienione powyżej, jednak nadal nie wyświetlają się one poprawnie.
tccpg288
1
nie potrzebujesz żadnego kodu, zobacz odpowiedź IgorOliveira. Działa dla wszystkich wersji.
Kirill Karmazin
77
<android.support.v7.widget.AppCompatRadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:buttonTint="@color/Color" />
IgorOliveira
źródło
11
To jest odpowiedź dla urządzeń typu pre, current i post lollypop !! Świetnie
sdelvalle57
1
To powinna być akceptowana odpowiedź. Krótkie i doskonałe. UWAGA: użyj app: buttonTint = "@ color / Color", ale nie andoid: buttonTint = "@ color / Color"!
Kirill Karmazin
Zaakceptowano @KirillKarmazin, który działa dla <21
user924
56

Praca nad API pre 21, jak i post 21. W twoim styles.xmlmiejscu:

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

Twój radio buttonw xml powinien wyglądać następująco:

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

Teraz wszystko, co musisz zrobić, to radiobutton_drawable.xmlw twojej drawable folder. Oto, co musisz w nim umieścić:

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

Twój 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>

Twój 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>

Po prostu zastąp @color/colorAccentgo wybranym kolorem.

Vaibhav Sharma
źródło
Jak mam to zrobić programowo?
tccpg288
@ tccpg288 Jeśli używasz tego XML i chcesz programowo zmienić kolor, po prostu użyj radioButton.setChecked (false) lub radioButton.setChecked (true)
Vaibhav Sharma
Nie rozumiem twojego pytania. Czy możesz to rozwinąć?
Vaibhav Sharma
Mój błąd, czy ma znaczenie, czy używam zwykłego RadioButton, czy AppCompat RadioButton?
tccpg288
1
Nie działa, a co z inicjalizacją RadioButton? Oto mój kod: mPollAnswerArrayList.add ((indexCreated), new RadioButton ((getActivity (). GetApplicationContext ()), null, R.style.radiobutton));
tccpg288
18

Musisz użyć tego kodu:

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

Używanie app:buttonTintzamiast, android:buttonTinta także android.support.v7.widget.AppCompatRadioButtonzamiast Radiobutton!

srt
źródło
16
  1. Zadeklaruj własny styl w pliku styles.xml.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">  
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>  
    
  2. Zastosuj ten styl do swojego RadioButton za pośrednictwem atrybutu android: theme.

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

    tylko wtedy, gdy twoja działalność się rozszerza AppCompatActivity

batsheva
źródło
1
To należy przyjąć jako odpowiedź, działa na wszystkich wersjach i jest najczystsze
Antonis Radz
Musiałem użyć <item name="android:colorControlActivated">@color/pink</item>, żeby to zadziałało dla mnie. Nadal nie wiem dlaczego. W przeciwnym razie jest to dobra odpowiedź.
Taylor Venissat
16

Zgodnie z API 21

Utwórz niestandardowy styl 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>

W motywie użycia układu:

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

Dla API 21 i więcej

Wystarczy użyć buttonTint

 <RadioButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:buttonTint="@color/green" />
Rasoul Miri
źródło
Należy wyjaśnić: buttonTint działa dla API 21 i aplikacji korzystających z AppCompat / AndroidX, bez względu na API
Chisko
12

Pytanie jest stare, ale myślę, że moja odpowiedź pomoże ludziom. Możesz zmienić kolor niezaznaczonego i zaznaczonego stanu przycisku opcji, używając style w xml.

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

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

W tym stylu możesz ustawić żądane kolory.

Jaura
źródło
Motyw w RadioButton nie działa (już?). Awaria podczas klikania przycisku, ponieważ nie znaleziono metody onClick, chociaż jest tutaj.
Bevor
ten problem będzie miał inny powód. Upewnij się, że otrzymujesz poprawny identyfikator widoku przed zaimplementowaniem onClick w tym widoku.
Jaura
9

Ustaw buttonTintwłaściwość. Na przykład android:buttonTint="#99FF33".

Piaszczysty
źródło
9
To dopiero po API 21
miracle-doh
7

Zrobiłem to krótko w ten sposób (praca nad API przed 21, a także po 21)

Twój przycisk opcji w xml powinien wyglądać tak

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

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

trzeba dodać kolor przezroczysty do rysowania stanu niezaznaczonego; w przeciwnym razie rysuje jednolity czarny owal.

Hatem Badawi
źródło
6

Czasami wystarczy zastąpić colorControlNormal w ten sposób:

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

Otrzymasz taki przycisk:

wprowadź opis obrazu tutaj

colorControlNormal używany dla stanu niezaznaczonego i colorAccent dla zaznaczonego.

Nosov Pavel
źródło
5

Istnieje dla niego atrybut xml:

android:buttonTint="yourcolor"
thelearner
źródło
Upewnij się, że twoje minimalne API jest wyższe niż 21 lub to nie zadziała
Jcorretjer
możesz użyć tego w celu zapewnienia zgodności z poprzednimi wersjami: app: buttonTint = "your_color"
Mridul Das
"Make sure your min API is higher then 21 or this won't work"to jest fałszywe. Celuję w API 17 z AndroidX i to jest jedyna rzecz, która zadziałała
Chisko
3

Dla tych, którzy chcą zmienić wyłączone, zaznaczone i włączone stany, na których jesteś kotem, wykonaj następujące czynności:

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

następnie w folderze color res utwórz plik o nazwie „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>
Saman Sattari
źródło
2
<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:buttonTint="@color/my_color"/>

Przycisk Wszystko zmieni kolor, okrąg i środkowy przycisk.

texeratx
źródło
1
Ale nie tętnienie ;-)
Waza_Be
1

RadioButton domyślnie przyjmuje kolor colorAccent w pliku res / values ​​/ colors.xml. Więc przejdź do tego pliku i zmień wartość

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

na żądany kolor.

Velmurugan V
źródło
0

Najłatwiej jest zmienić colourAccentkolor, values->colours.xml
ale pamiętaj, że zmieni to również inne rzeczy, takie jak edycja koloru kursora tekstu itp.

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

Manohar Reddy
źródło
0

Jeśli chcesz ustawić inny kolor dla klikniętego i niezaznaczonego przycisku opcji, użyj:

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

anju jo
źródło
0

po prostu użyj android:buttonTint="@color/colorPrimary"atrybutu na tagu, mam nadzieję, że to pomoże

Cevin Ways
źródło
0

Miałem ten problem. Jeśli Twoja aplikacja ma czarne tło i masz wiele przycisków RadioButtons, które są niewidoczne z powodu tła, edytowanie android: buttonTint każdego z nich jest skomplikowane, najlepszym rozwiązaniem jest zmiana motywu nadrzędnego w pliku styles.xml

Zmieniłam

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

do

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

Tak więc okręgi RadioButtons stały się jaśniejszym odcieniem szarości i teraz są widoczne nawet na czarnym tle.

To jest mój plik 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>

Willian S. Praciano
źródło
-4

@ jh314 jest poprawne. W AndroidManifest.xml,

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

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

nazwa elementu musi mieć wartość colorAccent, decyduje o domyślnym kolorze widżetów aplikacji.

Ale jeśli chcesz zmienić kolor w kodzie, może odpowiedź @ aknay jest poprawna.

Iturbo
źródło
To nie daje odpowiedzi na pytanie. Gdy zdobędziesz wystarczającą reputację , będziesz mógł komentować każdy post ; zamiast tego udziel odpowiedzi, które nie wymagają wyjaśnień od pytającego . - Z recenzji
semirturgay
Moja odpowiedź brzmi: zmień podstawowy kolor aplikacji i oczywiście może zmienić kolor radiobutton na biały.
Iturbo