3

I want to create a radio button that looks like this:

enter image description here

That is, when selected, a checkmark shows up to indicate it is selected instead of a dot. When unselected, there is only an orange background (or some other color).

The black background of the page is just the background of the app.

I know that I could create different drawables for different state for each button, but this is not really extensible if there are a lot of colors.

I was thinking that I could add a checkmark image as a drawable for the android:button attribute and supply different colors for android:background for the radio buttons. But it doesn't work well because the shape of the background is always square. So I ended up having a square button.

What is the best way to implement such a button? Or, how do I change the background shape to be round/oval instead of square?

This is what I have right now:

<!-- layout.xml -->
<RadioButton
    android:id="@+id/radio1"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@color/orange"
    android:button="@drawable/radio"/>

<!-- drawable/radio.xml -->
<item 
    android:state_checked="true" 
    android:drawable="@drawable/checkmark_on_oval"
    >
</item>
louis.luo
  • 2,921
  • 4
  • 28
  • 46
  • I think you better use a couple of PNGs, set by a state-list drawable: http://stackoverflow.com/a/12432722/2649012 – Phantômaxx Apr 09 '14 at 16:54
  • @Vyger Thx. But I am wondering if there is a better way to do this. Using a bunch of PNGs is not ideal. I would only go down that way if there is no other options. – louis.luo Apr 09 '14 at 16:57
  • A bunch... only 2 are required. checked and unchecked. You see: the problem is the **checkmark**. If you wanted a white **dot**, it could be done with an xml drawable. – Phantômaxx Apr 09 '14 at 16:58
  • @Vyger I can create 2 PNGs for the round shape checkmark, but how do I shape the background color? Right now, it shows up as a checkmark on a square background. – louis.luo Apr 09 '14 at 17:03
  • You can set what is outside the circle as transparent... anyway, it seems that @Lal has an even better solution. – Phantômaxx Apr 09 '14 at 17:06
  • @Vyger could you elaborate? I am new to Android and not sure how to do that. thx. – louis.luo Apr 09 '14 at 17:07
  • No, this would be done in your graphic editor. You could draw the graphic stuff in code, but it goes beyond your scope, now. – Phantômaxx Apr 09 '14 at 17:08

2 Answers2

3

Try this may helpful to you. put radio_button properties like

    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:button="@null"
        android:checked="true"
        android:drawableLeft="@drawable/radio_button_selector"
        android:drawablePadding="5dp"
        android:paddingLeft="2dp" />

In drawable folder put rb_drawable.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/radio_button_unchecked" android:state_checkable="true"/> <!-- pressed -->
    <item android:drawable="@drawable/radio_button_checked" android:state_checked="true"/> <!-- focused -->
    <item android:drawable="@drawable/radio_button_unchecked"/> <!-- default -->

</selector>

Here radio_button_unchecked and radio_button_checked are two images for your radio buttons.

Mihir Trivedi
  • 1,458
  • 18
  • 39
1

You can create a round shape using the following code

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
         <solid android:color="#9F2200"/>
         <stroke android:width="2sp" android:color="#fff" />
     </shape>

Try it out..

Lal
  • 14,726
  • 4
  • 45
  • 70