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.

this will help, take a look http://stackoverflow.com/questions/10464171/how-to-align-radio-button-at-the-center-of-the-screen — Parth Goswami, Dec 28 '16 at 07:47
@Don'tBenegative-Relative layout is also generating same result. — Ragini, Dec 28 '16 at 07:59

score 12 · Answer 1 · answered Mar 08 '18 at 07:27

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

Outstanding. Wonderful solution. – Michael Plischke Feb 08 '23 at 17:08 — Michael Plischke, Feb 08 '23 at 17:08

score 3 · Answer 2 · answered May 26 '20 at 08:57

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.

score 2 · Answer 3 · edited Jun 20 '20 at 09:12

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

in that case RadioGroup functionality does not works ie. we are able to select all radio buttons — Ragini, Dec 28 '16 at 08:04
not getting can you please give me a reason for this why its not working — Umar Mansuri, Dec 28 '16 at 08:06
It will get center aligned but it will allow multi select radio button whareas i want single select radio button functionality — Ragini, Dec 28 '16 at 08:51
@Ragini The Radio button is used to select only once from Radio group. If you want to select multiple selection you have to integrate checkbox — Umar Mansuri, Dec 28 '16 at 09:19
@EthicsDev- I want single select.But if i am adding radio buttons inside frame layout than it allows multi-select, which i don't want — Ragini, Dec 28 '16 at 09:27
@Ragini sorry i got your point use same your layout just put the background and put button="@null" and in background put drawable selector — Umar Mansuri, Dec 28 '16 at 09:54
@Ragini you can fix height and weight with drawable Go this link http://stackoverflow.com/questions/19163628/adding-custom-radio-buttons-in-android — Umar Mansuri, Dec 28 '16 at 10:22
Good but you set all center with background after removing weight. Kindly accept answer or comment — Umar Mansuri, Dec 28 '16 at 11:34
@EthicsDev- I have used android:button="@null" & android:drawableTop="@drawable/radio_button_selector" & not used background — Ragini, Dec 28 '16 at 11:40

score 1 · Answer 4 · answered Dec 28 '16 at 11:09

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"

score 0 · Answer 5 · edited May 23 '17 at 11:47

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

Ramesh R · Answer 6 · 2016-12-28T07:57:33.013

0

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>

edited Dec 28 '16 at 07:57

answered Dec 28 '16 at 07:45

Ramesh R

300
4
18

@Ragini what layout you are using – Ramesh R Dec 28 '16 at 07:50
Its inside linear layout – Ragini Dec 28 '16 at 07:53
@Ragini check the updated answer try to add a linear layout before the radio group and add gravity for the linear layout. – Ramesh R Dec 28 '16 at 07:53
in that case RadioGroup functionality does not works ie. we are able to select all radio buttons – Ragini Dec 28 '16 at 07:55
@Ragini then try to give radio button set checked as false in xml – Ramesh R Dec 28 '16 at 07:56
@Ragini give checked false for all radio buttons in xml – Ramesh R Dec 28 '16 at 07:58

score 0 · Answer 7 · answered Dec 28 '16 at 07:46

0

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

Thanks

answered Dec 28 '16 at 07:46

Sri

1,317
9
13

Text and radiobutton both has android:layout_weight="1" – Ragini Dec 28 '16 at 07:51

score 0 · Answer 8 · answered Dec 28 '16 at 07:56

0

Replace your Linearlayout to Relativelayout

Because gravity may not work on Linear layout

answered Dec 28 '16 at 07:56

Don't Be negative

1,215
3
19
46

score 0 · Answer 9 · answered Dec 28 '16 at 08:50

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"/>

score 0 · Answer 10 · answered Nov 21 '17 at 11:44

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
    }

How to align radio button to center

10 Answers10