RelativeLayout and View.GONE issue (mixed elements)

Question

i have a RelativeLayout and six elements that can "hide" (View.GONE) if a number is empty, in order to save space. When some value comes empty i hide the number and the "title" of that number. All elements mix on the screen, as you can see on this image:

This is the code:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/largeImageView"
    android:id="@+id/containerLayout"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="@string/phone"
        android:id="@+id/phoneTitleTextView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="20dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text"
        android:id="@+id/homePhoneTextView"
        android:layout_below="@+id/phoneTitleTextView"
        android:layout_alignParentLeft="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/home"
        android:id="@+id/homeTitleTextView"
        android:layout_below="@+id/phoneTitleTextView"
        android:layout_alignLeft="@+id/workTitleTextView"
        android:layout_alignStart="@+id/workTitleTextView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text"
        android:id="@+id/workPhoneTextView"
        android:layout_below="@+id/homePhoneTextView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/work"
        android:id="@+id/workTitleTextView"
        android:layout_below="@+id/homeTitleTextView"
        android:layout_alignLeft="@+id/mobileTitleTextView"
        android:layout_alignStart="@+id/mobileTitleTextView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text"
        android:id="@+id/mobilePhoneTextView"
        android:layout_below="@+id/workPhoneTextView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/mobile"
        android:id="@+id/mobileTitleTextView"
        android:layout_alignTop="@+id/mobilePhoneTextView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

I think i should go with a LinearLayout, but when i try them it gets worst. Thanks in advance!

Answer 1

The problem is that the each entry in the right column depends on the entry below it to determine its left alignment. If you set the bottom row, or even the middle one, to GONE, suddenly the entry can't find the view below it, and aligns itself all the way to the left by default.

I understand why you're doing this, since "Mobile" is the longest string and you want them to align to where "Mobile" starts, but this isn't a robust approach. Localization, for instance, could make "Mobile" no longer the shortest string, and break your logic.

When I make layouts similar to this, I usually end up having the elements in the right column layout_alignParentLeft="true" and then I put a big left margin on it. But that doesn't quite achieve the "aligned left based on the width of largest element in right column" behavior that you're looking for. I think T.M is on the right track with TableLayout, though I haven't used them enough myself to get into specifics.