Android - How to show a vertical line on the background of a ListView (and according to row height)?

Question

How to show a vertical line on the background, such as the one highlighted in blue on the image below?

Answer 1

You can use transparent 9-patch image as a background for you list view.

For creating nine-patch image please follow this: http://developer.android.com/tools/help/draw9patch.html

Answer 2

I got it.

I've persisted in trying to fix the problem of the Updated section of my question (based on the solution initially proposed by @Hellboy) and I got results! So, how I achieved an answer to my own question, I decided to put as an answer.

The first step was to configure the XML file such as the code below.

Part of the final XML corresponding to the row layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:id="@+id/linearlayoutservicerow">

    <RelativeLayout 
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:layout_marginLeft="15dp">

        <View
            android:layout_width="4dp"
            android:id="@+id/verticallineview"
            android:layout_height="match_parent"
            android:background="#3399CC"
            android:gravity="center"
            android:layout_centerHorizontal="true"/>

        <RelativeLayout 
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

            <ImageView
                android:id="@+id/user_image"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:gravity="center"
                android:background="@android:color/holo_blue_light" >
            </ImageView>

        </RelativeLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layoutotherrowelements">
    </LinearLayout>

</LinearLayout>

Explaining the XML:

Here we have the parent layout (linearlayoutservicerow) and inside it: a RelativeLayout (proposed by @HellBoym, with the structured discussed in the final of my question) and the LinearLayout to other elements of the row (layoutotherrowelements). Summarizing... What I modified?

The initial code resulted in flattened images because the RelativeLayout (parent) did not consider the ImageView marginTop and marginBottom, so the image was flattened vertically. (And if we let without margin, the RelativeLayout would mantain the same size and the vertical line would not appear on the top and on the bottom of image.) We must have a space between the ImageView and the RelativeLayout initially proposed, in order to show the line, but if it does not recognize the margin, how to create this space?

I just "encapsulated" the ImageView in another RelativeLayout (inside that parent RelativeLayout), and changed the margin parameters of the ImageView to padding parameters of this capsule RelativeLayout.

The problem of the last row

It results in the layout with a line background, but we still have the problem of the last row. In fact, this row is different, and in this case, it must have its height modified to not have the same parent's height. I decided to put at least, the ImageView's height and it worked! Remember to convert the value in dp to pixel, because the function getLayoutParams has all parameters expressed in pixels.

So, in the Adapter, we put the following code:

if(position==(getCount()-1)){
View my_line = (View)
    row.findViewById(R.id.verticallineview);
    //40dp, this is the ImageView height
    int dpsize = 40;
    //convert the height in dp unit to pixel (because the parameter is in px)
    int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpsize, context.getResources().getDisplayMetrics()); 
    my_line.getLayoutParams().height = px;
}

And that is it!!!

It is worth mentioning that @dinesh sharma proposed other interesting alternative using 9-patch, that I will try later.

I did not want to use image as background (that is why I started asking about drawable), because my final goal was to improve this solution to make all dynamic (including the vertical line color), and I believe with image I could not achieve it. But in my original question I did not mention that, so if I have success with this other approach, I will accept it as correct answer.

Thanks for all your help! In my current solution I used the @Hellboy's clue of using a RelativeLayout and a View, and the @dinesh sharma's clue to verify if it is the last row of the ListView. I hope this answer and the others helps more people with similar problems.

Answer 3

Now verified answer

your image in item layout:

<RelativeLayout
    android:id="@+id/rl"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="@drawable/m"
    android:paddingBottom="10dp"
    android:paddingTop="10dp" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

three bg nine patch images for drawable

Handling in Adapter:

    if(position==0)
        holder.rl.setBackgroundResource(R.drawable.b);
    if(position==(getCount()-1))
        holder.rl.setBackgroundResource(R.drawable.t);

Finaly got output:

Answer 4

You can replace your ImageView with something like this:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="4dp"
        android:layout_height="match_parent"
        android:background="@color/navy_blue"
        android:layout_centerHorizontal="true"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/image"/>
</RelativeLayout>

and of course in your first and last element you need to manipulate the height of the View and align it to Top or Bottom