radio button make radio button outer circle a different colour to the colour when the radio button is selected

Question

I need help customizing a radio button in android. Basically what I want to do is have the radio button set to be white and when the user clicks or selects the radio button i want the inner circle to be blue and the outer ring to remain white.
I know I can use buttonTint but this sets both the outer circle and inner circle when the user selects the radio button to the same colour.
Is what I am looking to do even possible?

Thanks

radio button prop foregroundTint would help a little ! please explain a bit more! — Rizwan Atta, Jul 26 '18 at 14:47

score 0 · Answer 1 · answered Jul 26 '18 at 14:53

0

Use buttonTint property of RadioButton:

<RadioButton
    android:id="@+id/radio_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:buttonTint="OUTER_CIRCLE_COLOR_CODE"/>

answered Jul 26 '18 at 14:53

Gokul Nath KP

15,485
24
88
126

Doesnt work it makes both the inner and outer the same colour as shown above but i want the outer colour to be a different colour – theNewOne92 Jul 26 '18 at 15:09

score 0 · Answer 2 · answered Jul 24 '20 at 14:27

You can use button attribute of radioButton and set the desired drawable like for checked only inner circle colored while unchecked with white circle like below

android:button="@drawable/rb_bg"

rb_bg.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/button_selected"/>
<item android:state_checked="false" android:drawable="@drawable/button_unselected"/>
</selector>

button_selected.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape android:shape="oval">
        <solid android:color="@color/divider_color" />
    </shape>
</item>

<item android:bottom="1dp">
    <shape android:shape="oval">
        <solid android:color="@android:color/white" />
    </shape>
</item>

<item
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp">
    <shape android:shape="oval">
        <size
            android:width="16dp"
            android:height="16dp" />
        <solid android:color="@color/blue" />
    </shape>
</item>

button_unselected.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/divider_color"/>
    </shape>
</item>
<item
    android:bottom="1dp">
    <shape android:shape="oval">
        <size android:height="24dp" android:width="24dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

radio button make radio button outer circle a different colour to the colour when the radio button is selected

2 Answers2