RecyclerView space between items expanding when scrolling

Question

I just finished my RecyclerView for my Android Application, but when testing it out, I found a strange bug which I don't understand. When the activity launches, the items in the Recycler view are well positioned in the RecyclerView at correct distances. However, once I start scrolling they move apart from each other until only one item is visible at once, and you have to scroll a distance almost equivalent to that of the screen before seeing the next item.

Here is what the bug looks like:

Before scrolling on activity lunch

After scrolling the recycleview

If you have any idea what might be causing this, any help would be greatly appreciated.

Here is the RecyclerView code from the activity:

private ArrayList<String> imagesUrlListThumb, imagesUrlListFull = new ArrayList<String>();
private RecyclerAdapter recyclerAdapter;
private String urlRecyclerThumb = "";
private RecyclerView recyclerView;
private ImageView imgCurRecyclerView;

    imagesUrlListThumb = produit.getImgUrlThumbMul();
    recyclerAdapter = new RecyclerAdapter(getApplicationContext(), imagesUrlListThumb);
    recyclerView = (RecyclerView) findViewById(R.id.content_product_detail_recycer_view);
    RecyclerView.LayoutManager recyclerLayoutManager = new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.HORIZONTAL, false);
    recyclerView.setLayoutManager(recyclerLayoutManager);
    recyclerView.setAdapter(recyclerAdapter);
    urlRecyclerThumb = imagesUrlListThumb.get(0);
    RecyclerItemClickSupport.addTo(recyclerView).setOnItemClickListener(new RecyclerItemClickSupport.OnItemClickListener() {
        @Override
        public void onItemClicked(RecyclerView rv, int pos, View view) {
            urlRecyclerThumb = imagesUrlListThumb.get(pos);
            Picasso.with(getApplicationContext()).load(urlRecyclerThumb).fit().into(imgCurRecyclerView);
        }
    });

Recycler adapter:

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyViewHolder>{

private List<String> urlThumbImg;
private Context context;

public RecyclerAdapter(Context ctx, List<String> urls){
    this.urlThumbImg = urls;
    this.context = ctx;
}

@Override
public RecyclerAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType){
    View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_list_slideshow, parent, false);
    return new MyViewHolder(itemView);
}

@Override
public void onBindViewHolder(RecyclerAdapter.MyViewHolder holder, int position){
    String current = urlThumbImg.get(position);
    Picasso.with(context).load(current).fit().into(holder.myImgView);
}

@Override
public int getItemCount(){
    return urlThumbImg.size();
}

public class MyViewHolder extends RecyclerView.ViewHolder {
    public ImageView myImgView;

    public MyViewHolder(View view){
        super(view);
        myImgView = (ImageView) view.findViewById(R.id.imageView_slide);
    }
}
}

Here is my xml layout concerning the recycler view:

<!-- RECYCLER VIEW -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/content_product_detail_recycer_view_cur_image"
            android:layout_width="150dp"
            android:layout_height="130dp"
            android:layout_gravity="center"
            android:background="@android:color/black" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/content_product_detail_recycer_view"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:layout_margin="5dp"
            android:background="@android:color/darker_gray">

        </android.support.v7.widget.RecyclerView>

    </LinearLayout>

layout for item inside recyclerview:

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

<ImageView
    android:id="@+id/imageView_slide"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_margin="5dp"
    android:background="@android:color/darker_gray" />

provide Layout for you items inside recyclerview and code for recyclerview — Kushan, Jul 06 '16 at 12:35
@Adamouization The layout for the item inside the RecyclerView buddy. — Kushan, Jul 06 '16 at 12:47

Kushan · Accepted Answer · 2016-07-06T12:57:47.127

Provide your Layout and RecyclerView code to help debug and not make a guess.

Ok so here is the issue:

With the release 2.3.0 there is an exciting new feature to the LayoutManager API: auto-measurement! This allows a RecyclerView to size itself based on the size of its contents. This means that previously unavailable scenarios, such as using WRAP_CONTENT for a dimension of the RecyclerView, are now possible. You’ll find all built in LayoutManagers now support auto-measurement.

Due to this change, make sure to double check the layout parameters of your item views: previously ignored layout parameters (such as MATCH_PARENT in the scroll direction) will now be fully respected.

Basically you need to remove the LinearLayout

<ImageView
android:id="@+id/imageView_slide"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="5dp"
android:background="@android:color/darker_gray" />

The match_parent in the LinearLayout width is causing each item to fit the entire screen with one image and remaining space.

If you insist on using the LinearLayout, set both width and height to wrap_content

src: http://stackoverflow.com/questions/35728179/recyclerview-items-with-big-empty-space-after-23-2-0 — Ahmad Sanie, Jul 06 '16 at 13:04
thanks @Ahmad Alsanie :) forgot to add the source for the quote :) — Kushan, Jul 06 '16 at 13:26

RecyclerView space between items expanding when scrolling

1 Answers1