android – Set progress bar on top of RecyclerView and remove after data is loaded-ThrowExceptions

Exception or error:

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

How to solve:
  1. Wrap both your RecyclerView and your loading layout (or TextView) inside a FrameLayout. Set both of then to match_parent for width and height.
  2. Hide the RecyclerView in the onCreate() of your activity or onCreateView() of your fragment: recyclerView.setVisibility(View.GONE);
  3. 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()

###

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>

###

Recycler View.

  1. 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" />
    

  2. 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);
 }

###

For centering user of Progress bar use

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

Leave a Reply

Your email address will not be published. Required fields are marked *