ListView dividers on top and bottom of the ListView Item

Question

I am using Android Listview and and I want a 1px divider on both the side of the listview item means on the top and bottom of two different colours. But the problem is that I am not getting login for showing divider in bottom. I tried android:layout_below but it is shown as invalid.

This is the Listview code

<ListView
        android:id="@+id/myphnview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@drawable/dividerheight"
        android:background="#E9EAEC"
        android:clickable="true"
        android:divider="@drawable/dividerheight" >
    </ListView>

This is the xml file I am using for top border. dividerheight.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="line" >
            <stroke android:color="#c6c7c9" />

            <size android:height="1px" />
        </shape>
    </item>


</layer-list>

This is the layout of my row

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rowlayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#E9EAEC"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" 
            android:background="@drawable/ic_launcher"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_weight="1" >

        <TextView
            android:id="@+id/file_name"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:layout_margin="5dp"
            android:text="Hello Android "
            android:textColor="@android:color/black"
            android:textSize="20dp" >
        </TextView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

        <ImageView
            android:id="@+id/share_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:background="@drawable/ic_launcher"/>
    </LinearLayout>



</LinearLayout>

I think you want to set two different colors on top and bottom of list item.Then tried to set devider from getView() of list adapter like if(position % 2 == 0){ ((ListView)parent).setDivider(getResource().getDrawable(R.drawable.deviderheight)); }else{} — Devu Soman, Apr 23 '13 at 11:04
@Devu Soman Means I want white colour at top and black color at bottom. — Nikhil Agrawal, Apr 23 '13 at 11:06
refer http://stackoverflow.com/questions/6544723/how-to-change-the-divider-color-in-the-listview and use #ffffff for white color and #000000 for black — Devu Soman, Apr 23 '13 at 11:09

score 18 · Accepted Answer · edited May 20 '15 at 14:32

18

There are several ways to achieve this. One simple way would be to hide dividers completely (set divider width to 0 or divider to null) in the list and just have each list item to contain a line at the top and a line at the bottom. Consider this xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentTop="true"
        android:background="@android:color/white" />

    <LinearLayout ...>
        <!-- this is your current list item LinearLayout -->
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/black" />

</RelativeLayout>

As you are already using a custom adapter, it's just a matter of using an XML like above for your list item layout in the getView method of the Adapter. This will produce list items 60dp high with a white line along the top and a black line along the bottom.

edited May 20 '15 at 14:32

Pygmay

75
2
9

answered Apr 23 '13 at 11:16

Aleks G

56,435
29
168
265

thats also a very good solution but my layou is not relative but linear – Nikhil Agrawal Apr 23 '13 at 11:47
@Nikhil Add your linear layout where I say "the rest of your list item layout goes here". Alternatively, post the layout of your list item and I'll update my answer accordingly. – Aleks G Apr 23 '13 at 12:12
@Aleka G I am updating post with my row design – Nikhil Agrawal Apr 23 '13 at 13:06
@Nikhil I updated my answer to work with your existing list item. – Aleks G Apr 23 '13 at 13:21
Shouldn't that be a RelativeLayout for layout_alignParentToBottom to work? – ingh.am May 23 '13 at 13:11

score 4 · Answer 2 · answered Apr 23 '13 at 11:02

It seems that you want to place lines(borders) at the top and bottom of the listview. If that is what you want, I would suggest the below code.

Prepare a line in res/values/styles.xml in the below way.

<style name="Line">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">2px</item>
    <item name="android:layout_marginLeft">10dp</item>
    <item name="android:layout_marginRight">10dp</item>
    <item name="android:background">@drawable/line_gradient</item>
</style>

res/drawable/line_gradient.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<gradient
    android:startColor="@color/white"
    android:endColor="@color/white"
    android:centerColor="@color/blue"
    android:useLevel="false"
    android:type="linear"
    android:angle="0"/>
</shape>

Finally use the line where ever you need in the below way.

 <View
        style="@style/Line"/>
<ListView
................
................
/>
 <View
        style="@style/Line"/>

This is the code that I have used in my app, but you can customize or colorize whatever way you need. Even you can create a view directly above and below the listview. But creating a separately in styles.xml would make it use at several places without code redundancy.

Then you might need to use that view before and after your custom row(list item) in your custom row xml file and making the divider height to 0dp. — Kanth, Apr 23 '13 at 11:26

score 2 · Answer 3 · answered Apr 23 '13 at 11:03

2

I dont think is there a way to do this. But You can add footerview and headerview for your ListView. I think it will bring what you want.

For example:

TextView tv1 = new Textview(this);
tv1.setBackgroundResource(R.drawable.dividerheight);

and

listview.addHeaderView(totalExpense);
listview.addFooterView(totalExpense);

I hope this will help you.

answered Apr 23 '13 at 11:03

Gunaseelan

14,415
11
80
128

But I want to give it for every item in the list view. – Nikhil Agrawal Apr 23 '13 at 11:04
every listview means what? Do you mean every list item? – Gunaseelan Apr 23 '13 at 11:06
then you can use `devider`. What is the problem with your `devider`? – Gunaseelan Apr 23 '13 at 11:08
@Gunasseelen How to give it at bottom. I tried layout_below attribute but its not working. Maximum people has used that way only. – Nikhil Agrawal Apr 23 '13 at 11:11

ListView dividers on top and bottom of the ListView Item

3 Answers3