Android RecyclerView with progress indicator and animation

Question

At Material Design guides there is a pattern for loading and displaying all content at once.

Link

how to implement it using RecyclerView?

Solution

You can simply do it by toggling visibility of progressbar and recyclerview.

In your layout,

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
      <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:progressBarStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            />
</FrameLayout>

According to above layout, before your data is ready, progressbar is showing on screen. After your data is ready, you can switch visibility like that.

mRecyclerAdapter.setData(mData); // need to implement setter method for data in adapter
mRecyclerAdapter.notifyDataSetChanged();
mRecyclerView.setVisibility(View.VISIBLE);
mProgressBar.setVisibility(View.GONE);

Hope it will be useful for you.

Comments

[Motassem Jalal]

How is it possible to do the same animations for the recyclerview items?

[Otieno Rowland]

Hi, @MotassemJalal , you just need to do the same thing, but now with Adapter rows.