31

I have three radiobuttons and I want to evenly space them across the screen. When I use android:layout_weight="1", the buttons are stretched out across the screen. So how would I have the same amount of space in between each of them that also scales on different screen sizes?

<RadioGroup 
        android:id="@+id/auton_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:layout_below="@id/clear_fields"
                >
        <RadioButton
            android:id="@+id/auton_radio_1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"

            />
        <!-- android:layout_marginRight="380dp"  --> 
        <RadioButton
            android:id="@+id/auton_radio_2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"


            />
        <RadioButton
            android:id="@+id/auton_radio_3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"
            />

    </RadioGroup>
rasen58
  • 4,672
  • 8
  • 39
  • 74

3 Answers3

54

If you want them to share screen width equally you need to set android:layout_width="match_parent" on each View. Your xml would become:

<RadioGroup
    android:id="@+id/auton_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/clear_fields"
    android:orientation="horizontal"
    android:paddingLeft="10dp" >

    <RadioButton
        android:id="@+id/auton_radio_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/auton_col" />
    <!-- android:layout_marginRight="380dp" -->

    <RadioButton
        android:id="@+id/auton_radio_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/auton_col" />

    <RadioButton
        android:id="@+id/auton_radio_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/auton_col" />
</RadioGroup>

To elaborate, layout_weight can be used in two ways.

  • If you have multiple views in a vertical linear layout and you want the last one to take up all the remaining space, you can set their heights to wrap_content and give the last view a weight of 1.
  • If you want all views to share the available space, set all width/heights to 0dp or match_parent and give each view the same weight value. They will share the space equally.

To have your background drawable scale, make a new xml that goes in your drawable/ folder that looks like this

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:src="@drawable/auton_col" />

Name it whatever you like (e.g. auton_col_scale.xml) and reference that drawable as your background.

James McCracken
  • 15,488
  • 5
  • 54
  • 62
  • 1
    Thanks, it worked, but for some reason the `layout_weight` parameter makes my `RadioButtons`s twice as long. http://i.imgur.com/7PZfm1j.png They are normally only half that width. – rasen58 Mar 15 '13 at 23:16
  • you should make `auton_co1` a scale-able bitmap. Answer is edited with example – James McCracken Mar 16 '13 at 05:29
  • 2
    @rasen58 set the `android:layout_width` of the radio buttons to `0dp` – Henry Mar 16 '13 at 05:34
  • @JamesMcCracken That is amazing! Thank you! Does making it a bitmap automatically scale it? – rasen58 Mar 17 '13 at 03:16
  • Doing it this way gives you all sorts of options. You can read up on it [here](http://developer.android.com/guide/topics/resources/drawable-resource.html#Bitmap) in the XML Bitmap section. – James McCracken Mar 17 '13 at 19:10
  • What is auton_col? I am having this problem with padding between radiogroup buttons but nothing is working – Kala J Oct 22 '14 at 00:27
  • @JamesMcCracken 1-To have this situation vertically, shoudl I change the only "android:orientation" of the RadioGroup? Is that enough? 2-How to put them in center vertically? they didn't use whole vertical space. – Dr.jacky Jun 11 '16 at 05:11
  • In my case I realized that the horizontal radio group requires `android:layout_width="match_parent"`. However - follow up problem: how are the radio circles and text centered ? Using `android:gravity="center_horizontal"` for the radioButton only centers the text - how whack is that ?! – Someone Somewhere Dec 05 '17 at 23:33
  • I posted my version of the answer – Someone Somewhere Dec 05 '17 at 23:45
9

I noticed that using layout weights for the RadioButton's caused them to be aligned off-center, eventhough they definitely each shared 50% of the screen (they were left-aligned). Setting a gravity for each RadioButton caused only the text to be centered /facepalm

The XML below shows how to horizontally align two radiobuttons (could be any views) and center them:

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

                    <Space
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>

                    <RadioButton
                        android:id="@+id/radioyes"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/yes"
                        android:checked="false"/>

                    <Space
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>

                    <RadioButton
                        android:id="@+id/radiono"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/no"
                        android:checked="false"/>

                    <Space
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>

                </RadioGroup>
Someone Somewhere
  • 23,475
  • 11
  • 118
  • 166
1

set width to match parent of each layout and then add weight jsut like linear layout.

<RadioGroup
            android:id="@+id/radio_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/bigMarginStart"
            android:layout_marginTop="@dimen/smallMarginTop"
            android:layout_marginEnd="@dimen/baseMarginEnd"
            android:orientation="horizontal"
            android:weightSum="3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <RadioButton
                android:id="@+id/all_"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/smallMarginTop"
                android:layout_weight="1"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:checked="true"
                android:gravity="center"
                android:paddingLeft="@dimen/bigPaddingStart"
                android:paddingTop="@dimen/smallPaddingTop"
                android:paddingRight="@dimen/bigPaddingStart"
                android:paddingBottom="@dimen/smallPaddingBottom"
                android:text="All" />

            <RadioButton
                android:id="@+id/future_"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/smallMarginStart"
                android:layout_marginTop="@dimen/smallMarginTop"
                android:layout_marginEnd="@dimen/smallMarginEnd"
                android:layout_weight="1"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:gravity="center"
                android:paddingLeft="@dimen/bigPaddingStart"
                android:paddingTop="@dimen/smallPaddingTop"
                android:paddingRight="@dimen/bigPaddingStart"
                android:paddingBottom="@dimen/smallPaddingBottom"
                android:text="Future" />

            <RadioButton
                android:id="@+id/direct_"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/smallMarginTop"
                android:layout_weight="1"
                android:background="@drawable/radio_flat_selector"
                android:button="@android:color/transparent"
                android:gravity="center"
                android:paddingLeft="@dimen/bigPaddingStart"
                android:paddingTop="@dimen/smallPaddingTop"
                android:paddingRight="@dimen/bigPaddingStart"
                android:paddingBottom="@dimen/smallPaddingBottom"
                android:text="Direct" />

        </RadioGroup>
Ali Raza
  • 33
  • 1
  • 9