How to align Radio button at the center of the screen

Question

I am using Radio buttons as tab in my application.

I have loaded images for it, but they are aligning towards left side. how to make them align at center.

enter image description here

This is how my XML file looks

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost" 
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">

    <FrameLayout android:id="@android:id/tabcontent"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="1" 
      android:padding="20dip" 
      android:background="#fff"/>

    <RadioGroup android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:orientation="horizontal"
      android:checkedButton="@+id/allcontacts"
      android:id="@+id/contactgroup">


      <RadioButton android:id="@+id/allcontacts" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1"/>

      <RadioButton
          android:id="@+id/categories"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_weight="1"/>

      <RadioButton android:id="@+id/favourites" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1" />

    </RadioGroup>

    <TabWidget android:id="@android:id/tabs"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="0" android:visibility="gone" />
  </LinearLayout>
</TabHost>

I want tabs to come at the bottom of screen. If i use tab widget, tabs looks above so.. — Naruto, May 05 '12 at 17:58
Never thought of that, great idea. I'm glad I asked. Another trick to stuff into my notes. :) — Barak, May 05 '12 at 18:00
I was having a similar problem and solved in a different way. Check: http://stackoverflow.com/questions/36433050/making-custom-radiobutton-with-image-on-center — wviana, Apr 05 '16 at 20:49

score 26 · Answer 1 · answered Jul 27 '13 at 08:44

I had similar issue before, I figure it out, so I try to explain it for you.

runtime screenshot

above is my app screenshot, as you can see, I also did the same, I had a menu align screen bottom, they're a RadioGroup and three RadionButton inside it, I want each menu icon align center for RadionButton, the shadow image(9-patch) shown together when Button check event trigger.
At first, I used android:button attribute refers to a drawable selector, the selector has two drawable state between check and uncheck, but I cannot align the menu icon center and make the shadow image fill up by RadionButton, they looks like it :

enter image description here

I tried included android:layout_gravity=center and android:gravity=center with the RadionButton, but it also didn't got effect. after that, my workmate told me the android:button attribute is refers to foreground rather than background, then I use android:background instead of android:button and it worked, below is my code :

<RadioGroup android:layout_width="match_parent" android:layout_height="60dp"
        android:orientation="horizontal" android:background="@drawable/menu_bg">

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null" android:checked="true"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

</RadioGroup>

the menu_item_selector is important thing because it had gravity setting :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_item_layer_list" android:state_checked="true" />
    <item android:drawable="@drawable/menu_item_layer_list" android:state_pressed="true" />
    <item>
        <bitmap android:src="@drawable/menu_item_off" android:gravity="center" />
    </item>
</selector>

cause I had two images to draw when user turn Button state is checked, the shadow background image and icon active state image, so I used layer-list to implement it, the active icon also had gravity setting, below is menu_item_layer_list code :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_bg_pressed" />
    <item>
        <bitmap android:src="@drawable/menu_item_on" android:gravity="center" />
    </item>
</layer-list>

I don't know that solution was perfect or not, because I always implement it as a view and draw myself. But I think Android SDK supplied more convenient component let's finish work with xml configuration, we should be learn and use it.

best solution by far! especially the android:gravity="center" thingy in the tags for your selector was a real new thing for me! thumbs up! — baske, May 22 '14 at 13:09

score 20 · Answer 2 · edited Nov 20 '20 at 12:45

You can use empty views to fill upp the space evenly between the radio buttons. In this case I have 3 radio buttons that vill look centered, nice and tidy.

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

    <View
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="" />

    <View
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:checked="true"
        android:gravity="center"
        android:text="" />

    <View
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="" />

    <View
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</RadioGroup>

Nice solution! But I used instead of TextView a View and for the most right and left view android:layout_weight="0.5". — Harry, May 19 '14 at 06:52

Barak · Accepted Answer · 2012-05-05T20:01:02.577

14

Try android:gravity="center" in the xml for each RadioButton.

I see you're wrap_content, so theoretically that shouldn't do anything, but it looks like the icons are evenly divided, maybe the RadioGroup divides the space evenly so using android:gravity will have an effect.

Worth a shot I guess.

EDIT

Try this:

  <RadioButton android:id="@+id/allcontacts" 
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:marginLeft="20dp" 
  android:gravity="center"
  android:layout_weight="1"/>

You will have to play with the android:marginLeft="20dp" to get it properly centered, but that'll let you do what you're looking to do. I copied your layout and tested this time, so I know it works! :)

edited May 05 '12 at 20:01

answered May 05 '12 at 18:03

Barak

16,318
9
52
84

Got it, check my re-revised answer. Use what I propsed previously and add `android:marginLeft="#dp"` with # being whatever is necessary to move the image to the center. – Barak May 05 '12 at 19:10
Yes Barak, It worked... Thanks for your help... Hav gr8 day :) – Naruto May 05 '12 at 20:26
Barak, I think specify layout_marginLeft is too absolutely, did you agree me? – VinceStyling Jul 27 '13 at 06:37

score 4 · Answer 4 · answered Jul 12 '13 at 04:18

You could put your RadioButton inside FrameLayout and center them:

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray_percent"
    android:orientation="horizontal" >

    <FrameLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content" 
         android:layout_weight="1">

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"

            android:button="@drawable/rb_temp1"
            android:checked="true"
            android:gravity="center" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content" 
         android:layout_weight="1">

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"

            android:button="@drawable/rb_temp1"
            android:gravity="center" />
    </FrameLayout>

</RadioGroup>

but then how you will access property of radio group to select only single child. — CoDe, Nov 03 '14 at 07:47
To reiterate @Shubh 's problem, if you go with this method of centering radiobuttons, the default functionality which handles allowing only one radiobutton to be selected at a time will NOT work. You will have to manually implement handling of allowing one button to be checked at a time. So, I would recommend finding another way of centering radiobuttons if this default functionality matters to you. — w3bshark, Oct 12 '16 at 18:02

score 3 · Answer 5 · answered Sep 23 '14 at 17:57

3

Put android:gravity="center" on RadioGroup Tag. This Works.

answered Sep 23 '14 at 17:57

gustavomcastro

155
1
9

score 2 · Answer 6 · answered Oct 15 '13 at 08:59

2

I tried all of the above and it doesn't work.

I had found a better solution which i would like to share. Set your button to @null ; then add the drawable to android:drawableTop or any other type of position. This will enable us to set the drawables to other position of the radioButton. add some padding or drawablePaddingso that it will not stick to any side of the button/text.

android:background="@drawable/background_paint"
android:drawableTop="@drawable/shape"
android:button="@null"

answered Oct 15 '13 at 08:59

Lee Yi Hong

1,310
13
17

You were right! Just i added a specific **height** + **android:minHeight** + **android:paddingTop**! = Center Image It looks nice! Thank you! – Cristofer Sep 28 '17 at 20:28
this was exactly what I was looking for – M. Smith Nov 30 '19 at 22:53

score 1 · Answer 7 · answered May 05 '12 at 17:26

1

Try adding an android:layout_gravity="center_horizontal"on your RadioGroup.

answered May 05 '12 at 17:26

Amokrane Chentir

29,907
37
114
158

score 1 · Answer 8 · answered Jan 20 '14 at 03:18

in my case, my radio button contents were aligned right. I let them aligned center by set android:background be some value, such as @null or some color. below were my layout

<LinearLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" >

    <RadioGroup
        android:paddingTop="5dp"
        android:id="@+id/radioGroupAsTab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical|center_horizontal"
        android:gravity="center_vertical|center_horizontal"
        android:background="@color/v3_header_bg"
        android:fadingEdge="none"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rbDiagnose"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/v3_tab_diagnose"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_health_maintenance"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbHistory"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_history"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_history"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbChart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_chart"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_graph"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbCyclopedia"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_encyclopedia"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_encyclopedia"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbSetting"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_setting"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_info"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />
    </RadioGroup>
</LinearLayout>

Urvi Jasani · Answer 9 · 2015-04-27T06:32:09.527

1

 <RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >
       <RadioButton
        android:id="@+id/rb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"/>

        <RadioButton
        android:id="@+id/rb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two"/>
 </RadioGroup>

edited Apr 27 '15 at 06:32

answered Apr 27 '15 at 06:23

Urvi Jasani

11
2

I think this is the better solution out of all of them. Setting the width to `wrap_content` or to a specific consistent width allows the RadioButtons to be only as wide as they need to be and for the RadioGroup to center the entire set of RadioButtons. Great job! – w3bshark Oct 12 '16 at 18:17

score 0 · Answer 10 · answered Sep 10 '13 at 15:40

0

i used this line in my RadioGroup and it is working fine!

android:gravity="center|left"

answered Sep 10 '13 at 15:40

bofredo

2,348
6
32
51

score 0 · Answer 11 · answered Jul 31 '15 at 12:55

0

It was in the opposite side in my case and I just put android:paddingLeft="0dp" and it worked so you should try android:paddingRight="0dp" for radiobuttons

answered Jul 31 '15 at 12:55

kostikus

21
2

score 0 · Answer 12 · answered Aug 16 '22 at 18:23

You can try this:

<RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/like"
            android:checked="true"
            android:layout_weight="1"
            android:gravity="right"
            android:layout_gravity="center"
            android:background="@drawable/like_selecter"
            android:button="@android:color/transparent"
            android:drawableLeft="@drawable/ic_baseline_thumb_up_select"
            android:paddingLeft="10dp"/>

How to align Radio button at the center of the screen

12 Answers12

Linked