Custom icon for a radio button

Question

I am trying to implement a custom icon for the radio button in android. i.e. I want the Radio button icon to be custom one of my choice. I am able to do that with android:button property inside the radio button but I am not getting on how to define it when the user clicks it. In my application when the user clicks it nothing happens. I have also followed this guide here.

I have 2 images :
 A. tire.png (When the radio button is not clicked)
 B. tireinvert.png (When the radio button is clicked)

My RadioButton.xml file :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.techfrk.customizeradiobutton.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

     <RadioGroup
                android:id="@+id/newexprgrp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <RadioButton
                android:id="@+id/tvllocrbtn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="40dp"
                android:text="Travelling Expense (Local)"
                />

                  <RadioButton
                android:id="@+id/tvloutrbtn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="15dp"
                android:text="Travelling Expense (Outstation)"

                 />

               <RadioButton
                android:id="@+id/phnexprbtn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="15dp"
                android:text="Phone Expense"

                 />

                   <RadioButton
                android:id="@+id/miscexprbtn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="15dp"
                android:text="Misc Expense"

                 />
            </RadioGroup>

</RelativeLayout>

Can anyone please guide me ?

Answer 1

Right click on your drawable folder then->new->android xml file->choose root element "selector" then paste code below in the file:

<item android:drawable="@drawable/tire" android:state_checked="true"/>
  <item android:drawable="@drawable/tireinvert" android:state_checked="false"/>

then in xml of your radio button add this line:

android:button="@drawable/radio"

here radio is the selector xml file which we have created in the drawable folder