RelativeLayout & a vertical divider aligned on the right

Question

Having trouble getting a simple RelativeLayout going. I'm building a ListView composed of rows which should look like this:

    +-----------------------------+--------------+
    | Line 1                      | Small button |
    | Line 2, more text           |              |
    | Line 3, even more text      |              |

Here's my first attempt - unfortunately the vertical divider does not show up.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:descendantFocusability="blocksDescendants">

    <TextView
        android:id="@+id/lineOne"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:textColor="@color/wallet_holo_blue_light"
        android:textSize="18dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/lineTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/lineOne"
        android:textSize="16dp" />

    <TextView
        android:id="@+id/lineThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/lineTwo"
        android:textSize="14dp" />

    <ImageButton
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@android:color/transparent"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:onClick="doSomething"
        android:src="@drawable/arrow_down" />

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:layout_toLeftOf="@id/myButton"
        android:background="?android:attr/listDivider" />

</RelativeLayout>

EDIT: I almost solved my own problem with the code below.

Now my layout looks good...

+-----------------------------+--------------+
| Line 1                      | Small button |
| Line 2, more text           |              |
| Line 3, even more text      |              |

... except when the first line for instance is too long - in such case the divider and the button don't show up:

+-----------------------------+--------------+
| Line 1, way way way way too long which     |
| wraps                                      |
| Line 2, more text                          |
| Line 3, even more text                     |

Could you kindly help me make the final adjustment?

Thanks a lot!

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:descendantFocusability="blocksDescendants"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/lineOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/wallet_holo_blue_light"
            android:textSize="18dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/lineTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16dp" />

        <TextView
            android:id="@+id/lineThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dp" />

    </LinearLayout>

    <!-- As per http://stackoverflow.com/questions/6992804/how-to-right-align-widget-in-horizontal-linear-layout-android -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="horizontal">

        <View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:background="?android:attr/listDivider" />

        <ImageButton
            android:id="@+id/myButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:src="@drawable/arrow_down" />

    </LinearLayout>

</LinearLayout>

I've looked in your file and it should be alright. I've only looked in the preview, but in my case the vertical divider is shown. You don't see any divider in your preview? Or is it also only in the preview? — mrtn, Jun 06 '15 at 00:09
You also should consider to set `layout_height` to `wrap_content` since they are listview items. — mrtn, Jun 06 '15 at 00:14
Thanks for looking into this! I do see the divider in the preview, but not on my phone. — user3321335, Jun 06 '15 at 00:15

score 1 · Accepted Answer · answered Jun 10 '15 at 16:11

+-----------------------------+--------------+
| Line 1                      | Small button |
| Line 2, more text           |              |
| Line 3, even more text      |              |

If you want to achieve a layout like this then first think which are the fixed lengths and which are variable. I assume divider and small button will always have small width and only line width will change. So in this case you can set button and divider width and give rest of the width to line. You can do that by using layout_weight="1" to your Layout that will get remaining left over space.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:descendantFocusability="blocksDescendants"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        //your lines here
    </LinearLayour>

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="?android:attr/listDivider" />
    <ImageButton
        android:id="@+id/myButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:src="@drawable/arrow_down" />
</LinearLayour>

RelativeLayout & a vertical divider aligned on the right

1 Answers1