Add margin above top ListView item (and below last) in Android

147
votes

This is a pretty fine question about the layout of items in a ListView in Android.

I have an activity with a title bar at the top and a ListView taking up the rest of the screen. I want my ListView to appear with 10dp padding on the left, right and top, but when you scroll the ListView up, I want it to cover the top 10dp padding before disappearing under the faded edge. Similarly, when you scroll to the bottom, the last list item should appear with 10dp between the bottom of the last list item and the actual bottom of the screen (if you're wondering why, it's because there's a pretty background image that I want poking out around the ListView).

I've tried adding padding to the ListView itself, but then when you scroll the list it disappears under the edge of the padding.

I'm from a web dev background, and the analogy would be to add margin above the first list item (and below the last list item).

5
androidandroid-layoutandroid-listview
specify just the left & right margin... try to paste your xml here, so I can see the problem edit : wait, you mean.... You want the top and bottom padding got scrolled too? – Tek Yin
I can't specify the left and right margin - there is no 'margin' in Android layout, only padding. But, yes, I do want the top and bottom padding to get scrolled - that's a good way to describe it. – Mick Byrne
I already tried several method, and still failed.. I have some tricks to do, but it will more difficult to do though... you put 2 custom object to the list item on first and last position.. and use custom adapter to detect the item and draw it differently (narrow height & transparent) – Tek Yin
Yeah... that's what I've been thinking to fall back on as well. But there's all sorts of complications with that, as I'll then need to set the background color in the list items, not the view, which means I'll then need to manually hack in some effect to show when you've tapped things. Thanks for your help anyway... – Mick Byrne
Good news.. I got the solution... you can use addHeaderView(View v) on ListActivity.. just call getListView(). addHeaderView(capView) and getListView(). addHeaderView(botView) make sure it called before initialize the content of the list eg. setListAdapter(adapter); – Tek Yin

5 Answers

400
votes

You wrote:

I've tried adding padding to the ListView itself, but then when you scroll the list it disappears under the edge of the padding.

Set ListView's clipToPadding attribute to false. This will enable padding around the ListView and scrolling to the end of the layout (and not only to the edge of the padding).

An example:

<ListView
    android:id="@+id/list_view"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="@android:color/transparent"
    android:dividerHeight="10.0sp"
    android:padding="16dip"
    android:clipToPadding="false"/>

android:clipToPadding is an XML attribute of ViewGroup, the base class for layouts and views containers.

The related method call is:

public void setClipToPadding (boolean clipToPadding)
20
votes
Space padding = new Space(this);
padding.setHeight(20); // Can only specify in pixels unfortunately. No DIP :-(

ListView myListView = (ListView) findViewById(R.id.my_list_view);

myListView.addHeaderView(padding);
myListView.addFooterView(padding);

myListView.setAdapter(myAdapter);

The above ListView will have a header and footer padding of 20 pixels.

10
votes

Appendage to @Jakobud's answer...

My listView was already making use of the android:divider/android:dividerHeight properties to create transparent gaps between listView items. This allowed me to simply add the android:headerDividersEnabled and android:footerDividersEnabled properties and set the Header and Footer views to new View(Activity.this).

Slight simplification for cases where you already have dividers setup in the listView.

2
votes

My solution using a ListFragment, based on the solutions by @Jakobud and @greg7gkb.

ListView listView = getListView();
listView.setDivider(null);
listView.setDividerHeight(getResources().getDimensionPixelSize(R.dimen.divider_height));
listView.setHeaderDividersEnabled(true);
listView.setFooterDividersEnabled(true);
View padding = new View(getActivity());
listView.addHeaderView(padding);
listView.addFooterView(padding);
1
votes

@Gunnar Karlsson's answer is good, but has an issue of cell views being recycled prematurely when completely behind the padding, but not yet fully off the screen. Setting clipToPadding=false is responsible for this and may or may not be fixed in a future version of android.(When using clipToPadding in ListView's the items get recycled prematurely)

I have a nice simple solution with no side effects:

  1. Add an outer (Linear or Relative) Layout to your cell_design.xml
  2. On this outer Layout add padding (i.e. 10dip) to create a "margin" around the whole cell. (N.B. only padding will work, not margin on the outer layout)
  3. On the ListView set android:dividerHeight="-10dip", the opposite of what is around the cell

Compared to the other answer, there is no need to set the divider colour. The padding at the topmost and bottommost cells will be present, and the negative divider will prevent double height dividers in between.