Trying to align radio buttons in RadioGroups in compound layout
android, android-layout
Solution
You can fully build your layout without hard coding the `100dp`.
By making few tricks with `android:layout_alignLeft`, `android:layout_alignBottom` and `android:layout_alignTop` you can solve your problem with the `RadioGroups`.
But, you will have to change the XML a little bit, because it will work only if both `RadioGroups` are in the same `RelativeLayout`.
This is your code with all adjustments:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioGroup
android:id="@+id/radio_group_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="200dp"
android:orientation="vertical" >
<RadioButton
android:id="@+id/lengthMetres"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="20dp"
android:text="metres" />
<RadioButton
android:id="@+id/lengthFeet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="20dp"
android:text="feet" />
</RadioGroup>
<ImageView
android:id="@+id/lengthImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="@id/radio_group_1"
android:layout_alignTop="@id/radio_group_1"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/radio_group_1"
android:layout_alignTop="@id/radio_group_1"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/lengthImage"
android:gravity="center"
android:paddingLeft="15dp"
android:text="@string/length" />
<RadioGroup
android:id="@+id/radio_group_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/radio_group_1"
android:layout_below="@id/radio_group_1"
android:orientation="vertical" >
<RadioButton
android:id="@+id/distanceMile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="20dp"
android:text="mile" />
<RadioButton
android:id="@+id/distanceKM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="20dp"
android:text="km" />
<RadioButton
android:id="@+id/distanceNM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="20dp"
android:text="NM" />
</RadioGroup>
<ImageView
android:id="@+id/lengthImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="@id/radio_group_2"
android:layout_alignTop="@id/radio_group_2"
android:layout_centerVertical="true"
android:paddingLeft="10dp"
android:src="@drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/radio_group_2"
android:layout_alignTop="@id/radio_group_2"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/lengthImage"
android:gravity="center"
android:paddingLeft="15dp"
android:text="@string/length" />
</RelativeLayout>
And this is how it looks:
I think, that this solution in your specific case is applicable, but for some kind of generic solution, when you have more then two RadioGroups this solution will have to be improved.
Hope this approach could be useful for you :)
Problem
I have this layout fragment. Why aren't the two radio groups aligned? I've tried with and without margin and padding in the `RadioGroup`. I'm assuming that `marginLeft` is measured from the left edge of the radio button itself and `marginRight` is measured from the right of the longest radio button caption. The documentation is not clear in this respect. Note that I've deleted any lines not related to layout (e.g. text). All text sizes are `15sp`. ``` <RelativeLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/lengthImage" android:layout_centerVertical="true" android:paddingLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text="@string/length" android:layout_centerVertical="true" android:layout_toRightOf="@id/lengthImage" android:paddingLeft="15dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioGroup android:orientation="vertical" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_marginLeft="200dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/lengthMetres" android:paddingRight="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioButton android:id="@+id/lengthFeet" android:paddingRight="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RadioGroup> </RelativeLayout> <RelativeLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/distanceImage" android:layout_centerVertical="true" android:paddingLeft="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text="@string/distance" android:layout_centerVertical="true" android:layout_toRightOf="@id/distanceImage" android:paddingLeft="15dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioGroup android:orientation="vertical" android:layout_marginLeft="200dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/distanceMile" android:paddingRight="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioButton android:id="@+id/distanceKM" android:paddingRight="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioButton android:id="@+id/distanceNM" android:paddingRight="20dp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </RadioGroup> </RelativeLayout> ``` [EDIT] Solution. Hard coding the RadioGroup widths to 100dp works perfectly. I hate doing this though. I bet there's a combination of resolution, density and orientation out there that will break this!