Huge gap between cards of recyclerView

Question

I have a recylerView to show the images fetched from firebase cloud, However there is a large gap between some items and these gaps arise after i start scrolling, before scrolling, everything is placed perfectly, I have read a few articles, however not proved to be correct in my case. The code for my MainActivity is given below

  RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
    recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setItemAnimator(new DefaultItemAnimator());


    Query query = firebaseDatabase.getReference().child("Products").child(Uid).orderByKey();

    FirebaseRecyclerOptions options = new FirebaseRecyclerOptions.Builder<MainConstructor>().setQuery(query, MainConstructor.class).build();

    mFirebaseAdapter = new FirebaseRecyclerAdapter<MainConstructor, ShowDataViewHolder>(options) {


        @Override
        public ShowDataViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_view, parent, false);
            return new ShowDataViewHolder(view);
        }

        @Override
        protected void onBindViewHolder(@NonNull ShowDataViewHolder holder, int position, @NonNull MainConstructor model) {
            holder.setImg(getApplicationContext(),model.getImageUrl());
            holder.setImageText(model.getImageUrl());
            holder.setCode(model.getProductCode());
            progressDialog.dismiss();

        }
    };
    recyclerView.setAdapter(mFirebaseAdapter);
}


@Override
protected void onStart() {
    super.onStart();

    mFirebaseAdapter.startListening();
    recyclerView.setAdapter(mFirebaseAdapter);
}

@Override
protected void onStop() {
    super.onStop();
    mFirebaseAdapter.stopListening();
}

The code for ViewHolder class is given as

public class ShowDataViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

    ImageView img;
    TextView imageText, codeText;


    public ShowDataViewHolder(final View itemView) {
        super(itemView);
        itemView.setOnClickListener(this);
    }

    private void setImg(Context ctx, String img1) {
        img = (ImageView) itemView.findViewById(R.id.List_ImageView);
        Picasso.with(ctx).load(img1).placeholder(R.drawable.notification).into(img);
        // progressDialog.dismiss();
    }

    private void setImageText(String text){
        imageText = (TextView)itemView.findViewById(R.id.textView);
        imageText.setText(text);
    }

    private void setCode(String code){
        codeText = (TextView)itemView.findViewById(R.id.Code);
        codeText.setText(code);
    }

The large unwanted gaps can be clearly seen here:

The list_view layout code is given as:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/List_ImageView"
            android:padding="2dp"/>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Code"
            android:visibility="invisible"/>

    </LinearLayout>


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

I have read someWhere that this problem arises because recyclerView continuously keeps on updating the items, so to correct that we need a ViewHolder class, however i have a viewHolder in my case then also this problem is there, Can anyone help me with the solution and also with the exact problem why is it happening? Thanks in advance

Issue is in list_view.xml which you have not pasted here.Please post that so i solve it. — Khemraj Sharma, May 05 '18 at 19:07
Agreed, you probably need to set the root element height in `list_view.xml` to `wrap_content` — Suleyman, May 05 '18 at 19:08
I want your layout xml file Jaspreet. Can you paste that here with an edit — Khemraj Sharma, May 05 '18 at 19:11
Is this because i have set the CardView height to 150dp? if so then why is the problem arising after I'm scrolling, before scrolling through the items, everything if perfect. @Khemraj — Jaspreet Singh, May 05 '18 at 19:15

score 2 · Answer 1 · answered May 05 '18 at 19:16

2

Change this:

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

to this:

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

answered May 05 '18 at 19:16

Suleyman

2,765
2
18
31

@JaspreetSingh no problem :) make sure to accept the answer that helped :) – Suleyman May 05 '18 at 19:24

score 2 · Answer 2 · answered May 05 '18 at 19:20

Your code is perfect just remove your parent node RelativeLayout which is actually not needed. That is creating issue with match_parent height.

<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:layout_margin="2dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/List_ImageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp" />

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

        <TextView
            android:id="@+id/Code"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

    </LinearLayout>
</android.support.v7.widget.CardView>

Thanks a lot, i have succesfully done that. and it is now working absolutely fine. — Jaspreet Singh, May 05 '18 at 19:23

Huge gap between cards of recyclerView

2 Answers2