CODEWITHSUNDEEP
androidandroid-layoutlistview
Nikhil Agrawal
Nikhil Agrawal

Reputation: 26548

ListView dividers on top and bottom of the ListView Item

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>

Upvotes: 8

Views: 25755

Answers (3)

Aleks G
Aleks G

Reputation: 57346

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.

Upvotes: 18

Gunaseelan
Gunaseelan

Reputation: 15525

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.

Upvotes: 2

Kanth
Kanth

Reputation: 6751

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.

Upvotes: 4

Related Questions