How to evenly space out radiobuttons in Android?
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
ormatch_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.
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>
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>