How to set space between listView Items in Android

Question

I tried to use marginBottom on the listView to make space between listView Item, but still the items are attached together.

Is it even possible? If yes, is there a specific way to do it?

My code is below

<LinearLayout
android:id="@+id/alarm_occurences"
android:layout_width="fill_parent" 
android:orientation="vertical"
android:layout_height="fill_parent"
android:background="#EEEEFF"
xmlns:android="http://schemas.android.com/apk/res/android">

<ListView
android:id="@+id/occurences"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

My custom List item:

<com.android.alarm.listItems.AlarmListItem
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:background="@drawable/alarm_item_background"
android:layout_marginBottom="10dp"    
>
<CheckedTextView     
    android:id="@android:id/text1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorMultiple"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:padding="10dp"

/>

</com.android.alarm.listItems.AlarmListItem>

How can I make spacing between list items in this case?

score 864 · Accepted Answer · edited Dec 17 '15 at 15:33

864

@Asahi pretty much hit the nail on the head, but I just wanted to add a bit of XML for anyone maybe floating in here later via google:

<ListView android:id="@+id/MyListView"
  android:layout_height="match_parent"
  android:layout_width="match_parent"
  android:divider="@android:color/transparent"
  android:dividerHeight="10.0sp"/>

For some reason, values such as "10", "10.0", and "10sp" all are rejected by Android for the dividerHeight value. It wants a floating point number and a unit, such as "10.0sp". As @Goofyahead notes, you can also use display-independent pixels for this value (ie, "10dp").

edited Dec 17 '15 at 15:33

bryant1410

5,540
4
39
40

answered Mar 15 '11 at 09:38

Nik Reiman

39,067
29
104
160

25

This doesn't help if you also want to show a divider without stretching it – Sojurn Mar 05 '13 at 13:30
5

FYI - can be done through code - getListView().setDividerHeight(10) – AnhSirk Dasarp Aug 23 '13 at 09:20
2

or android:divider="@null" – kevin Mar 21 '14 at 10:27
@Sojurn I'd have tried a 9-patch if I needed to some something like that. – Sufian Jan 07 '15 at 12:22
@Sojurn check [my answer](http://stackoverflow.com/a/27821602/1276636). It adds padding but doesn't stretch the divider. – Sufian Jan 07 '15 at 14:27
Cannot see the divide line if use this approach. – zionpi May 26 '15 at 02:55
You should almost certainly *not* be using sp as the height of a divider, unless you're showing text as part of the divider. 10dp (or a reference to a dimen) would be the correct value to use. – karl Dec 01 '15 at 21:00

score 63 · Answer 2 · edited Sep 29 '14 at 08:29

63

Perhaps divider or dividerHeight property of the ListView can solve your problem.

edited Sep 29 '14 at 08:29

Amit Anand

1,225
1
16
40

answered Feb 13 '11 at 13:58

Asahi

13,378
12
67
87

idunnololz · Answer 3 · 2015-01-21T17:40:22.233

Although the solution by Nik Reiman DOES work, I found it not to be an optimal solution for what I wanted to do. Using the divider to set the margins had the problem that the divider will no longer be visible so you can not use it to show a clear boundary between your items. Also, it does not add more "clickable area" to each item thus if you want to make your items clickable and your items are thin, it will be very hard for anyone to click on an item as the height added by the divider is not part of an item.

Fortunately I found a better solution that allows you to both show dividers and allows you to adjust the height of each item using not margins but padding. Here is an example:

ListView

<ListView
android:id="@+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

ListItem

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Item"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Indeed a better solution. Thanks. – Bigyellowbee Jun 25 '18 at 18:00 — Bigyellowbee, Jun 25 '18 at 18:00

score 16 · Answer 4 · answered Jun 07 '12 at 03:10

16

You should wrap your ListView item (say your_listview_item) in some other layout e.g LinearLayout and add margin to your_listview_item:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <your_listview_item
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
    ...
    ...
    />
</LinearLayout>

This way you can also add space, if needed, on the right and left of the ListView item.

answered Jun 07 '12 at 03:10

Vasu

4,862
8
42
48

3

i wanted left/right margin so your answer was helpful for me but I don't like the idea of just wrapping another layout only for margin purpose – 2cupsOfTech Aug 01 '12 at 08:12
There are a few ways.. and that's the bad one in terms of layouting performance.. try to think at lists with tens (or hundreds) of items :) – andrea.rinaldi Mar 24 '14 at 09:33
@andrea.spot it wouldn't matter for lists with tens or hundreds of items unless that was how many items were visible on the screen at once. ListView uses view recycling (if you've implemented your adapter correctly). – ataulm Sep 02 '14 at 13:29
1

This will not work if the ListView items will have a background – vovahost Nov 14 '14 at 13:55

score 12 · Answer 5 · edited Sep 27 '16 at 13:10

My solution to add more space but keep the horizontal line was to add divider.xml in the res/drawable folder and define line shape inside:

divider.xml

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

    <stroke
        android:width="1px"
        android:color="@color/nice_blue" />

</shape>

then in my list I reference my divider as follows:

<ListView
    android:id="@+id/listViewScheduledReminders"
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_marginBottom="@dimen/mediumMargin"
    android:layout_weight="1"
    android:divider="@drawable/divider"
    android:dividerHeight="16.0dp"
    android:padding="@dimen/smallMargin" >

</ListView>

notice the android:dividerHeight="16.0dp" by increasing and decreasing this height I am basically adding more padding on top and bottom of the divider line.

I used this page for reference: http://developer.android.com/guide/topics/resources/drawable-resource.html#stroke-element

score 10 · Answer 6 · edited Nov 17 '18 at 00:56

10

For my application, i have done this way

 <ListView
    android:id="@+id/staff_jobassigned_listview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@null"
    android:dividerHeight="10dp">

</ListView>

just set the divider to null and providing height to the divider did for me.

Example :

android:divider="@null"

or

android:divider="@android:color/transparent"

and this is result

edited Nov 17 '18 at 00:56

Agilanbu

2,747
2
28
33

answered Dec 02 '15 at 08:13

Sagar Pawar

465
4
26

I think, better is `android:divider="@android:color/transparent"`. – CoolMind Aug 04 '16 at 17:19

score 7 · Answer 7 · answered Jul 12 '13 at 20:07

If you want to show a divider with margins and without stretching it - use InsetDrawable (size must be in a format, about which said @Nik Reiman):

ListView:

<ListView
    android:id="@+id/listView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:cacheColorHint="#00000000"
    android:divider="@drawable/separator_line"
    android:dividerHeight="10.0px"/>

@drawable/separator_line:

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="5.0px"
    android:insetRight="5.0px"
    android:insetTop="8.0px"
    android:insetBottom="8.0px">

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <gradient
            android:startColor="@color/colorStart"
            android:centerColor="@color/colorCenter"
            android:endColor="@color/colorEnd"
            android:type="linear"
            android:angle="0">
        </gradient>
    </shape>
</inset>

score 7 · Answer 8 · answered Feb 03 '14 at 12:59

7

You can use:

android:divider="@null"
android:dividerHeight="3dp"

example:

<ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" android:layout_gravity="center_horizontal"
        android:dividerHeight="3dp"
        android:divider="@null" android:clickable="false"/>

answered Feb 03 '14 at 12:59

mspapant

1,860
1
22
31

Combining null with [list item layout](http://stackoverflow.com/a/16824435/5437165) produces the best effect – Prof Jun 23 '16 at 02:59

score 5 · Answer 9 · answered Sep 07 '12 at 20:36

I realize that an answer was already been selected, but I just wanted to share what ended up working for me when I ran into this issue.

I had a listView where each entry in the listView was defined by its own layout, similar to what Sammy posted in his question. I tried the suggested approach of changing the divider height, but that did not end up looking all too pretty, even with an invisible divider. After some experimentation, I simply added an android:paddingBottom="5dip" to the last TextView layout element in the XML file that defines individual listView entries.

This ended up giving me exactly what I was trying to achieve via the use of android:layout_marginBottom. I found this solution to produce a more aesthetically pleasing result than trying to increase the divider height.

Rahul Raina · Answer 10 · 2018-02-21T09:43:35.003

Instead of giving margin, you should give padding:

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:layout_alignParentTop="true"
    android:padding="5dp" >

</ListView>

OR

<ListView
    android:id="@+id/listView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:paddingTop="2dp"
    android:divider="@android:color/green"
    android:dividerHeight="4dp"
    android:paddingLeft="1dp"
    android:paddingRight="1dp"
    android:paddingBottom="2dp"
    android:paddingStart="0dp"
    android:paddingEnd="0dp" >

</ListView>

score 2 · Answer 11 · edited May 23 '17 at 12:34

2

Simplest solution with OP's existing code (list items already have got padding) is to add following code:

listView.setDivider(new ColorDrawable(Color.TRANSPARENT));  //hide the divider
listView.setClipToPadding(false);   // list items won't clip, so padding stays

This SO answer helped me.

Note: You may face a bug of the list item recycling too soon on older platforms, as has been asked here.

edited May 23 '17 at 12:34

Community

1
1

answered Jan 07 '15 at 14:25

Sufian

6,405
16
66
120

1

you can set divider to null and set dividerHeight to whatever you like. – Andrew G Jun 02 '15 at 08:03
1

@Andy I think it will also remove the padding between items. Which will be creating the issue which the OP wanted to solve.. – Sufian Nov 21 '17 at 09:20

score 2 · Answer 12 · answered Apr 03 '17 at 12:23

you just need to make background transparent of list divider and make height according to your needed gap.

<ListView 
         android:id="@+id/custom_list"
         android:layout_height="match_parent"
         android:layout_width="match_parent"
         android:divider="#00ffffff"
         android:dividerHeight="20dp"/>

score 1 · Answer 13 · answered Jun 02 '15 at 08:01

<ListView
    android:clipToPadding="false"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:dividerHeight="10dp"
    android:divider="@null"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</ListView>

and set paddingTop, paddingBottom and dividerHeight to the same value to get equal spacing between all elements and space at the top and bottom of the list.

I set clipToPadding to false to let the views be drawn in this padded area.

I set divider to @null to remove the lines between list elements.

score 1 · Answer 14 · answered Aug 28 '15 at 08:33

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 15 · answered Oct 17 '19 at 06:28

1

This will help you add the divider height.

 getListView().setDividerHeight(10)

If you want to add a custom view, you can add a small view in the listView item layout itself.

answered Oct 17 '19 at 06:28

Akanshi Srivastava

1,160
13
24

score 0 · Answer 16 · edited Sep 27 '16 at 13:09

In order to give spacing between views inside a listView please use padding on your inflate views.

You can use android:paddingBottom="(number)dp" && android:paddingTop="(number)dp" on your view or views you're inflate inside your listview.

The divider solution is just a fix, because some day, when you'll want to use a divider color (right now it's transparent) you will see that the divider line is been stretched.

score 0 · Answer 17 · answered Dec 16 '15 at 14:24

I found a not-so-good solution for this in case you are using a HorizontalListView, since dividers don't seem to work with it, but I think it'll work either way for the more common ListView.

Just adding:

<View
android:layout_marginBottom="xx dp/sp"/>

in the bottomest View of the Layout you inflate in the adapter class will create spacing between items

score 0 · Answer 18 · answered Jun 13 '17 at 23:59

A lot of these solutions work. However, if all you want is to be able to set the margin between items the simplest method I have come up with is to wrap your item - in your case the CheckedTextView - in a LinearLayout and put your margin formatting for the item in that, not the root-layout. Be sure to give this wrapping layout an id and create it along with your CheckedTextView in your adapter.

That's it. In effect, you are instantiating the margin at the item level for the ListView. Because the ListView does not know about any item layout - only your adapter does. This basically inflates the part of the item layout that was being ignored before.

score 0 · Answer 19 · answered Jul 09 '20 at 01:31

0

Maybe you can try to add android:layout_marginTop = "15dp" and android:layout_marginBottom = "15dp" in the outermost Layout

answered Jul 09 '20 at 01:31

kungmaben

1

How to set space between listView Items in Android

19 Answers19

Linked