Margin on ListView items in android

Question

I'm trying (in vain) to add margins to my ListView items. I have tried adding margin values to my RelativeLayout below but no matter what I do all I seem to get is a 1px line between each item.

What I really would like is to have rounded corners on each item, a 1px black border and a 3-5px margin left, top, and right but right now I'll settle for just a margin around each item :-)

How do I achieve my goals? Just the margin for now... ;-)

Here's what I have:

UPDATE: I have updated the xml below removing main layout and fragment layout. I have also updated the ListView item layout to what I have now which is closer to what I want but still not perfect. Screenshot added as well

listview item layout xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/matchMargin"
android:paddingRight="@dimen/matchMargin"
android:paddingTop="@dimen/matchMargin" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cfcfcfcf" >

    <include
        android:id="@+id/matchKampstart"
        layout="@layout/kampstart_layout" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/matchKampstart"
        android:layout_marginTop="@dimen/belowKampstartMargin" >

        <ImageView
            android:id="@+id/tournamentImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="2dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/tournamentImageViewContentDescription"
            android:gravity="left"
            android:src="@drawable/sofabold_launcher" />

        <ImageView
            android:id="@+id/homeTeamImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="2dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/homeTeamImageViewContentDescription"
            android:src="@drawable/sofabold_launcher" />

        <TextView
            android:id="@+id/homeTeam"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="2dp"
            android:text="@string/home"
            android:textSize="14sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/dash"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="2dp"
            android:gravity="center"
            android:text="@string/dash"
            android:textSize="12sp"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/awayTeamImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginRight="2dp"
            android:adjustViewBounds="true"
            android:contentDescription="@string/awayTeamImageViewContentDescription"
            android:src="@drawable/sofabold_launcher" />

        <TextView
            android:id="@+id/awayTeam"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:text="@string/away"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/matchKampstart"
        android:layout_marginTop="@dimen/belowKampstartMargin" >

        <ImageView
            android:id="@+id/tvChannelImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="false"
            android:contentDescription="@string/tvChannelImageViewContentDescription"
            android:gravity="right"
            android:src="@drawable/sofabold_launcher" />
    </LinearLayout>

</RelativeLayout>

</RelativeLayout>

This gives me the following where you'll notice a very small line to the right and left for each item. That I would also like to get rid of.

enter image description here

Creating rounded corners and a border isn't too hard, this [Developer's Guide](https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape) explains some of the details. — Sam, Mar 11 '13 at 15:44
You shouldn't need to set margins programmatically. It should be enough through XML. Did you try to add margins in your items' relativeLayout? (and remove dat `getlayoutParams` / `setlayoutParams` in your `getView()`) — AMerle, Mar 11 '13 at 16:45
Yes. And I've succeeded somewhat. I have added an extra RelativeLayout to my ListView item layout so that I now have a RelativeLayout inside a RelativeLayout. Will update question. — CJe, Mar 11 '13 at 16:59
I just posted an answer that uses an extra layout, but it seems you discovered this on your own. :) — Sam, Mar 11 '13 at 17:14
Isn't the small line your divider? if it is, just remove the divider or set the same color as your bg. — AMerle, Mar 11 '13 at 17:26

score 70 · Accepted Answer · answered Mar 11 '13 at 17:12

70

I'm not great with layouts, but I have noticed in the past that ListView rows often ignore LayoutParams. I have no idea where this happens or if it's possible to override, I do know you can easily work around it by adding another layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:background="#990000ff" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="#9900ff00"
        android:paddingLeft="10dp" >

        <TextView
            android:id="@+id/text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#99ff0000" />
    </LinearLayout>

</LinearLayout>

Typically layouts that only have one child can be removed, but as you can see this one serves a purpose:

Screen Shot

The outer-most layout is blue, the TextView is red, and the green is the extra layout that allows you to add some extra spacing. Notice the difference between padding (the green on the left) and margin (no green on the right). You have clearly stated that you want to use margins (android:layout_margin) but your code clearly uses padding (android:padding) so I included both.

answered Mar 11 '13 at 17:12

Sam

86,580
20
181
179

Thanks Sam. I think I have done more or less as you describe (adding an extra layout). AFAICS you have the same problem with the lines to the right (and probably left as well). Any idea how to get rid of those? – CJe Mar 11 '13 at 17:19
2

By "very small line" do you mean [these](http://i.stack.imgur.com/KnXaV.png)? Those are the dividers you can remove them by changing `android:divider` to an empty or transparent image, or possibly setting `android:dividerHeight="0dp"`. – Sam Mar 11 '13 at 17:22
The reason for having padding on the outer RelativeLayout is equal to having margin on the inner RelativeLayout... isn't it? I'll try to reverse it. – CJe Mar 11 '13 at 17:22
Yes :-) those are the ones I mean :-) – CJe Mar 11 '13 at 17:23
1

I forgot to mention [`divider`](https://developer.android.com/reference/android/widget/ListView.html#attr_android:divider) and [`dividerHeight`](https://developer.android.com/reference/android/widget/ListView.html#attr_android:dividerHeight) are attributes for the ListView, not the row layout. – Sam Mar 11 '13 at 17:24
That I get. Setting dividerHeight to zero has no effect :-( – CJe Mar 11 '13 at 17:26
As always there's a problem with the last item in each section leaving me with having to deal with margins programmatically :-/ – CJe Mar 11 '13 at 17:30
I assume that you want the same spacing between the last row and the section header? Hmm, you can either this margin add to all of the headers (which will also add a spacer above the first header...) or you can use multiple row layouts where the last row has margins on the top _and_ bottom. – Sam Mar 11 '13 at 17:35
Hmm yeah well... I guess I could do that. But I already have two different layouts (first match is live) so I would have to add two more. Hmm... If doing it programmatically don't work then I guess that's the only way. Thanks for the help Sam. – CJe Mar 11 '13 at 17:44
ListView understands [`android:padding`](https://developer.android.com/reference/android/view/View.html#attr_android:padding), so if possible (depends on your layout structure and your's goals) you can use android:padding property. Nowadays the ideal it's use the [`RecyclerView`](https://developer.android.com/guide/topics/ui/layout/recyclerview) – GFPF Jun 04 '19 at 21:43

score 19 · Answer 2 · answered Nov 25 '13 at 23:17

19

A little late seeing this, but just add the following lines to your ListView xml element

android:divider="#00000000"
android:dividerHeight="10dp"

answered Nov 25 '13 at 23:17

Zac Sweers

3,101
2
18
20

score 12 · Answer 3 · edited May 23 '17 at 12:17

12

See the answer here for why. In short the child asks the parent, and the list view row uses AbsListView.LayoutParams, which doesn't include margins.

Why LinearLayout's margin is being ignored if used as ListView row view

edited May 23 '17 at 12:17

Community

1
1

answered Aug 17 '13 at 16:22

user1978019

3,008
1
29
38

score 4 · Answer 4 · answered Mar 11 '13 at 15:42

4

In your adapter, catch your relative layout in getView(), then give a layout params ,

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)view.getLayoutParams();
params.setMargins(80, 0, 0, 0); //substitute parameters for left, top, right, bottom
YourRelativeLayoutInAdapter.setLayoutParams(params);

answered Mar 11 '13 at 15:42

Talha

12,673
5
49
68

Thanks. Will give it a go. No way of doing this thru XML? And if so why not? – CJe Mar 11 '13 at 15:44
1

I dont know it exactly but when i tried it before by using xml. i didnt worked for me too. So i solved this problem by giving margin in adapter. – Talha Mar 11 '13 at 15:50

Dwagner · Answer 5 · 2017-06-23T09:20:26.783

I suppose you have a ListView defined in an XML file somewhere, if so, you could add some padding to it, so that there will be some space between the edge of the screen and the ListView.

Example:

<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="15dp"/>

Margin on ListView items in android

5 Answers5

Linked