abolfazl bazghandi
abolfazl bazghandi

Reputation: 995

Android change circle color and textColor of radio button

When I click on Radio Button, I want the color of the text and the color of the circle to change at the same time as in the image below.

enter image description here

NOTE

The color of choice for the circle and text is none of the colors of the colorPrimary or colorAccent.

Upvotes: 1

Views: 2120

Answers (3)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364451

The MaterialRadioButton uses as default a selector where the colors are based on colorOnSurface when unchecked and colorControlActivated when checked defined in your app theme.

You can override them using a android:theme attribute. Something like:

<com.google.android.material.radiobutton.MaterialRadioButton
    ...
    android:theme="@style/ThemeOverlay.RadioButton"/>

with:

  <style name="ThemeOverlay.RadioButton" parent="">
    <item name="colorControlActivated">@color/.....</item>
    <item name="colorOnSurface">@color/.....</item>
    <item name="colorSurface">@color/.....</item>
  </style>

You can also set the useMaterialThemeColors attribute to false

<com.google.android.material.radiobutton.MaterialRadioButton
    ...
    useMaterialThemeColors="false"/>

and apply a custom selector using CompoundButtonCompat#setButtonTintList.

with a selector like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="..." android:state_enabled="true" android:state_checked="true"  />
  <item android:color="..." android:state_enabled="true" android:state_checked="false" />
  <item android:color="..." android:state_enabled="false" android:state_checked="true"  />
  <item android:color="..." android:state_enabled="false" android:state_checked="false" />  
</selector>

Upvotes: -1

mahsa sadeghi
mahsa sadeghi

Reputation: 68

If you want to change the text and color of the circles at the same time, follow these steps

1.add style below

<style name="radioButton" parent="AppTheme">
    <item name="colorControlNormal">#0f0</item>
    <item name="colorAccent">#f00</item>
  </style>

2.add this selector.xml to drawable

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="#0f0" android:state_pressed="true" />
  <item android:color="#f00" android:state_checked="true" />
  <item android:color="#0f0" />
</selector>

3.add selector and style to RadioButton

 <RadioButton
            android:id="@+id/one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:text="select"
            android:textColor="@drawable/selector"
            android:textSize="12sp"
            android:theme="@style/radioButton"
            app:useMaterialThemeColors="false" />

FULL CODE:

<RadioGroup
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="left"
          android:layout_margin="16dp"
          android:checkedButton="@+id/one"
          android:layoutDirection="ltr"
          android:orientation="horizontal">

          <RadioButton
            android:id="@+id/one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:text="select"
            android:textColor="@drawable/selector"
            android:textSize="12sp"
            android:theme="@style/radioButton"
            app:useMaterialThemeColors="false" />

          <RadioButton
            android:id="@+id/two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="not select"
            android:textColor="@drawable/selector"
            android:textSize="12sp"
            android:theme="@style/radioButton"
            app:useMaterialThemeColors="false" />
        </RadioGroup>

And Result

enter image description here

Note: I used Google Material

Upvotes: 3

MMG
MMG

Reputation: 3268

radiobutton.setOnCheckedChangeListener { buttonView, isChecked ->
        if(radiobutton.isChecked())
        {
            // Changing radio button 1 color on checked.
            radiobutton.setTextColor(Color.parseColor("#00ff00"))}}

Upvotes: 0

Related Questions