How to show only one progress bar before loading images in recyclerview?

Question

Hello i want to show one progress bar center in the layout

but there are some issues with it

Here are some methods that i tried and the issues that i get

Library i used for progress bar link

Method 1

I have tried adding progress bar in the layout and then in java i add visible until the images are loaded and invincible when the images are loaded.The progress bar was working but

Problem With Method 1 for me

The images are not loaded properly in the recyclerview

Output

Method 2

I tried to implement it with placeholder with glide it worked but

Problem with Method 2

I dont want the progress bar to shows up on every image

Here is Method 1 Code

XML

 <RelativeLayout
     <androidx.core.widget.NestedScrollView
     <LinearLayout

     <androidx.recyclerview.widget.RecyclerView
                    android:id="@+id/postRecyclerView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:overScrollMode="never" />

                <com.github.ybq.android.spinkit.SpinKitView
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/CustomProgressBar"
                    style="@style/SpinKitView.WanderingCubes"
                    android:layout_gravity="center"
                    app:SpinKit_Color="@color/white"/>
    </LinearLayout>
    </androidx.core.widget.NestedScrollView>
    </RelativeLayout>

Java

 ProgressBar progressBar;

    progressBar = progressBar.findViewById(R.id.CustomProgressBar);
    Sprite wanderingCubes = new WanderingCubes();
    progressBar.setIndeterminateDrawable(wanderingCubes);

     postRecyclerView = view.findViewById(R.id.postRecyclerView);
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
    
    getData();
    progressBar.setVisibility(View.VISIBLE);
    
    
    private void getData() {
            databaseReference.addValueEventListener(new ValueEventListener() {
                @Override
                public void onDataChange(@NonNull DataSnapshot snapshot) {
                    if (snapshot.exists()) {
                        mUploads.clear();
                        for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                            progressBar.setVisibility(View.GONE);
                            postRecyclerView.setVisibility(View.VISIBLE);
                            Upload upload = dataSnapshot.getValue(Upload.class);
                            upload.setmKey(dataSnapshot.getKey());
                            mUploads.add(upload);
    
    
                        }
    
                    }
    
                    //notify the adapter
                    postsAdapter.notifyDataSetChanged();
                }

Answer 1

Try something like this

private void getData() {
            databaseReference.addValueEventListener(new ValueEventListener() {
                @Override
                public void onDataChange(@NonNull DataSnapshot snapshot) {
                    if (snapshot.exists()) {
                        mUploads.clear();
                        for (DataSnapshot dataSnapshot : snapshot.getChildren()) {
                            Upload upload = dataSnapshot.getValue(Upload.class);
                            upload.setmKey(dataSnapshot.getKey());
                            mUploads.add(upload);
    
    
                        }
    
                    }
    
                    //notify the adapter
                    postsAdapter.notifyDataSetChanged();
                            progressBar.setVisibility(View.GONE);
                            postRecyclerView.setVisibility(View.VISIBLE);
                }