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.

Answer 1

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.

Answer 2

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.