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.

Seraph

which layout are u using linear or relative – Dannielledannon

this will help, take a look #10464671 – Ciprian

@Don'tBenegative - its inside Linear layout – Seraph

try with relative layout gravity etc works on relative only – Dannielledannon

@Don'tBenegative-Relative layout is also generating same result. – Seraph

Answer 1

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

Minotaur

Outstanding. Wonderful solution. – Perry

Answer 2

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.

Viscera

Answer 3

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

Slippery

in that case RadioGroup functionality does not works ie. we are able to select all radio buttons – Seraph

not getting can you please give me a reason for this why its not working – Slippery

It will get center aligned but it will allow multi select radio button whareas i want single select radio button functionality – Seraph

@Seraph The Radio button is used to select only once from Radio group. If you want to select multiple selection you have to integrate checkbox – Slippery

@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 – Seraph

@Seraph sorry i got your point use same your layout just put the background and put button="@null" and in background put drawable selector – Slippery

Let me know if you need any help @Seraph – Slippery

In that case drawable scaled to fit entire weight – Seraph

@Seraph you can fix height and weight with drawable Go this link #19164128 – Slippery

Good but you set all center with background after removing weight. Kindly accept answer or comment – Slippery

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

@EthicsDev- I have used android:button="@null" & android:drawableTop="@drawable/radio_button_selector" & not used background – Seraph

Answer 4

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"

Seraph

Answer 5

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

Carollcarolle

Answer 6

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>

Cuvette

@Seraph what layout you are using – Cuvette

Its inside linear layout – Seraph

@Seraph check the updated answer try to add a linear layout before the radio group and add gravity for the linear layout. – Cuvette

in that case RadioGroup functionality does not works ie. we are able to select all radio buttons – Seraph

@Seraph then try to give radio button set checked as false in xml – Cuvette

@Seraph give checked false for all radio buttons in xml – Cuvette

Answer 7

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

Thanks

Comptom

Text and radiobutton both has android:layout_weight="1" – Seraph

Answer 8

Replace your Linearlayout to Relativelayout

Because gravity may not work on Linear layout

Again

Answer 9

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

Limpet

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
    }

Prescience