How to evenly space out radiobuttons in Android?

Question

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> 

Answer 1

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.

Answer 2

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>