How to align radio button to center

Question

I want radio buttons in the image below to be center aligned. I have used gravity but it's not working.

I have used this code

   <RadioGroup
                    android:id="@+id/qualityRadioGroup"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:weightSum="5"
                    >


                    <RadioButton
                        android:id="@+id/qty1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="center"
                        android:layout_gravity="center_vertical"
                        android:button="@drawable/radio_button_selector"
                        android:checked="false"
                        android:tag="1"/>


                    <RadioButton
                        android:id="@+id/qty2"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:padding="@dimen/s5dp"
                        android:button="@drawable/radio_button_selector"
                        android:tag="2"
                        />


                    <RadioButton
                        android:id="@+id/qty3"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:padding="@dimen/s5dp"
                        android:button="@drawable/radio_button_selector"
                        android:tag="3"
                        />


                    <RadioButton
                        android:id="@+id/qty4"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:padding="@dimen/s5dp"
                        android:button="@drawable/radio_button_selector"
                        android:tag="4"
                        />


                    <RadioButton
                        android:id="@+id/qty5"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:padding="@dimen/s5dp"
                        android:button="@drawable/radio_button_selector"
                        android:checked="false"
                        android:tag="5"/>


                </RadioGroup>

If i add radio buttons inside linear layout than it gets aligned to center but radio group functionality does not work in that situation.

I want center aligned radio buttons along with radio group feature i.e only one item should be selected at a time.

Answer 1

Below mentioned code is working.

 <RadioButton
                        android:id="@+id/qty1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_weight="1"
                        android:button="@null"
                        android:checked="false"
                        android:drawableTop="@drawable/radio_button_selector"
                        android:tag="1"/>  

Add
android:button="@null"
android:drawableTop="@drawable/radio_button_selector"

Answer 2

use margins to put the circle in middle

<RadioButton
                    android:id="@+id/qty4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:padding="@dimen/s5dp"
                    android:button="@drawable/radio_button_selector"
                    android:tag="4"
                    android:marginLeft="5dp" 
                    />

for different screens you need to do it Programmatically
and read this SO Thread

Answer 3

Try to add gravity = "center" inside radio group and check

<LinearLayout                        
               android:layout_width="match_parent"
               android:gravity="center"
               android:layout_height="match_parent">
                <RadioGroup
                  android:id="@+id/qualityRadioGroup"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:orientation="horizontal"                  
                  android:weightSum="5">
                 <RadioButton
                    android:id="@+id/qty1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:layout_gravity="center_vertical"
                    android:button="@drawable/radio_button_selector"
                    android:checked="false"
                    android:tag="1"/>
            </LinearLayout>

Answer 4

Can you try providing the same layou width for both the text and the radiobutton & give them the gravity Gravity.CENTER_HORIZONTAL ?

Thanks

Answer 5

Replace your Linearlayout to Relativelayout

Because gravity may not work on Linear layout

Answer 6

Try this i have tested Add FrameLayout and give child weight into this and remove weight from Radiobutton and give center layout gravity to Radiobutton it will give as you want

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="5"
    android:orientation="horizontal">

    <RadioGroup
        android:id="@+id/qualityRadioGroup"
        android:layout_width="0dp"
        android:layout_height="wrap_content"

        android:layout_weight="5"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/qty1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="@mipmap/ic_launcher"
            android:button="@null"

            android:tag="1" />

        <RadioButton
            android:id="@+id/qty2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:button="@null"
            android:background="@mipmap/ic_launcher"
            android:tag="2" />
        <RadioButton
            android:id="@+id/qty3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:button="@null"
            android:background="@mipmap/ic_launcher"
            android:tag="3" />

        <RadioButton
            android:id="@+id/qty4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:button="@null"
            android:background="@mipmap/ic_launcher"
            android:tag="4" />

        <RadioButton
            android:id="@+id/qty5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:padding="5dp"
            android:button="@null"
            android:background="@mipmap/ic_launcher"
            android:tag="5" />
    </RadioGroup>

</LinearLayout>

And For Drawable Selector Please Refer this Link

Answer 7

use margins & remove weight to put the circle in middle

 <RadioButton
        android:id="@+id/qty1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:tag="1"/>

Answer 8

Old question but I just found a solution that works fine for my case:

Add android:minWidth="0dp" to your radioButton, that should remove the spaces to the left and right side of the button drawable.

Works great if you have a LinearLayout with a TextView and want the button to be centered perfectly horizontally above or below the TextView.

Answer 9

I have a workaround for this issue

    android:textSize="0.1sp"
    android:drawableTop="@drawable/selector_dashboard_button"
    android:button="@null"

Added these things instead of android:background=""

Here is my full layout code

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 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:checked="true"
    android:drawableTop="@drawable/selector_dashboard_button"
    android:padding="10dp"
    android:tag="1"
    android:textSize="0.1sp" />

<RadioButton
    android:id="@+id/radioButton2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@null"
    android:drawableTop="@drawable/selector_inventory_button"
    android:padding="10dp"
    android:textSize="0.1sp" />

<RadioButton
    android:id="@+id/radioButton3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@null"
    android:drawableTop="@drawable/selector_check_list_button"
    android:padding="10dp"
    android:textSize="0.1sp" />

<RadioButton
    android:id="@+id/radioButton4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:button="@null"
    android:drawableTop="@drawable/selector_vendor_button"
    android:padding="10dp"
    android:textSize="0.1sp" />
</RadioGroup>

Here is the screenshot of my code

Answer 10

• Remove all padding from the RadioButtons
• Add a LinearLayout either side of each RadioButton
• Set the dimensions of the LinearLayouts to your desired margin sizes
• Set onClickListeners for these LinearLayouts

In your layout:

             <LinearLayout
                android:id="@+id/btn2_padding_left"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"/>

            <RadioButton
                android:id="@+id/radio_btn_pg2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:duplicateParentState="true"
                android:paddingBottom="12dp"
                android:paddingTop="12dp"
                android:scaleX="0.5"
                android:scaleY="0.5" />
            <LinearLayout
                android:id="@+id/btn2_padding_right"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:orientation="horizontal"/>

In your activity class:

    btn2_padding_left.setOnClickListener {
        radio_btn_pg2.isChecked = true
    }
    btn2_padding_right.setOnClickListener {
        radio_btn_pg2.isChecked = true
    }