CODEWITHSUNDEEP
radio-buttonandroidandroid-styles
louis.luo
louis.luo

Reputation: 2971

Android button background shape

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>

Upvotes: 3

Views: 2250

Answers (2)

Mihir Trivedi
Mihir Trivedi

Reputation: 1505

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.

Upvotes: 3

Lal
Lal

Reputation: 14810

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..

Upvotes: 1

Related Questions