Border to RadioButton with text in Android

Question

In my application I want to give border to my Radio Button with text.

<RadioButton
    android:id="@+id/radioAndroid"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@drawable/inout_radio_button"
    android:checked="true"
    android:gravity="center"
    android:padding="5dp"
    android:layoutDirection="rtl"
    android:layout_marginRight="@dimen/margin_20dp"
    android:layout_marginLeft="@dimen/margin_20dp"
    android:text="1"
    android:textColor="@color/color_radio_text" />

<RadioButton
    android:id="@+id/radioiPhone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@drawable/inout_radio_button"
    android:gravity="center"
    android:padding="5dp"
    android:layoutDirection="rtl"
    android:layout_marginRight="@dimen/margin_20dp"
    android:layout_marginLeft="@dimen/margin_20dp"
    android:text="2"
    android:textColor="@color/color_radio_text" />

I have put icon as below:

inout_radio_button.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/radioact" ></item>
    <item android:state_checked="false" android:drawable="@drawable/radio" />
</selector>

But, i can't find way to give border around radio button.

Answer 1

Apply background parameter to the RadioButton directly (no need to surround it with external layout):

android:background="@drawable/background"

Where the background looks like:

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

    <item>
        <shape
            android:shape="rectangle">
            <stroke
                android:width="1px"
                android:color="@android:color/black"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

Also apply the padding to the each of check mark images:

Inactive:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/radio"
            android:left="6dp"
            android:right="6dp"/>
</layer-list>

Active:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@drawable/radioact"
            android:left="6dp"
            android:right="6dp"/>
</layer-list>

And selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/active" android:state_checked="true"/>
    <item android:drawable="@drawable/inactive" android:state_checked="false"/>
</selector>

Answer 2

Use a Layout around your RadioButton and set a backgroundDrawable with a custom border

create border.xml and put it into drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dip"
        android:color="@android:color/black" />
    <corners android:radius="10dp"/>
</shape>

and then use it in your Layout

<RelativeLayout
  android:background="@drawable/border">
  // your radiogroup
</RelativeLayout>