Set progress bar on top of RecyclerView and remove after data is loaded

Question

I want to have a loading icon that is displayed on top of where a RecyclerView would be, and disappear once the data is finished loading

It would look like:

enter image description here

Can anyone help me out?

I have the code which shows a TextView above the RecyclerView that says "Loading..." and disappears after the data is loaded, but the RecyclerView is still visible.

My XML:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/loaderTV"
    android:text="Loading..."
    android:layout_above="@+id/eventListRV"/>

<android.support.v7.widget.RecyclerView
    android:scrollbars="vertical"
    android:id="@+id/eventListRV"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/spinner">



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

And then in my code

client.listCreators(request, new Callback<ServiceResponse<Event>>() {
            @Override
            public void success(ServiceResponse<Event> eventServiceResponse, Response response) {
                eventList.addAll(eventServiceResponse.data.results);
                Log.i("tag", String.valueOf(eventServiceResponse.data.total));

                if (eventList.size() > 60) {
                    adapter.notifyDataSetChanged();
                    loadingText.setVisibility(View.GONE);
                }
            }

But I want the RecyclerView to be invisible while the data is loading and I want the progress bar ontop of where the RecyclerView is, and I don't want it to be a textview

score 23 · Accepted Answer · edited Aug 05 '22 at 13:28

23

Wrap both your RecyclerView and your loading layout (or TextView) inside a FrameLayout. Set both of them to match_parent for width and height.
Hide the RecyclerView in the onCreate() of your activity or onCreateView() of your fragment: recyclerView.setVisibility(View.GONE);
In your callback method hide the loading layout with setVisibility(View.GONE), show your RecyclerView with setVisibility(View.VISIBLE) and trigger a reload of the adapter with adapter.notifyDataSetChanged()

edited Aug 05 '22 at 13:28

Zain

37,492
7
60
84

answered Mar 02 '15 at 21:41

Quanturium

5,698
2
30
36

ok it's centered now, except the loading icon is huge! i guess i can figure out a way to make it smaller – fred jones Mar 02 '15 at 21:51
When I use the ```notifyDataSetChanged``` the UI freezes, and the ```progressBar``` is stopped: http://stackoverflow.com/questions/41945734/recyclerview-with-100-items-loading-too-slow – JCarlosR Jan 31 '17 at 03:39

Ticherhaz FreePalestine · Answer 2 · 2019-07-08T13:51:26.713

Recycler View.

Use RelativeLayout. ProgressBar prepare with android:layout_centerInParent="true".

<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

At MainViewAdapter extends RecyclerView.Adapter<MainViewAdapter.MyViewHolder>

at onBindViewHolder

 @Override
 public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
 MainItem mainItem = mainItemList.get(position);
 holder.getTextViewTitle().setText(mainItem.getNameMain());

 //all your code here...

 //After that display progressbar at the below
 progressBar.setVisibility(View.GONE);
 }

Thank you so much, it saved much of my time! – hetsgandhi Jul 20 '19 at 08:17 — hetsgandhi, Jul 20 '19 at 08:17

score 3 · Answer 3 · answered Jan 12 '18 at 19:52

For scalling the progress bar size you can use scaleX and scaleY and adjust the value for smaller size.

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ProgressBar
        android:id="@+id/progressBar"
        android:visibility="visible"
        android:scaleX="0.10"
        android:scaleY="0.10"
        android:textColor="@color/colorAccent"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="center"/>
</FrameLayout>

score 1 · Answer 4 · answered Jul 04 '17 at 12:49

1

For centering user of Progress bar use

android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

answered Jul 04 '17 at 12:49

praveen dewangan

466
5
7

Sarvesh Hon · Answer 5 · 2020-06-22T19:04:46.357

Create Custom Progress Dialog Layout

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

<LinearLayout
    android:layout_width="wrap_content"
    android:gravity="center"
    android:padding="3dp"
    android:background="@drawable/dialog_background"
    android:layout_height="wrap_content">

    <ProgressBar
        android:padding="3dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

</RelativeLayout>

Create Custom background in Drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/white"/>
<size android:height="60dp" android:width="60dp"/>
</shape>

Create ProgressDialog in Java

public static ProgressDialog mProgressDialog;

Define Properties and Show onCreate

        mProgressDialog = new ProgressDialog(CategoryActivity.this);
        mProgressDialog.setCancelable(false);
        mProgressDialog.show();
        mProgressDialog.setContentView(R.layout.custom_dailog);
        mProgressDialog.getWindow().setBackgroundDrawableResource(
                android.R.color.transparent
        );

Call ProgressDialog to dismiss here

     @Override
 public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
 MainItem mainItem = mainItemList.get(position);
 holder.getTextViewTitle().setText(mainItem.getNameMain());

 //all your code here...

 //at end of onBindViewHolder dimiss this
 CategoryActivity.mProgressDialog.dismiss();
 }

The progress dialog will be shown until item get loaded in recyclerview and after items loaded it will be dismiss

score 0 · Answer 6 · answered Nov 29 '21 at 06:22

First of all, add the ProgressBar tag in the XML file

<ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

then,

In Kotlin,

If you are using the LiveData then inside the observer call the method

checkProgressBar(list) // send the list

viewModel!!.readData.observe(viewLifecycleOwner, Observer {

        checkProgressBar(it)

        viewBindingObject.rv.adapter =
            context?.let { it1 -> ImagesAdapter(it1, it as MutableList<SingleImage>) }
    })

and then in the method set the visibility of progressBar to Gone after checking the size of the list

private fun checkProgressBar(list: List<SingleImage>) {
    if(list.size?.compareTo(0) != 0)
        viewBindingObject.progressBar.visibility = View.GONE
}

Set progress bar on top of RecyclerView and remove after data is loaded

6 Answers6

Linked