How do I draw a vertical line inside an expandable content RelativeLayout

I'm fronting a problem to draw a vertical line inside a relative layout as a list item layout like this:

layout's height is changes from item to item, here is the code:

<?xml version="1.0" encoding="utf开发者_如何转开发-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

<Button android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentLeft="true" 
        android:layout_marginLeft="3dip" 
        android:layout_marginTop="3dip" 
        android:text="Button"></Button>

<TextView android:id="@+id/title" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_alignTop="@+id/button1" 
          android:layout_toRightOf="@+id/button1"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:textColor="@color/black" 
          android:text="TextView"></TextView>

<TextView android:id="@+id/expandable_text" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_below="@+id/title" 
          android:layout_toRightOf="@+id/button1"
          android:textAppearance="?android:attr/textAppearanceSmall"
          android:textColor="@color/black" 
          android:text="Some expandable text"></TextView>

<View android:id="@+id/vertical_line"
      android:layout_width="5dip" 
      android:layout_height="fill_parent"
      android:layout_alignParentRight="true"
      android:layout_marginRight="4dip"
      android:background="@color/orange"/>

</RelativeLayout>

The problem is that the vertical line is not visible / working, any suggestions?

Thanks in advance!

p.s

note that this problem has been solved when doing it with LinearLayout, but I had performances issues due to nested views in the layout, and the only solution is in using RelativeLayout, also, the TextViews lines is changing from item to item.

Solution #1

After searching for a while, and using the suggested answers posted here (thanks..)

I've found a solution, which seems to be pretty ugly, but due to problems with filling a

RelativeLayout using "fill_parent" height, while the layout height itself sets to "wrap_content", it seems to be a reasonable option.

The idea is to takes the uppermost view (the button) and the bottom most view (the expandable text), and use them as anchors alignments to the height of the vertical line.

as you can see in this code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white">

<Button android:id="@+id/button1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentTop="true" 
        android:layout_alignParentLeft="true" 
        android:paddingTop="3dip" 
        android:layout_marginTop="3dip" 
        android:text="Button"></Button>

<TextView android:id="@+id/title" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_alignTop="@+id/button1" 
          android:layout_toRightOf="@+id/button1"
          android:paddingTop="3dip"
          android:textAppearance="?android:attr/textAppearanceMedium"
          android:textColor="@color/black" 
          android:text="TextView"></TextView>

<TextView android:id="@+id/expandable_text" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_below="@+id/title" 
          android:layout_toRightOf="@+id/button1"
          android:paddingBottom="10dip"
          android:textAppearance="?android:attr/textAppearanceSmall"
          android:textColor="@color/black" 
          android:text="Some expandable text"></TextView>

<View android:id="@+id/vertical_line"
      android:layout_width="5dip" 
      android:layout_height="fill_parent"
      android:layout_alignParentRight="true"
      android:layout_alignTop="@id/list_item_task_statusbutton"
      android:layout_alignBottom="@id/list_item_task_description"
      android:layout_marginRight="4dip"
      android:background="@color/orange"/>

</RelativeLayout>    

Note for the changes in the views, especially the replacement of "android:marginXXXX=value" with "android:paddingXXXX=value" for fixing the views positions.

Thanks.. and Good Day!

Ok I had the same issue and took me an hour to find out. You have to put your RelativeLayout into a LinearLayout. So your code should look like this.

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

 <LinearLayout
    android:layout_height="fill_parent"
    android:layout_width="fill_parent">
    <View
    android:id="@+id/drawerVerticalLine"
    android:layout_width="10dip"
    android:layout_height="fill_parent"
    android:background="#7fa9c5"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">
         <Button android:id="@+id/button1" 
               android:layout_width="wrap_content" 
               android:layout_height="wrap_content" 
               android:layout_alignParentTop="true" 
               android:layout_alignParentLeft="true" 
               android:paddingTop="3dip" 
               android:layout_marginTop="3dip" 
               android:text="Button"></Button>
        ...
      </RelativeLayout>
 </LinearLayout>
</LinearLayout>

And by padding or aligning the drawerVerticalLine you get the result you want.

Remove the android:orientation="vertical" line from RelativeLayout tag. Then I think the line should be visible.

Use android:layout_alignParentTop="true" and android:layout_alignParentBottom="true" to extend the size of the layout. android:orientation isn't used by RelativeLayout and will be ignored.

As a logic You can use the TableLayout, And in that you can use view for seperating the each row with horizontal line. . . For more information and Tablelayout see this: Click me