Adding custom radio buttons in android
AndroidXmlAndroid Problem Overview
I am trying to get radiobutton effect for regular buttons in android
I have a simple android radio button below
Code for this is ::
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="RadioButton1" />
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton2" />
<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton3" />
</RadioGroup>
</RelativeLayout>
How to customize it as below::
Thanks !
[EDIT] using code from one of the answers
But the button name is overshadowed by the select option how to remove it ?
{EDIT} more changes
Finall changes should atleast i should know which button i have selected out of three radio buttons .... is it possible to get as below ?
Android Solutions
Solution 1 - Android
Add a background drawable that references to an image, or a selector (like below), and make the button transparent:
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@null"
android:button="@drawable/yourbuttonbackground"
android:checked="true"
android:text="RadioButton1" />
If you would like your radio buttons to have a different resource when checked, create a selector background drawable:
res/drawable/yourbuttonbackground.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="@drawable/b"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="@drawable/a"
android:state_pressed="true" />
<item
android:drawable="@drawable/a"
android:state_checked="true" />
<item
android:drawable="@drawable/b" />
</selector>
In the selector above, we reference two drawables, a
and b
, here's how we create them:
res/drawable/a.xml - Selected State
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#53aade" />
</shape>
res/drawable/b.xml - Regular State
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#555555" />
</shape>
More on drawables here: http://developer.android.com/guide/topics/resources/drawable-resource.html
Solution 2 - Android
I have updated accepted answer and removed unnecessary things.
I have created XML for following image.
Your XML code for RadioButton
will be:
<RadioGroup
android:id="@+id/daily_weekly_button_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="@+id/radio0"
android:layout_width="@dimen/_80sdp"
android:gravity="center"
android:layout_height="wrap_content"
android:background="@drawable/radio_flat_selector"
android:button="@android:color/transparent"
android:checked="true"
android:paddingLeft="@dimen/_16sdp"
android:paddingTop="@dimen/_3sdp"
android:paddingRight="@dimen/_16sdp"
android:paddingBottom="@dimen/_3sdp"
android:text="Daily"
android:textColor="@color/radio_flat_text_selector" />
<RadioButton
android:id="@+id/radio1"
android:gravity="center"
android:layout_width="@dimen/_80sdp"
android:layout_height="wrap_content"
android:background="@drawable/radio_flat_selector"
android:button="@android:color/transparent"
android:paddingLeft="@dimen/_16sdp"
android:paddingTop="@dimen/_3sdp"
android:paddingRight="@dimen/_16sdp"
android:paddingBottom="@dimen/_3sdp"
android:text="Weekly"
android:textColor="@color/radio_flat_text_selector" />
</RadioGroup>
###radio_flat_selector.xml
for background selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
<item android:drawable="@drawable/radio_flat_regular" />
</selector>
###radio_flat_selected.xml
for selected button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="1dp"
/>
<solid android:color="@color/colorAccent" />
<stroke
android:width="1dp"
android:color="@color/colorAccent" />
</shape>
###radio_flat_regular.xml
for regular selector:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="@color/colorAccent" />
</shape>
All the above 3 file code will be in drawable/
folder.
Now we also need Text
Color Selector to change color of text accordingly.
###radio_flat_text_selector.xml
for text color selector
(Use color/
folder for this file.)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_checked="false" />
<item android:color="@color/colorWhite" android:state_checked="true" />
</selector>
Note: I refereed many answers for this type of solution but didn't found good solution so I make it.
Hope it will be helpful to you.
Thanks.
Solution 3 - Android
Use the same XML file format from Evan's answer, but one drawable file is all you need for formatting.
<RadioButton
android:id="@+id/radio0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/custom_button_background"
android:button="@android:color/transparent"
android:checked="true"
android:text="RadioButton1" />
And your separate drawable file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#333333" />
<solid android:color="#cccccc" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#333333" />
<solid android:color="#cccccc" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#cccccc" />
<solid android:color="#ffffff" />
</shape>
</item>
</selector>
Solution 4 - Android
Setting android:background
and android:button
of the RadioButton like the accepted answer didn't work for me. The drawable image was being displayed as a background(eventhough android:button
was being set to transparent ) to the radio button text as
android:background="@drawable/radiobuttonstyle"
android:button="@android:color/transparent"
so gave radiobutton as the custom drawable radiobuttonstyle.xml
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Maintenance"
android:id="@+id/radioButton1"
android:button="@drawable/radiobuttonstyle"
/>
and radiobuttonstyle.xml is as follows
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/ic_radio_checked"></item>
<item android:state_checked="false" android:drawable="@drawable/ic_radio_unchecked"></item>
</selector>
and after this radiobutton with custom button style worked.
Solution 5 - Android
You must fill the "Button" attribute of the "CompoundButton" class with a XML drawable path (my_checkbox). In the XML drawable, you must have :
<?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/checkbox_not_checked" />
<item android:state_checked="true" android:drawable="@drawable/checkbox_checked" />
<item android:drawable="@drawable/checkbox_not_checked" /> <!-- default -->
</selector>
Don't forget to replace my_checkbox by your filename of the checkbox drawable , checkbox_not_checked by your PNG drawable which is your checkbox when it's not checked and checkbox_checked with your image when it's checked.
For the size, directly update the layout parameters.
Solution 6 - Android
In order to hide the default radio button, I'd suggest to remove the button instead of making it transparent as all visual feedback is handled by the drawable background :
android:button="@null"
Also it would be better to use styles as there are several radio buttons :
<RadioButton style="@style/RadioButtonStyle" ... />
<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
<item name="android:background">@drawable/customButtonBackground</item>
<item name="android:button">@null</item>
</style>
You'll need the Seslyn customButtonBackground drawable too.
Solution 7 - Android
Best way to add custom drawable is:
<RadioButton
android:id="@+id/radiocar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="@android:color/transparent"
android:button="@drawable/yourbuttonbackground"
android:checked="true"
android:drawableRight="@mipmap/car"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="yourtexthere"/>
Shadow overlay by custom drawable is removed here.
Solution 8 - Android
Simple way try this
-
Create a new layout in drawable folder and name it custom_radiobutton (You can rename also)
<?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/your_radio_off_image_name" /> <item android:state_checked="true" android:drawable="@drawable/your_radio_on_image_name" /> </selector>
-
Use this in your layout activity
<RadioButton android:id="@+id/radiobutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@drawable/custom_radiobutton"/>
Solution 9 - Android
Anybody getting here because setting a custom button doesnt work? I noticed that RadioButton didn't work, but androidx.appcompat.widget.AppCompatRadioButton did.
So a radiobutton like this
<androidx.appcompat.widget.AppCompatRadioButton
android:id="@+id/your_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:button="@drawable/radio_button_selector"
android:text="Your choice" />
With a selector like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/radio_button_selected" android:state_checked="true" />
<item android:drawable="@drawable/radio_button_unselected" android:state_checked="false" />
</selector>
will work.
Solution 10 - Android
Below code is example of custom radio button. follow below steps..
-
Xml file.
<FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.5"> <TextView android:id="@+id/text_gender" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|center_vertical" android:gravity="center" android:text="@string/gender" android:textColor="#263238" android:textSize="15sp" android:textStyle="normal" /> <TextView android:id="@+id/text_male" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginLeft="10dp" android:gravity="center" android:text="@string/male" android:textColor="#263238" android:textSize="15sp" android:textStyle="normal"/> <RadioButton android:id="@+id/radio_Male" android:layout_width="28dp" android:layout_height="28dp" android:layout_gravity="right|center_vertical" android:layout_marginRight="4dp" android:button="@drawable/custom_radio_button" android:checked="true" android:text="" android:onClick="onButtonClicked" android:textSize="15sp" android:textStyle="normal" /> </FrameLayout> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.6"> <RadioButton android:id="@+id/radio_Female" android:layout_width="28dp" android:layout_height="28dp" android:layout_gravity="right|center_vertical" android:layout_marginLeft="10dp" android:layout_marginRight="0dp" android:button="@drawable/custom_female_button" android:text="" android:onClick="onButtonClicked" android:textSize="15sp" android:textStyle="normal"/> <TextView android:id="@+id/text_female" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|center_vertical" android:gravity="center" android:text="@string/female" android:textColor="#263238" android:textSize="15sp" android:textStyle="normal"/> <RadioButton android:id="@+id/radio_Other" android:layout_width="28dp" android:layout_height="28dp" android:layout_gravity="center_horizontal|bottom" android:layout_marginRight="10dp" android:button="@drawable/custom_other_button" android:text="" android:onClick="onButtonClicked" android:textSize="15sp" android:textStyle="normal"/> <TextView android:id="@+id/text_other" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right|center_vertical" android:layout_marginRight="34dp" android:gravity="center" android:text="@string/other" android:textColor="#263238" android:textSize="15sp" android:textStyle="normal"/> </FrameLayout>
2.add the custom xml for the radio buttons
2.1.other drawable
custom_other_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/select_radio_other" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>
2.2.female drawable
custom_female_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/select_radio_female" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>
2.3. male drawable
custom_radio_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/select_radio_male" />
<item android:state_checked="false" android:drawable="@drawable/default_radio" />
</selector>
3. Output: this is the output screen
Solution 11 - Android
TL;DR use android:drawableStart
for our custom drawable selector file instead of android:button
. Set the android:button
to @null
. Example:
android:button="@null"
android:drawableStart="@drawable/radio_selector"
Long version:
Not aware of the reason but the existing answers here didn't work for me when I tested it on a device running Android 11 (API level 30). So tried the following alternative or hack and it worked. Sample xml for of the radio button component for reference:
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:drawableStart="@drawable/radio_selector"
android:drawablePadding="5dp"
android:text="@string/radioOption1" />
We are using android:drawableStart
for our custom drawable image of the radio or checked icon for selector instead of android:button
. And don't forget to set the android:button
to @null
Solution 12 - Android
I realize this is a belated answer, but looking through developer.android.com, it seems that the Toggle button would be ideal for your situation.
http://developer.android.com/guide/topics/ui/controls/togglebutton.html
And of course you can still use the other suggestions for having a background drawable to get a custom look you want.
<ToggleButton
android:id="@+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/custom_button_background"
android:textOn="On"
android:textOff="Off"
/>
Now if you want to go with your final edit and have a "halo" effect around your buttons, you can use another custom selector to do just that.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" > <!-- selected -->
<shape>
<solid
android:color="@android:color/white" />
<stroke
android:width="3px"
android:color="@android:color/holo_blue_bright" />
<corners
android:radius="5dp" />
</shape>
</item>
<item> <!-- default -->
<shape>
<solid
android:color="@android:color/white" />
<stroke
android:width="1px"
android:color="@android:color/darker_gray" />
<corners
android:radius="5dp" />
</shape>
</item>
</selector>