Use a vertical line in a ListView item

Question

I'm trying to show a vertical line in an android ListView item. I define it in the XML for the cell but when I preview it in the ListView it doesn't appear.

I understand this is an issue because I see alot of questions on here, but don't see any real answer.

The XML is pretty standard:

Cell:

<?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="match_parent"
  android:background="@color/appWhite" >

  <View android:layout_width="5dp"
      android:layout_height="match_parent"
      android:background="@color/appGreen"
      android:layout_alignParentLeft="true" />

  <RelativeLayout
      android:id="@+id/cell_trip_info_container"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@+id/vertical_bar" >

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cell_trip_name"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:textColor="#2c3e50"
        android:paddingLeft="10dp"
        android:text="adfadf" />
    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cell_trip_country"
        android:layout_below="@+id/cell_trip_name"
        android:textColor="#2c3e50"
        android:paddingLeft="10dp"
        android:text="adfadf" />
  </RelativeLayout>

  <RelativeLayout android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:id="@+id/whole_container"
    android:layout_alignParentRight="true" >

    <RelativeLayout android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:background="@color/appGreen"
      android:id="@+id/cell_trip_date_box"
      android:layout_alignTop="@+id/update_buttons"
      android:layout_alignBottom="@+id/update_buttons"
      android:padding="20dp" >

      <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cell_tripstart_date"
        android:layout_centerHorizontal="true"
        android:textColor="#fff" />
      <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cell_date_thru"
        android:text="@string/thru"
        android:layout_below="@+id/cell_tripstart_date"
        android:layout_centerHorizontal="true"
        android:textColor="#fff" />
      <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/cell_tripend_date"
        android:layout_below="@+id/cell_date_thru"
        android:textColor="#fff"
        android:layout_centerHorizontal="true" />

    </RelativeLayout>    

    <RelativeLayout android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:id="@+id/update_buttons"
      android:visibility="gone"
      android:layout_toRightOf="@+id/cell_trip_date_box"
      android:background="#e9e9e9"
      android:padding="20dp" >

      <ImageView android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/cell_button_edit_trip"
        android:src="@drawable/slide_edit"
        android:adjustViewBounds="true"
        android:contentDescription="@string/content_description" />

      <ImageView android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/cell_button_delete_trip"
        android:src="@drawable/slide_delete"
        android:layout_toRightOf="@+id/cell_button_edit_trip"
        android:adjustViewBounds="true"
        android:contentDescription="@string/content_description" />

    </RelativeLayout>   
  </RelativeLayout>
</RelativeLayout>

Please include all of the XML for your ListView item. – Evan Bashir Nov 20 '13 at 20:24 — Evan Bashir, Nov 20 '13 at 20:24

score 4 · Answer 1 · edited May 23 '17 at 11:50

4

I found the cause and the obvious solution/workaround on another post Here

Basically RelativeLayouts for whatever reason won't play nice with the "match_parent" height setting in a ListView Item. One of the answer to the post recommended using a LinearLayout instead. So I just created a new File with the parent view being a LinearLayout. I then created a RelativeLayout child and tossed everything else in there.

It worked fine this time, easily allowing me to create my vertical rule.

edited May 23 '17 at 11:50

Community

1
1

answered Nov 21 '13 at 21:34

jacobduron

431
9
20

so stupid but work in fact. don't forget to set the inner RelativeLayout layout_height as match_parent or you will end up with the same result. – rmpt Mar 09 '19 at 18:35

score 0 · Answer 2 · answered Nov 20 '13 at 20:49

0

In your cell_trip_info_container RelativeLayout you have

android:layout_toRightOf="@+id/vertical_bar"

You dont have a View named vertical_bar

Add that ID to your vertical bar view and you should be good to go

<View
      android:id="@+id/vertical_bar"
      android:layout_width="5dp"
      android:layout_height="match_parent"
      android:background="@color/appGreen"
      android:layout_alignParentLeft="true"  />

answered Nov 20 '13 at 20:49

dymmeh

22,247
5
53
60

http://imgur.com/n8XaatK.jpg is what I get using the xml you provided and only changing what I said (plus changing strings and colors that I dont have) – dymmeh Nov 20 '13 at 20:58
Yeah that's how it will display in a the preview for the layout. If I actually run the code it doesn't show up though. Also if I preview it in the ListView preview it won't show up. Frustrating... – jacobduron Nov 20 '13 at 21:01
@jacobduron - Are you doing anything in code to change the view ? – dymmeh Nov 20 '13 at 21:16
Just populating TextViews. – jacobduron Nov 21 '13 at 16:12

score -1 · Answer 3 · answered Nov 20 '13 at 20:24

-1

change RelativeLayout to VerticalLayout

answered Nov 20 '13 at 20:24

Lukasz

41
6

Use a vertical line in a ListView item

3 Answers3