Search code examples
androidandroid-layoutandroid-radiobuttonandroid-radiogroup

Center the Icon of RadioButton in RadioGroup


I am trying to center the Button of a RadioButton. None of the already answered questions here fixed my problem.

enter image description here

My conditions:

  • the effect of a RadioGroup
  • the default RadioButton Icon
  • I don't want to set text to the RadioButtons
  • the ButtonIcon should be centered (like the position of A1, A2, A3)

I tried different settings but nothing worked for me.

    <RadioGroup
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RadioButton
            android:layout_gravity="center"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>
        <RadioButton
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"/>
    </RadioGroup>

EDIT: Using Placeholder-RadioButtons is not an option. In this case I would need 9 RadioButtons, but in the end this layout will be created programmatically and the amount of RadioButtons could be bigger.


Solution

  • 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

    enter image description here