How to add space between items in android listview?

Question

I would like to add padding between EACH item in a listview, but I would like to keep the default divider as I think it is aesthetically pleasing. Anything wider looks ugly.

I currently have:

<com.example.practice.MyListView
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:drawSelectorOnTop="false"
    android:layout_below="@id/name" />

Now, I have tried using a transparent divider, and this succeeds at getting the spacing I want, but then I don't see the little line. And if I don't use a transparent divider than I have a huge thick ugly line. I want to keep the default line shown, and just add some spacing on the top part of each listview item.

This will only add padding to the top and bottom of the entire listview. I want it to occur within each listview item. — worm, May 15 '13 at 03:11
If you have a separate layout representing a row, try to add padding to that. — Voicu, May 15 '13 at 03:17
We are not talking about your listview up there. we are talking about the layout for your row in the list. If you use android.layout.simple.... then write your own layout and add the padding there. — Hoan Nguyen, May 15 '13 at 03:20
Sorry, it is R.layout.simple_list_item_1... do you have an example of writing my own layout? — worm, May 15 '13 at 03:25
Just create a LinearLayout with one textview. that is what simple_list_item_1 is. — Hoan Nguyen, May 15 '13 at 03:28

daniel_c05 · Accepted Answer · 2013-05-15T03:33:30.677

You wouldn't be able to achieve what you want as simple as that then.

Step one: Set the divider as transparent, and make the height a tad larger:

<ListView
    android:id="@+id/list"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="@android:color/transparent"
    android:dividerHeight="8dp"/>

Step Two: In order to achieve the 'little line' effect, you can add a custom drawable as the list view item background, say the list view item is defined as 'list_item.xml':

<?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"
<-- Add a Custom background to the parent container of the listview items -->
android:background="@drawable/list_item_selector"
android:orientation="vertical" >
<-- Rest of the item layout -->
</LinearLayout>

Of course, that item can be anything you like it to be, mine is:

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

<item>
  <shape 
    android:shape="rectangle">
        <stroke android:width="1dp" android:color="@color/bg_gray" />
        <solid android:color="@android:color/white" />
    </shape>
</item>
<item android:bottom="1dp"> 
    <shape 
        android:shape="rectangle">
        <stroke android:width="1dp" android:color="#FFDDDDDD" />
        <solid android:color="#00000000" />
    </shape>
</item>
</layer-list>

But that would then disable the 'Holo Selector' effect, where whenever you click, or highlight an item on the listview, there is a Holo Blue color drawn over it, that's why if you notice on the list item background we didn't use a layer list drawable, we used a selector named 'list_item_selector'.

Here's the selector, which uses the layer list drawable when not pressed, and uses a Holo-blue color when pressed:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item 
    android:state_pressed="false"
    android:drawable="@drawable/list_item_bg2"        
    />
 <item android:state_pressed="true"
    android:drawable="@color/holo_blue"
    />
</selector>

EDIT for Comment

Absolutely possible, you can define a set height for list view items, however, it is recommended to set a minimum height, rather than a predefined height that never changes.

Say this is my list item layout:

<?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" >

<ImageView
    android:id="@+id/grid_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/grid_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:gravity="center_vertical"
    android:layout_toRightOf="@+id/grid_image"
    android:minHeight="48dp"
    android:padding="8dp"
    android:textIsSelectable="false" />

</RelativeLayout>

All needed would be,

Step One: Define the min height, or max height, as you prefer, in the dimens.xml file contained in the values/ folder. Why? Because the height should definitely change based on the layout, and you can define different dimens.xml for each device density.

in the dimens.xml, say:

<resources>

<!-- List Item Max and Min Height -->

    <dimen name="list_item_min_height">48dp</dimen>
    <dimen name="list_item_max_height">96dp</dimen>
    <dimen name="list_item_set_height">64dp</dimen>

</resources>

And then use whichever value for the parent LinearLayout of you list item's layout.

<?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="@dimen/list_item_min_height" >

And that's it for that topic, now to center the text, it's even simpler:

If you are using a TextView and is wrapped into a RelativeLayout, use: android:layout_centerVertical="true"
If you are using a LinearLayout, use: android:layout_gravity="center_vertical"

and couple that with: NOTE This only works if you didn't set the height to wrap_content, otherwise it is irrelevant.

  android:gravity="center_vertical"

Hope that helps.

I like the idea. How about adding a default size for each item? And making the text go into the center? Would that be possible? — worm, May 15 '13 at 03:21
How about setting a 9-patch as divider drawable and use a divider height appropriate for the desired spacing? Wouldn't that be a *much* more simple and elegant solution? That way you don't have to muck around with the selector and item backgrounds. — MH., May 15 '13 at 04:28

score 1 · Answer 2 · answered Dec 08 '13 at 12:51

I don't know if I understand your question precisely. If you want the divider to be transparent so you see a peace of the background between each ListView so it gives a kind of 3D effect when scrolling. You could do it this way:

In your list_item xml give the LinearLayout the background color you want for example:

<LinearLayout 
android:id="@+id/listItem"
android:layout_width="match_parent"
android:layout_height="match_parent"    
android:padding="4dip"
android:orientation="horizontal"
android:background="#FFFFFF"
>

Then give your ListView a background color like this:

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fragmentListView"
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:divider="@android:color/transparent"
android:dividerHeight="8dip"
android:background="#0000FF"
android:cacheColorHint="@android:color/transparent"
android:drawSelectorOnTop="true"
/>

Now your ListView scrolls over your background

I hope this is what you wanted.

score 1 · Answer 3 · answered Aug 28 '15 at 08:47

Also one more way to increase the spacing between the list items is that you add an empty view to your adapter code by providing the layout_height attribute with the spacing you require. For e.g. in order to increase the bottom spacing between your list items add this dummy view(empty view) to the end of your list items.

<View
android:layout_width="match_parent"
android:layout_height="15dp"/>

So this will provide a bottom spacing of 15 dp between list view items. You can directly add this if the parent layout is LinearLayout and orientation is vertical or take appropriate steps for other layout. Hope this helps :-)

score 1 · Answer 4 · answered Mar 14 '17 at 08:19

you can simply use divider

see the following example

  <ListView
    android:id="@+id/activity_main_listview_data"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@android:color/transparent"
    android:dividerHeight="10dp"
    />

here, in android:divider you can set color or make it transparent and in dividerHeight for add spce between items.

score 0 · Answer 5 · answered Dec 13 '13 at 08:10

This is a solution for those of you who do not want the divider to be visible and still want to add more space. To get rid of the divider completely, set it to @null and set the dividerHeight to 0dp. Here is a generic ListView of mines.

<ListView
    android:id="@+id/myListView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:layout_alignLeft="@+id/txtMake"
    android:layout_below="@+id/txtMake"
    android:fadeScrollbars="false"
    android:scrollbarThumbVertical="@drawable/scroll_bar_color"
    android:scrollbarStyle="outsideInset" >
</ListView>

Next, go to the xml file in which you use the adapter with to populate your listview. Go to your container (Example RelativeLayout...) and simply add in the following.

    android:layout_marginTop="15dp"

This will actually add space for those of you who are not using the divider. Unlike the padding which just increases the box size, this will increase the distance between each item.

score 0 · Answer 6 · edited Jun 21 '17 at 12:37

Inside the ListView tag in XMLfile add a dividerHeight tag and give it a value(the spacing you want between your list items).

It would provide you with suitable space between the list items.

Code:

<ListView
    android:id="@+id/listid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:divider="@drawable/divi"
    android:dividerHeight="60dp"></ListView>

Now create a drawable XML file (in this case name is divi). Inside it add a stroke tag and give it a width and that would do.

Code:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke
        android:width="1dp"
        android:color="#000000"
         />
</shape>

score 0 · Answer 7 · edited May 04 '20 at 09:44

0

android:layout_width="match_parent"
android:textColor="@color/colorPrimary"
android:textSize="30dp"
android:layout_height="wrap_content"

Complete Code Here

edited May 04 '20 at 09:44

m02ph3u5

3,022
7
38
51

answered May 04 '20 at 07:55

pankaj maurya

1

How to add space between items in android listview?

7 Answers7