Margin between items in recycler view Android

Question

Hi I am Following this tutorial:

http://www.journaldev.com/10024/android-recyclerview-and-cardview-example-tutorial

Now I am facing a weird issue the margin between each CardView item inside RecyclerView is way too much.

ISSUE

How to reduce the Margin between each item of CardView placed inside RecyclerView?

score 115 · Accepted Answer · answered May 29 '16 at 09:07

115

I faced similar issue, with RelativeLayout as the root element for each row in the recyclerview.

To solve the issue, find the xml file that holds each row and make sure that the root element's height is wrap_content NOT match_parent.

answered May 29 '16 at 09:07

Maher Nabil

1,417
1
15
19

1

yes this worked, Had to remove parent relative layout match parent to wrap content – Tushar Narang May 29 '16 at 16:40
Works also if you had "fill_parent" for the Relative Layout and change it to "wrap_content". Works perfectly. Great! – Benjamin Heinke Feb 06 '18 at 16:39
For Image only, wrap_content not working.@maher – Nimisha V Feb 07 '22 at 10:52

score 53 · Answer 2 · edited Apr 21 '19 at 18:23

I made a class to manage this issue. This class set different margins for the items inside the recyclerView: only the first row will have a top margin and only the first column will have left margin.

public class RecyclerViewMargin extends RecyclerView.ItemDecoration {
private final int columns;
private int margin;

/**
 * constructor
 * @param margin desirable margin size in px between the views in the recyclerView
 * @param columns number of columns of the RecyclerView
 */
public RecyclerViewMargin(@IntRange(from=0)int margin ,@IntRange(from=0) int columns ) {
    this.margin = margin;
    this.columns=columns;

}

/**
 * Set different margins for the items inside the recyclerView: no top margin for the first row
 * and no left margin for the first column.
 */
@Override
public void getItemOffsets(Rect outRect, View view,
                           RecyclerView parent, RecyclerView.State state) {

    int position = parent.getChildLayoutPosition(view);
    //set right margin to all
    outRect.right = margin;
    //set bottom margin to all
    outRect.bottom = margin;
    //we only add top margin to the first row
    if (position <columns) {
        outRect.top = margin;
    }
    //add left margin only to the first column
    if(position%columns==0){
        outRect.left = margin;
        }
    }
}

you can set it in your recyclerview this way

 RecyclerViewMargin decoration = new RecyclerViewMargin(itemMargin, numColumns);
 recyclerView.addItemDecoration(decoration);

@Victor I have issue for the answer, how about if I updating the position of item ? it should refreshing, but it's not. And the item on the bottom whose going on first row will still has margin — jboxxpradhana, Aug 25 '18 at 14:49

score 45 · Answer 3 · edited May 29 '16 at 10:39

45

Find the attribute card_view:cardUseCompatPadding="true" in cards_layout.xml and delete it. Start app and you will find there is no margin between each cardview item.

Add margin attributes you like. Ex:

android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"

edited May 29 '16 at 10:39

Vasily Kabunov

6,511
13
49
53

answered May 29 '16 at 09:12

Jing

1,090
9
13

1

Thanks, worked for me, though it was this only one case where card_view:cardUseCompatPadding="true" didn't do the job – Amit Shadadi Dec 07 '16 at 17:30

score 12 · Answer 4 · edited Jun 18 '19 at 11:08

12

Instead of using XML to add margin between items in RecyclerView, it's better way to use RecyclerView.ItemDecoration that provide by android framework.

So, I create a library to solve this issue.

https://github.com/TheKhaeng/recycler-view-margin-decoration

edited Jun 18 '19 at 11:08

Pranav Karnik

3,318
3
35
47

answered May 01 '17 at 10:03

The Khaeng

129
1
2

You have made an awesome Library.Thank you! You saved my day! :) – Ahad Nov 28 '19 at 11:33
simple and awesome library – i.am.jabi Jul 12 '20 at 15:28
I would recommend [SpacingItemDecoration](https://github.com/grzegorzojdana/SpacingItemDecoration) library. This is the best – Vlad Aug 30 '20 at 12:30

score 9 · Answer 5 · edited Mar 30 '20 at 00:27

Use CardView in Recyclerview Item Layout like this :

 <android.support.v7.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:card_view="http://schemas.android.com/tools"
        card_view:cardCornerRadius="10dp"
        app:cardBackgroundColor="#ACACAC"
        card_view:cardElevation="5dp"
        app:contentPadding="10dp"
        card_view:cardUseCompatPadding="true">

score 6 · Answer 6 · answered Oct 02 '18 at 12:05

6

Use CompatPadding in CardView Item

answered Oct 02 '18 at 12:05

KKumar Technologies

247
3
3

score 2 · Answer 7 · edited May 23 '17 at 11:55

2

Try to add RecyclerView.ItemDecoration

To know how to do that: How to add dividers and spaces between items in RecyclerView?

edited May 23 '17 at 11:55

Community

1
1

answered May 29 '16 at 09:02

Tarek360

1,251
1
13
19

score 2 · Answer 8 · answered Feb 05 '17 at 10:22

2

If you want to do it in XML, jus set paddingTopand paddingLeft to your RecyclerView and equal amount of layoutMarginBottom and layoutMarginRight to the item you inflate into your RecyclerView(or vice versa).

answered Feb 05 '17 at 10:22

Vlad

820
10
29

score 1 · Answer 9 · edited Aug 18 '22 at 09:48

1

For adding space between Two items in recycler View. I just add marginTop and marginBottom and it works fine.

<androidx.cardview.widget.CardView
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:elevation="15dp"
    app:cardCornerRadius="10dp">

edited Aug 18 '22 at 09:48

Tyler2P

2,324
26
22
31

answered Aug 13 '22 at 11:48

FA20-BSE-017 SYED ALI HAIDER S

11
2

mrtexaz · Answer 10 · 2020-09-24T09:44:44.370

In XML, to manage margins between items of a RecyclerView, I am doing in this way, operating on these attributes of detail layout (I am using a RelativeLayout):

android:layout_marginTop
android:layout_marginBottom

of course it is also very important to set these attributes:

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Here follows a complete example, this is the layout for the list of items:

<?xml version="1.0" encoding="utf-8"?>
<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:name="blah.ui.meetings.MeetingEventFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginVertical="2dp"
app:layoutManager="LinearLayoutManager"
tools:context=".ui.meetings.MeetingEventFragment"
tools:listitem="@layout/fragment_meeting_event" />

and this is the detail layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="@drawable/background_border_meetings">
    <TextView
    android:id="@+id/slot_type"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:text="slot_type"
    />
</RelativeLayout>

background_border_meetings is just a box:

<?xml version="1.0" encoding="utf-8"?>    
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
    <!-- This is the stroke you want to define -->
    <stroke android:width="4dp"
    android:color="@color/mdtp_line_dark"/>
    <!-- Optional, round your corners -->
    <corners android:bottomLeftRadius="2dp"
    android:topLeftRadius="2dp"
    android:bottomRightRadius="2dp"
    android:topRightRadius="2dp" />
    <gradient android:startColor="@android:color/transparent"
    android:endColor="@android:color/transparent"
    android:angle="90"/>
</shape>

score 0 · Answer 11 · answered Dec 16 '21 at 04:06

0

I had a similar problem, in my case I used the layout margin in the negative. Maybe not the best idea but it worked.

android:layout_marginStart="-8dp"
android:layout_marginEnd="-8dp"

answered Dec 16 '21 at 04:06

TrompetenTom

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 16 '21 at 08:07

score -1 · Answer 12 · answered Dec 21 '16 at 13:54

change in Recycler view match_parent to wrap_content:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycleView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Also change in item layout xml

Make parent layout height match_parent to wrap_content

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />

Margin between items in recycler view Android

12 Answers12

Linked