Search code examples
androidradio-buttonradio-groupandroid-radiobuttonandroid-radiogroup

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.


Solution

  • 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