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.

Metsky

Do you want margin or padding? – Misplace

Creating rounded corners and a border isn't too hard, this Developer's Guide explains some of the details. – Misplace

I want margin. I want my list items separated. – Metsky

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()) – Gum

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. – Metsky

I just posted an answer that uses an extra layout, but it seems you discovered this on your own. :) – Misplace

Isn't the small line your divider? if it is, just remove the divider or set the same color as your bg. – Gum

Answer 1

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:

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.

Misplace

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? – Metsky

By "very small line" do you mean these? Those are the dividers you can remove them by changing android:divider to an empty or transparent image, or possibly setting android:dividerHeight="0dp". – Misplace

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. – Metsky

Yes :-) those are the ones I mean :-) – Metsky

I forgot to mention divider and dividerHeight are attributes for the ListView, not the row layout. – Misplace

That I get. Setting dividerHeight to zero has no effect :-( – Metsky

As always there's a problem with the last item in each section leaving me with having to deal with margins programmatically :-/ – Metsky

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. – Misplace

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. – Metsky

ListView understands 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 – Patent

Answer 2

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

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

Lilas

Answer 3

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

Tades

Answer 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);

Herefordshire

Thanks. Will give it a go. No way of doing this thru XML? And if so why not? – Metsky

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. – Herefordshire

Answer 5

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

Euphoria

Answer 6

Use a RecyclerView instead of ListView. Use whatever margins you want. They will work :-)

Fein