Customized Radio Button

In this tutorial, I will show you customized radio button. See output below.

In your drawable folder, add this xml named custom_radio_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    
    <item android:state_checked="true" android:drawable="@drawable/checkedradiobutton" />
    <item android:state_checked="false" android:drawable="@drawable/unchekedradiobutton" />

</selector>


Next is add this 2 images in drawable folder.

Next is your layout.xml

<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=".MainActivity" >

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

        <RadioButton
            android:id="@+id/rb_chc1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@drawable/custom_radio_button"
            android:checked="true"
            android:textColor="#9D9D9D"
            android:text="Yes" />

        <RadioButton
            android:id="@+id/rb_chc2"
            android:layout_width="wrap_content"
            android:button="@drawable/custom_radio_button"
            android:layout_height="wrap_content"
            android:textColor="#9D9D9D"
            android:text="No" />

        <RadioButton
            android:id="@+id/rb_chc3"
            android:layout_width="wrap_content"
            android:button="@drawable/custom_radio_button"
            android:layout_height="wrap_content"
            android:textColor="#9D9D9D"
            android:text="Maybe" />
    </RadioGroup>

    <Button
        android:id="@+id/btn_check"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Check" />


</RelativeLayout>

And lastly is your MainActivity.java

package com.client.apps.views.radiobutton;

import android.app.Activity;

import android.os.Bundle;

import android.util.Log;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

import android.widget.RadioButton;

import android.widget.RadioGroup;

public class MainActivity extends Activity implements OnClickListener {

Button btn_check;

RadioGroup radioGroup;

RadioButton get_val;

String radioButtonSelected = "";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

radioGroup = (RadioGroup) findViewById(R.id.rdg_ask);

btn_check = (Button) findViewById(R.id.btn_check);

btn_check.setOnClickListener(this);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

int selectedId = radioGroup.getCheckedRadioButtonId();

get_val = (RadioButton) findViewById(selectedId);

// find the radiobutton by returned id

switch(v.getId()) {

 

case R.id.btn_check:

Log.e("val", get_val.getText().toString());

break;

}

}

}

That's it, hope this may help you. Happy Coding!