How to make Android's RelativeLayout work correctly?

Question

The title is a little provocative, but I observe some behaviour thats inexplicable for me.

I have three sets of views, each having one TextView tvX and one Spinner spX, X=A,B,C. The textview is a title, or prompt, for the spinner, so I want the Spinner layout_toRightOf it's respective TextView. Since they refer to each other, I also layout_alignBaseline the Spinner to the TextView. This works properly. Now I want the three sets stacked such that the TextViews have aligned right edges (each has a trailing colon, these should be aligned), and the Spinners have aligned left edges. So in the stack of

  +----------+----------+
  |      tvA:|spA       |
  +----------+----------+
  |      tvB:|spB       |
  +----------+----------+
  |      tvC:|spC       |
  +----------+----------+

the B and C views get attributes referring to A and B, respectively; namely layout_below and layout_alignLeft/Right.

It now happens that tvB and tvC have texts that are longer than tvA's. I would have guessed the RelativeLayout indents tvA such that there is space for the longer texts of tvB and tvC, and such that they are right-aligned. What happens instead is that the whole left column gets the width of tvA's text, and tvB and tvC get broken into two lines each. I tentatively tried to rearrange things to make tvB the anchor, and layout_above tvA. This results in tvA completely disappearing. It would not be a proper solution anyway, as in another language the relative lengths of the texts might be the other way! If I add characters to tvA to make it longest, tvB and tvC do not get broken anymore, but the colons still do not get aligned! In fact it looks as if tvB gets centered beneath tvA, and tvC centered beneath tvC.

It sort of looks best if I left-align the tvX and right-align the spX. But even in that situation something strange happens: The Spinners do no obey the attribute layout_width="wrap_content" anymore, they expand instead to fill all the space left over by the TextViews. The ragged alignment in the middle still looks bad, that's why I want the alignment to happen in the middle.

Android Studio displays the resulting layout while editing the XML, and it also displays the Views edges if the cursor is in the XML definition of the View. There I can nicely observe how the layout hints in the attributes get ignored! On the actual phone the same thing happens.

Here is the XML code:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/indented_margin"
        android:layout_marginBottom="5dp">

        <TextView
            android:id="@+id/device_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:text="@string/settings_sb_device" />

        <Spinner
            android:id="@+id/device"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/device_title"
            android:layout_alignBaseline="@id/device_title" />

        <TextView
            android:id="@+id/can_speed_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_below="@id/device_title"
            android:layout_alignRight="@id/device_title"
            android:text="@string/settings_sb_speed" />

        <Spinner
            android:id="@+id/can_speed"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/can_speed_title"
            android:layout_alignBaseline="@id/can_speed_title"
            android:layout_alignLeft="@id/device"
            android:entries="@array/can_speeds" />

        <TextView
            android:id="@+id/baudrate_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_below="@id/can_speed_title"
            android:layout_alignRight="@id/can_speed_title"
            android:text="@string/settings_sb_baudrate" />

        <Spinner
            android:id="@+id/baudrate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:spinnerMode="dropdown"
            android:layout_toRightOf="@id/baudrate_title"
            android:layout_alignBaseline="@id/baudrate_title"
            android:layout_alignLeft="@id/can_speed"
            android:entries="@array/baudrates" />
    </RelativeLayout>

I have searched the sets of available attributes for the involved views, but could not find a clue. Can anybody explain this behaviour? What have I overlooked?

Answer 1

Use a GridLayout for this with columnCount as 2

For example:

<android.support.v7.widget.GridLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                app:alignmentMode="alignBounds"
                app:columnCount="2"
                app:orientation="vertical"
                >

For the left side Tv + colon, use a RelativeLayout or even a LinearLayout will work for that matter.

              <LinearLayout
                    android:gravity="center"
                    android:orientation="horizontal"
                    app:layout_column="0"
                    app:layout_columnWeight="1"
                    app:layout_gravity="fill_horizontal|fill_vertical"
                    app:layout_row="0">

                    <TextView 
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        tools:text="Label"
                        android:maxLines="2"
                        android:ellipsize="end"
                        android:textColor="@color/black"/>

                   <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        tools:text=":"
                        android:textColor="@color/black"/>
           </LinearLayout>

Answer 2

It seem to me that a GridLayout would fit your needs way better...