Изменить цвет круга радиокнопки


158

Я хочу изменить цвет круга RadioButton в одном из моих проектов , я не мог понять, какое свойство установить. Цвет фона у меня черный, поэтому он становится невидимым. Я хочу установить цвет круга на белый.


обратитесь по этой ссылке: heliodorj.blogspot.in/2009/04/…
разработчик Android

Использовать два изображения для радиокнопки: один выбран, а другой нет, измените эти изображения по щелчку Radiobutton либо с помощью ресурса setbackground, либо с помощью селектора xml.
SAURABH_12

Ответы:


288

Проще говоря, просто установите цвет buttonTint: (работает только на уровне API 21 или выше)

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

в ваших values ​​/ colors.xml поместите ваш цвет в этом случае красноватый:

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

Результат:

Цветная кнопка-переключатель Android

Если вы хотите сделать это с помощью кода (также API 21 и выше):

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, если вы хотите изменить оттенок цвета по коду, вы должны использовать control.getDrawable().setColorFilter(getResources().getColor(color), PorterDuff.Mode.SRC_IN);где controlэлемент управления, для которого вы хотите изменить оттенок, и colorцелочисленное значение цвета, который вы хотите, например,R.color.red
Jorge Arimany

1
@JorgeArimany Для RadioButton это getButtonDrawable или getCompoundDrawables? getCompoundDrawables возвращает список
Ленин Радж Раджасекаран

@emaillenin, спасибо, мой ответ на ваш комментарий был для других элементов управления, таких как кнопка, я обновил свой ответ, добавив код, который вы ищете, надеюсь, что это поможет вам
Хорхе Аримани

3
@JorgeArimany Я уже работал на> 21 года .. Я ищу ответы специально для <21
Ленин Радж Раджасекаран

Чтобы изменить цвет отмеченной кнопки, вы можете добавить или заменить состояние android.R.attr.state_checkedи добавить цвет.
6

160

Обновление: 1. используйте вместо этого

   <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. Затем добавьте эту строку в родительский макет или Alt + Enterв Android Studio для автоматического добавления xmlns:app="http://schemas.android.com/apk/res-auto"

Минимальный пример должен выглядеть так:

<?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. В вашей программе должен называться так. AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);

В основном, этот тип шаблона может применяться для всех типов AppCompact, таких как AppCompatCheckBox, AppCompatButton и так далее.

Старый ответ:

Чтобы поддерживать ниже Android API 21, вы можете использовать AppCompatRadioButton. Затем используйте setSupportButtonTintListметод, чтобы изменить цвет. Это мой фрагмент кода для создания переключателя.

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

Протестированный результат в API 19:

Этот тестируется на API 19

Смотрите ссылку на Android для более подробной информации.


10
Этот ответ должен быть принятым. Если вы хотите добавить эту кнопку поддержки через xml, используйте<android.support.v7.widget.AppCompatRadioButton ../>
Vinayak Garg

22
setSupportButtonTintListэто частный метод, который вы не собираетесь использовать. Переключатели будут вести себя странно на некоторых версиях Android. Вместо этого используйте CompoundButtonCompat.setButtonTintList(rb, colorStateList).
wampastompa

2
@wampastompa прав. В API 22 результатом было то, что я видел только внешний круг, который никогда не был заполнен при проверке. @aknay; пожалуйста, обновите свой ответ
Нино ван Хофф

1
Я использую API 16. Я добавил радио-кнопки AppCompat, как указано выше, но они по-прежнему отображаются неправильно.
tccpg288

1
вам не нужен код, смотрите ответ IgorOliveira. Работает для всех версий.
Кирилл Кармазин

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

11
Это ответ для устройств до, в настоящее время и после lollypop !! Отлично
sdelvalle57

1
Это должен быть принятый ответ. Коротко и идеально. ПРИМЕЧАНИЕ: используйте app: buttonTint = "@ color / Color", но не andoid: buttonTint = "@ color / Color"!
Кирилл Кармазин

@KirillKarmazin должен быть принят, который работает для <21
user924

56

Работа над API до 21, а также после 21. В вашем 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>

Ваш radio buttonв XML должен выглядеть так:

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

Теперь все, что вам нужно сделать, это сделать radiobutton_drawable.xmlв вашем drawable folder. Вот что вам нужно положить в него:

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

Ваш 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>

Ваш 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>

Просто замените @color/colorAccentна цвет по вашему выбору.


Как бы я сделал это программно?
tccpg288

@ tccpg288 Если вы используете этот xml и если вы хотите изменить цвет программным способом, просто используйте radioButton.setChecked (false) или radioButton.setChecked (true)
Вайбхав Шарма

Я не понимаю твой вопрос. Можете ли вы уточнить?
Вайбхав Шарма

Моя ошибка, имеет ли значение, использую ли я обычную RadioButton или AppCompat RadioButton?
tccpg288

1
Это не работает, как насчет того, когда я инициализирую RadioButton? Вот мой код: mPollAnswerArrayList.add ((indexCreated), новый RadioButton ((getActivity (). GetApplicationContext ()), null, R.style.radiobutton));
tccpg288

18

Вы должны использовать этот код:

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

Использование app:buttonTintвместо, android:buttonTintа также android.support.v7.widget.AppCompatRadioButtonвместо Radiobutton!


16
  1. Объявите собственный стиль в вашем файле styles.xml.

    <style name="MyRadioButton" parent="Theme.AppCompat.Light">  
      <item name="colorControlNormal">@color/indigo</item>
      <item name="colorControlActivated">@color/pink</item>
    </style>  
  2. Примените этот стиль к вашему RadioButton через атрибут android: theme.

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

    только если ваша деятельность расширяется AppCompatActivity


1
Это должно быть принято как ответ, оно работает на всех версиях и является самым чистым
Антонис Радц

Я должен был использовать <item name="android:colorControlActivated">@color/pink</item>это, чтобы работать на меня. Я до сих пор не уверен, почему. В противном случае это хороший ответ.
Тейлор Вениссат

16

Для по API 21

Создать собственный стиль 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>

В макете используйте тему:

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

Для API 21 и более

Просто используйте buttonTint

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

Следует уточнить: buttonTint работает для API 21 и приложений, использующих AppCompat / AndroidX, независимо от API
Chisko

12

Вопрос старый, но я думаю, что мой ответ поможет людям. Вы можете изменить цвет непроверенного и проверенного состояния переключателя, используя стиль в XML.

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

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

Вы можете установить желаемые цвета в этом стиле.


Тема внутри RadioButton не работает (больше?). Сбой при нажатии кнопки, потому что метод onClick не найден, хотя он здесь.
бувигер

эта проблема будет иметь другую причину. Убедитесь, что вы получаете правильный идентификатор представления, прежде чем использовать onClick для этого представления.
Хаура


7

Я сделал это коротко так (Работа над API до 21, а также после 21)

Ваша радио-кнопка в XML должна выглядеть так

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

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

Необходимо добавить прозрачный цвет для рисования непроверенного статуса, иначе он рисует сплошной черный овал.


6

Иногда вам просто нужно переопределить colorControlNormal следующим образом:

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

И вы получите такую ​​кнопку:

введите описание изображения здесь

colorControlNormal используется для непроверенного состояния и colorAccent для проверенного.


5

Для этого есть атрибут xml:

android:buttonTint="yourcolor"

Убедитесь, что ваш минимальный API выше 21 или это не сработает
Jcorretjer

Вы можете использовать это для обратной совместимости: приложение: buttonTint = "your_color"
Mridul Das

"Make sure your min API is higher then 21 or this won't work"это ложь Я ориентируюсь на API 17 с AndroidX, и это единственное, что сработало для меня
Чиско

3

Для тех, кто хочет изменить отключенные, проверенные и включенные состояния, вы можете выполнить следующие действия:

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

Затем в папке «res» создайте файл с именем «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"/>

Все кнопки будут менять цвет, круговое поле и центральный флажок.


1
Но не рябь ;-)
Waza_Be

1

RadioButton по умолчанию принимает цвет colorAccent в файле res / values ​​/ colors.xml. Итак, перейдите в этот файл и измените значение

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

в цвет, который вы хотите.


0

Самый простой способ - изменить colourAccentцвет, values->colours.xml
но имейте в виду, что это также изменит другие вещи, такие как редактирование цвета текстового курсора и т. Д.

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


0

Если вы хотите установить другой цвет для переключателя с нажатием и без щелчка, просто используйте:

   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

просто используйте android:buttonTint="@color/colorPrimary"атрибут на теге, надеюсь, это поможет


0

У меня была эта проблема. Если ваше приложение имеет черный фон, и у вас есть много RadioButton, которые невидимы из-за фона, сложно отредактировать android: buttonTint каждого из них, лучшее решение - изменить родительскую тему в вашем файле styles.xml

Я изменился

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

в

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

Таким образом, круги RadioButtons стали более светлого оттенка серого, и теперь они видны даже на черном фоне.

Это мой файл 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 правильно. В AndroidManifest.xml,

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

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

имя элемента должно быть colorAccent, оно определяет цвет виджетов приложения по умолчанию.

Но если вы хотите изменить цвет в коде, возможно, @ aknay ответ правильный.


Это не дает ответа на вопрос. Как только у вас будет достаточно репутации, вы сможете комментировать любой пост ; вместо этого предоставьте ответы, которые не требуют разъяснений от автора . - Из обзора
semirturgay

Мой ответ - изменить основной цвет приложения и, конечно, он может изменить цвет радиокнопки на белый.
Итурбо
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.