How to implement only one circular progress bar until images are loaded with glide

Question

Hello I want to implement only one circular progress animation until the images are loaded from the glide but after implementing animation in placeholder it gives the animation to each individual image and also the image changes to the placeholder image size which I don't want

I want that there should be only one circular progress animation in the center of the layout until the images are loaded in the recycler view

Post_Item_Container.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="6dp"
    android:layout_marginTop="11dp"
    android:layout_marginEnd="6dp"
    android:contentDescription="@string/todo"
    app:shapeAppearanceOverlay="@style/RoundedCorner" />

Fragment_Search.xml

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

    <androidx.appcompat.widget.SearchView
        android:id="@+id/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginStart="15dp"
        android:layout_marginTop="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginBottom="15dp"
        android:background="@color/grey"
        android:overScrollMode="never" />

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/search_view"
        android:overScrollMode="never">


        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/listText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp"
                android:paddingStart="40dp"
                android:paddingEnd="0dp"
                android:text="@string/today_s_most_liked_posts"
                android:textColor="@color/white"
                android:textSize="25sp"
                android:textStyle="italic" />

            <ProgressBar
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawable="@drawable/hu3fv"
                android:layout_marginTop="240dp"
                android:gravity="center_vertical|center_horizontal"/>

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

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

</RelativeLayout>

Search_Fragment.java

    public class Search_Fragment extends Fragment {
    private final DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("uploads");
    public List<Upload> mUploads;
    PostAdapter_Search postsAdapter;
    RecyclerView postRecyclerView;
    ProgressBar progressBar;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search, container, false);
        requireActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        postRecyclerView = view.findViewById(R.id.postRecyclerView);
        progressBar = view.findViewById(R.id.progressBar);
        postRecyclerView.setLayoutManager(
                new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        );
        getData();
        progressBar.setVisibility(View.VISIBLE);
        mUploads = new ArrayList<>();
        postsAdapter = new PostAdapter_Search(getContext(), mUploads);
        postRecyclerView.setAdapter(postsAdapter);
        return view;
    }


    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();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
            }
        });
    }
}

https://stackoverflow.com/questions/35305875/progress-bar-while-loading-image-using-glide — Cyrille Con Morales, Jun 07 '21 at 07:57
but this doesn't helped me, I visited this question previously — , Jun 07 '21 at 08:00
The problem is since the height is `wrap_content` for your `ShapeableImageView` setting a ColorDrawable won't work. Instead add a custom drawable to your app and use that. Here is a link for the same https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aimage — che10, Jun 07 '21 at 09:19
even tried this but then the images size change to the icon size which I again don't want, I want the height should be wrap_content at any cause I'm trying to make it like pintrest — , Jun 07 '21 at 09:30
is there any method where the height and width parameters can be charged after the images are loaded into the recycler view, if this is possible it can solve my issue I think so, if it is possible I will give images fixed size in XML and then shows up the shimmer effect properly and when the images are loaded image height and width parameters change from fixed to match parent and wrap content in the java files — , Jun 07 '21 at 09:48

che10 · Answer 1 · 2021-06-07T07:18:10.880

0

Since you are using a RecyclerView and since you are doing this in the onBindViewHolder method

 @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Upload uploadCurrent = mUploads.get(position);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .placeholder(R.drawable.hu3fv)
                .dontAnimate()
                .into(holder.imageView);


    }

In a way you are applying this to all your RecyclerView items and thus it is repeating because that is what the purpose of RecyclerView is.

If you want one individual CircularProgressBar you need to add it in your Fragment or Activity Layout depending on what you are using like this

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="24dp"
        android:visibility="visible" />

You can set its size and hide/show its visibility as per your need once data is loaded into RecyclerView

I understand that you want to show ProgressBar for Glide image loading, but that won't be recommended since you will need some sort of callback after every image has finished loading.

edited Jun 07 '21 at 07:18

answered Jun 07 '21 at 07:15

che10

2,176
2
4
11

Please can you tell me how can I do that – Jun 07 '21 at 07:17
@Player91 Look there are two different things here. If you want to show one individual `ProgressBar` just for Glide image loading then I would not recommend that since you will need some sort of callback from Glide once image has completed loading and similarly when you scroll again the `ProgressBar` would need to be shown. Instead either keep separate `ProgessBar` as you are already doing or just keep one together till the time data is loaded into `RecyclerView` – che10 Jun 07 '21 at 07:20
Brother if you can provide a resource,it will be very helpful – Jun 07 '21 at 07:27
Yes, I will help you but can you please confirm if that works for you @Player91 As I said those are different things. What you want is this `one circular progress animation in the center of the layout until the images are loaded in the recycler view` and as I said that is not recommended because that has various issues you would need to address as I mentioned above. – che10 Jun 07 '21 at 07:30
Then can you add some of your code of your activity or Fragment whatever it is you are using @Player91 In short you need to add `ProgessBar` in your XML layout of activity or Fragment as I said. – che10 Jun 07 '21 at 07:32
please check the question i have updated it as you say – Jun 07 '21 at 08:01
in Instagram when you open the profile section it shows up a progress circle then all the elements are shown when they are loaded, then how I cant do it brother – Jun 07 '21 at 08:41
You can do it. As I said you just need ProgressBar in your XML Layout and hide/show its visibility. When you are fetching data show it and when you are submitting data to your adapter hide it then @Player91 – che10 Jun 07 '21 at 08:50
Show it when you make the `getData();` call and hide its visibility when you assign the adapter. Give an `id` in your XML to progress bar and use this `progressBar.setVisibility(View.VISIBLE);` and `progessBar.setVisibility(View.GONE);` – che10 Jun 07 '21 at 08:53
there the problem arrives, the recycler view is unorganized when I don't use the placeholder, images are loaded in one row and not in 2 rows, but when I refresh the fragment it loaded the images properly, that's why I'm dealing with this placeholder stuff from last one month, I have even tried shimmer effect and it worked fine but my requirement is image height should be wrap content and not fixed that's why the shimmer doesn't work with wrap content – Jun 07 '21 at 08:56
@Player91 just use some other drawable as placeholder then. It is really tough to say with your design and stuff, but you can just use any other drawable or heck even just use simply a color like this `ColorDrawable(Color.GRAY)` – che10 Jun 07 '21 at 09:02
I have even tried this but then there are dots of the color and not images – Jun 07 '21 at 09:08
Can you paste XML layout of your RecyclerView row design for reference? – che10 Jun 07 '21 at 09:09
I even wonder how Pinterest loads images in recycler view with that circular progress bar when we start the app from scratch – Jun 07 '21 at 09:11
i have added the image view for refrence – Jun 07 '21 at 09:13
should I also upload the adapter class if you want it for reference – Jun 07 '21 at 09:16

How to implement only one circular progress bar until images are loaded with glide

1 Answers1