RadioButton with vector drawables

Question

I'm trying to make gender switcher using RadioButtons. Now it looks like this.

I use vector drawables as icons. I want to make it @color:colorAccent and change its background to a white circle, when button is pressed. How would be better to do it?

layout.xml

<RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp">

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:layout_weight="1"
                android:layout_marginEnd="8dp"
                android:button="@drawable/custom_btn_radio"/>

            <RadioButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/radioButton2"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:layout_weight="1"
                android:layout_marginStart="8dp"
                android:button="@drawable/custom_btn_radio"/>

        </LinearLayout>
    </RadioGroup>

custom_btn_radio.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
    android:drawable="@drawable/human_male"/>
<item android:state_checked="true"
    android:drawable="@drawable/human_male"
    android:background="@android:color/white"
    android:tint="@color/colorAccent"/>

score 1 · Accepted Answer · answered Dec 08 '16 at 13:37

1

You should use a <selector> to select different drawables for different states.

Then for the color, as you are using a vector drawable, you can animate properties of it: AnimVector So you could be able to animate the color, even if it's a zero duration animation (in theory, it's not something I have done).

answered Dec 08 '16 at 13:37

weston

54,145
21
145
203

I'm using a selector now (XML is provided in the question), but it doesn't work, buttons always look like unchecked. – Gleb Glazyrin Dec 08 '16 at 14:09
You must now use `android:button="@drawable/custom_btn_radio"/>` If that's what you call it, probably should mention `male` in the name. – weston Dec 08 '16 at 14:24
I'm already using `android:button="@drawable/custom_btn_radio"/>`, just forgot to update the code in question when added selector – Gleb Glazyrin Dec 08 '16 at 14:27
If you still see nothing, why don't you try checked->male unchecked->female. If that works, then it's simply that you cannot use background or tint. – weston Dec 08 '16 at 14:27
Odd, few things to try here: http://stackoverflow.com/questions/12432553/radiobutton-how-to-use-a-custom-drawable – weston Dec 08 '16 at 14:32
Yep, now that works, but only for icon. Is it possible to make white background for checked radiobutton in some way? – Gleb Glazyrin Dec 08 '16 at 14:33
You wanted a circle background, I would consider a LayerList to combine a circle [Shape Drawable](https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape) with yours: https://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList – weston Dec 08 '16 at 14:38

RadioButton with vector drawables

1 Answers1