Staggered gridview not working properly in android

Question

I am using staggered gridview which is placed inside NestedScrollview. I don't know y it is coming one below the other when loading for the first time(if image cache is not there). Is there any issue with staggered gridview? Or is it because of my layout it is coming like this. Anyone please help.

My layout xml is as follows

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:expandedTitleTextAppearance="@android:color/transparent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleTextAppearance="@android:color/transparent">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
                android:maxHeight="@dimen/detail_backdrop_maxheight"
                android:adjustViewBounds="true"
                app:layout_collapseMode="parallax"
                android:contentDescription="Top Image"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:expandedTitleTextAppearance="@android:color/transparent"/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <com.hit.pretstreet.pretstreet.core.customview.TextViewPret
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/yellow"
            style="@style/textview_normal"
            android:id="@+id/tv_heading_photos"
            app:pret_typeface="@string/font_redvelvet_regular"/>

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/rv_images"
            android:layout_marginLeft="-2dp"
            android:layout_marginRight="-2dp"
            android:nestedScrollingEnabled="false"/>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Note: I am loading images from server.

Regards

Answer 1

At last I got the answer. It was because I have missed placeholder while loading images.

Answer 2

recycler_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/cardview_dark_background"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardPreventCornerOverlap="false"
        android:theme="@style/Theme.MaterialComponents.DayNight"
        app:cardBackgroundColor="@color/cardview_shadow_start_color"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/ivTemplateThumbnail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:src="@mipmap/ic_launcher" />
                
            <TextView
                android:id="@+id/tvTemplateName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:fontFamily="sans-serif-black"
                android:text="Poster Maker"
                android:textSize="@dimen/_16ssp" />
        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>


</LinearLayout>

Recyclerview

   <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvStaggered"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layoutManager="androidx.recyclerview.widget.StaggeredGridLayoutManager"
                app:spanCount="2"
                android:orientation="vertical"
                tools:itemCount="5"
                tools:listitem="@layout/item_staggered_main" />

Inside adapter_recyclerview > onbindviewholder at the time of set image in item imageview using glide use placeholder.

  @Override
public void onBindViewHolder(@NonNull TemplateListAdapter.TemplateListItemViewHolder holder, int position) {

    Glide.with(mContext)
            .load(listTemplateData.get(position).getTemplateUrl()).placeholder(R.drawable.placeholdertemplate)
            .into(holder.ivTemplateThumbnail);
    holder.tvTemplateName.setText(listTemplateData.get(position).getTemplateName());

    holder.ivTemplateThumbnail.setOnClickListener(view -> {templateItemClick.onTemplateItemClick(position);});


}