Radio Group & Button

⇒ Android radio button is a widget that can have more than one option to choose from. The user can choose only one option at a time. Each option here refers to a radio button and all the options for the topic are together referred to as Radio Group. Hence, Radio Buttons are used inside a RadioGroup.


<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/idRLContainer"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	tools:context=".MainActivity"> 

	<!--displaying a simple text view-->
	<TextView
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_above="@id/radioGroup"
		android:layout_margin="15dp"
		android:text="Radio Group in Android"
		android:textAlignment="center"
		android:textColor="@color/black"
		android:textSize="20sp"
		android:textStyle="bold" /> 

	<!--displaying a radio group on below line-->
	<RadioGroup
		android:id="@+id/radioGroup"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_centerInParent="true"
		android:layout_gravity="center"
		android:layout_marginStart="10dp"
		android:layout_marginTop="40dp"
		android:layout_marginEnd="10dp"
		android:gravity="center"> 

		<!--adding a radio button -->
		<RadioButton
			android:id="@+id/javaRB"
			android:layout_width="200dp"
			android:layout_height="wrap_content"
			android:layout_gravity="center"
			android:checked="false"
			android:padding="4dp"
			android:text="Java"
			android:textAlignment="center"
			android:textSize="20sp" /> 

		<!--adding a radio button -->
		<RadioButton
			android:id="@+id/cRB"
			android:layout_width="200dp"
			android:layout_height="wrap_content"
			android:layout_gravity="center"
			android:checked="false"
			android:padding="4dp"
			android:text="C++"
			android:textAlignment="center"
			android:textSize="20sp" /> 

		<!--adding Customized radio button -->
		<RadioButton
                android:id="@+id/home"

                android:layout_width="0dp"
                android:layout_height="match_parent"

                android:layout_weight="1"

                android:background="@drawable/checked_state"

                android:button="@android:color/transparent"

                android:checked="true"

                android:gravity="center"

                android:text="Home"

                android:textColor="@drawable/checked_font"

                android:textStyle="bold" />

	</RadioGroup> 
	
</RelativeLayout>

Make Customized radio button

android:button="@android:color/transparent"

removes radio button circle and only text remains

android:background="@drawable/checked_state"

it is custom background design that can show different background based on state of radio button (checked or unchecked)
used it can be made in drawable resource file :


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

    <item android:state_checked="true">
        <shape>
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape>
            <solid android:color="@color/white" />
            <stroke android:width="2dp" android:color="@color/colorPrimary" />
        </shape>
    </item>
</selector>

android:textColor="@drawable/checked_font"

As we change background we also needed to change text color based on state and according to background color for good ui


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

    <item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/colorPrimary" android:state_checked="false" />
    <item android:color="@color/colorPrimary" />
</selector>