How to Change the Radio Button Icon in an Android Radio Button Group

Is it possible to change the radio button icon in an android radio button group

Yes that's possible you have to define your own style for radio buttons, at res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme">
   <item name="android:radioButtonStyle">@style/RadioButton</item>
</style>
<style name="RadioButton" parent="@android:style/Widget.CompoundButton.RadioButton">
   <item name="android:button">@drawable/radio</item>
</style>
</resources>

'radio' here should be a stateful drawable, radio.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_window_focused="false"
        android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="false" android:state_pressed="true"
        android:drawable="@drawable/radio_active" />
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/radio_hover" />
    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/radio_normal_off" />
    <item android:state_checked="false" android:drawable="@drawable/radio_normal" />
    <item android:state_checked="true" android:drawable="@drawable/radio_hover" />
    </selector>

Then just apply the Custom theme either to whole app or to activities of your choice.

For more info about themes and styles look at http://brainflush.wordpress.com/2009/03/15/understanding-android-themes-and-styles/ that is good guide.

Custom icon for a radio button

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

Center the Icon of RadioButton in RadioGroup

Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A3" />

    </LinearLayout>

    <RadioGroup
        android:id="@+id/myRadioGroup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/_10sdp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_checked_black_24dp"
            android:tag="1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_unchecked_black_24dp" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_unchecked_black_24dp" />

    </RadioGroup>


</LinearLayout>

Activity code

public class MyActivity extends AppCompatActivity {

    RadioGroup myRadioGroup;
    RadioButton radioButton,radioButton2,radioButton3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);


        myRadioGroup = findViewById(R.id.myRadioGroup);
        radioButton = findViewById(R.id.radioButton);
        radioButton2 = findViewById(R.id.radioButton2);
        radioButton3 = findViewById(R.id.radioButton3);


        myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                if(checkedId==R.id.radioButton){
                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);

                }else if(checkedId==R.id.radioButton2){
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);

                }else if(checkedId==R.id.radioButton3){
                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                }
            }
        });
    }


}

ic_radio_button_unchecked_black_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

ic_radio_button_checked_black_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,7c-2.76,0 -5,2.24 -5,5s2.24,5 5,5 5,-2.24 5,-5 -2.24,-5 -5,-5zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

OUTPUT

Sample Image

Center the Icon of RadioButton in RadioGroup

Try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="A3" />

    </LinearLayout>

    <RadioGroup
        android:id="@+id/myRadioGroup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/_10sdp"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_checked_black_24dp"
            android:tag="1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_unchecked_black_24dp" />

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ic_radio_button_unchecked_black_24dp" />

    </RadioGroup>


</LinearLayout>

Activity code

public class MyActivity extends AppCompatActivity {

    RadioGroup myRadioGroup;
    RadioButton radioButton,radioButton2,radioButton3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);


        myRadioGroup = findViewById(R.id.myRadioGroup);
        radioButton = findViewById(R.id.radioButton);
        radioButton2 = findViewById(R.id.radioButton2);
        radioButton3 = findViewById(R.id.radioButton3);


        myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                if(checkedId==R.id.radioButton){
                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);

                }else if(checkedId==R.id.radioButton2){
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);

                }else if(checkedId==R.id.radioButton3){
                    radioButton3.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_checked_black_24dp,0,0);

                    radioButton.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                    radioButton2.setCompoundDrawablesWithIntrinsicBounds(0,R.drawable.ic_radio_button_unchecked_black_24dp,0,0);
                }
            }
        });
    }


}

ic_radio_button_unchecked_black_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

ic_radio_button_checked_black_24dp

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,7c-2.76,0 -5,2.24 -5,5s2.24,5 5,5 5,-2.24 5,-5 -2.24,-5 -5,-5zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>
</vector>

OUTPUT

Sample Image

how to change position of radio Button in radio group

In your RadioGroup, set:

android:orientation="horizontal"

Because RadioGroup inherits from LinearLayout

Change the circle color of radio button

It is simpler just setting the buttonTint color (only works on API level 21 or above):

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/radio"
    android:checked="true"
    android:buttonTint="@color/your_color"/>

In your values/colors.xml file, put your color, in this case a reddish one:

<color name="your_color">#e75748</color>

Result:

Colored Android Radio Button

If you want to do it by code (also API 21 and above):

if(Build.VERSION.SDK_INT >= 21)
{
    ColorStateList colorStateList = new ColorStateList(
            new int[][]
            {
                new int[]{-android.R.attr.state_enabled}, // Disabled
                new int[]{android.R.attr.state_enabled}   // Enabled
            },
            new int[]
            {
                Color.BLACK, // disabled
                Color.BLUE   // enabled
            }
        );

    radio.setButtonTintList(colorStateList); // set the color tint list
    radio.invalidate(); // Could not be necessary
}

Adding custom radio buttons in android

Add a background drawable that references to an image, or a selector (like below), and make the button transparent:

<RadioButton
    android:id="@+id/radio0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@null"
    android:button="@drawable/yourbuttonbackground"
    android:checked="true"
    android:text="RadioButton1" />

If you would like your radio buttons to have a different resource when checked, create a selector background drawable:

res/drawable/yourbuttonbackground.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@drawable/b"
        android:state_checked="true"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_pressed="true" />
    <item
        android:drawable="@drawable/a"
        android:state_checked="true" />
    <item
        android:drawable="@drawable/b" />
</selector>

In the selector above, we reference two drawables, a and b, here's how we create them:

res/drawable/a.xml - Selected State

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#53aade" />
</shape>

res/drawable/b.xml - Regular State

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners
        android:radius="5dp" />
    <solid
        android:color="#fff" />
    <stroke
        android:width="2dp"
        android:color="#555555" />
</shape>

More on drawables here: http://developer.android.com/guide/topics/resources/drawable-resource.html


Related Topics

Couldn't Load Memtrack Module Logcat Error

Android Crop Center of Bitmap

Play Audio File from the Assets Directory

Actionbar Not Shown with Appcompat

Android Studio Gradle Build Speed Up

Read All Contacts' Phone Numbers in Android

Android:Loading an Image from the Web with Asynctask

Android Preventing Double Click on a Button

Webview Load HTML from Assets Directory

Show Gif File with Glide (Image Loading and Caching Library)

How to Send Parameters from a Notification-Click to an Activity

Force Application to Restart on First Activity

Requestfeature() Must Be Called Before Adding Content

How to Get the First Name and Last Name from Android Contacts

How to Maintain Fragment State When Added to the Back Stack

Android: Out of Memory Exception in Gallery

How to Detect Shake Event with Android

Capture Screen Shot of Googlemap Android API V2


Leave a reply



Submit