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

Answer 1

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>

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