Trying to align radio buttons in RadioGroups in compound layout

Question

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!

Answer 1

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 :)

Answer 2

Looks like you should use android:layout_width="match_parent" and android:layout_marginLeft="200dp"(not android:marginLeft) for your RadioGroups.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/lengthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/lengthImage"
        android:paddingLeft="15dp"
        android:text="length" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="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="meters" />

        <RadioButton
            android:id="@+id/lengthFeet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="feets" />
    </RadioGroup>
</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/distanceImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/distanceImage"
        android:paddingLeft="15dp"
        android:text="distance" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="200dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/distanceMile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:paddingRight="20dp"
            android:text="foo" />

        <RadioButton
            android:id="@+id/distanceKM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="boo" />

        <RadioButton
            android:id="@+id/distanceNM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="moo" />
    </RadioGroup>
</RelativeLayout>