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.



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
}

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 .


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

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.


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!


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


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

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.


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


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.


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.


5

Istnieje dla niego atrybut xml:

android:buttonTint="yourcolor"

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>

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.


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.


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 >


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


0

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


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>


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


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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.