RadioButtons looking like ImageButtons

Question

Is there any way to use RadioButtons but have them look like ImageButtons?

I want the functionality of RadioButtons (i.e. when either button is clicked, the others get "unclicked") and the graphics of an ImageButton (a drawable on top and a background that alters in color when you click it). The currently selected RadioButton should stay the same color as when a Button is pressed (e.g. slightly darker for Holo Light theme).

I tried using a RadioGroup with this selector as button for each RadioButton:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_default_pressed_holo_light" android:state_checked="true"</item>
    <item android:drawable="@drawable/btn_default_normal_holo_light"></item>
</selector>

and my desired drawable as the drawable value. This kind of works but looks ugly. The drawable is left aligned in relation to the Background and the background doesn't look exactly like regular buttons even though I used the 9-patch found for buttons in Holo Light.

Example RadioButton:

<RadioButton
android:button="@drawable/ic_action_game"
android:background="@drawable/radio_background_selector"
android:id="@+id/game_button" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content"
android:padding="6dip"/>

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

consider using button instead of background attribute

android:button="@drawable/your_drawable"

see this post for more info about customising your RadioButtons

edited May 23 '17 at 11:49

Community

1
1

answered Nov 17 '14 at 21:09

Abdallah Alaraby

2,222
2
18
30

Thanks for the answer. That's what I did, messed up the question. The drawable is left aligned which is not what I want. Otherwise it looks fine. – schoel Nov 17 '14 at 22:15

score 0 · Accepted Answer · answered Nov 18 '14 at 20:07

Setting these attributes accomplished what I wanted:

<RadioButton
    android:button="@null"
    android:drawableRight="@drawable/ic_action_game"
    android:background="@drawable/radio_background_selector"
    android:id="@+id/game_button" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:padding="6dip"/>

RadioButtons looking like ImageButtons

2 Answers2