Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align radio button to center

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

enter image description here 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.

like image 678
Ragini Avatar asked Dec 28 '16 07:12

Ragini


People also ask

How do I center align a radio button in CSS?

Just remove all styles but text-align:center and you got it. No need to display: inline-block. Simplest solution, but does not keep radio labels spaced apart with margin. But gets to the point that all that is needed is to text-align the fieldset.

How do you align a button to the center?

We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.

How do I align two radio buttons horizontally in HTML?

To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.


3 Answers

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 enter image description here

like image 188
Asharali V U Avatar answered Sep 23 '22 05:09

Asharali V U


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

Sample Layout Screen

like image 28
EthicsDev Avatar answered Sep 21 '22 05:09

EthicsDev


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.

like image 27
Ben Avatar answered Sep 23 '22 05:09

Ben