how to Progress bar show before image load.?

Question

I want to show a progress bar before image loading. I am getting an image from firebase storage. some time image taking more time to load and show .. ... That's why I am trying to input progressbar before load image..... I have tried but now working. Can anyone help me to solve this issue????

Please check my code below:-

  public class PostAdapter extends RecyclerView.Adapter<PostAdapter.ViewHolder> {

        public Context mContext;
        private List <Post>mPost;
        private FirebaseUser firebaseUser;
        ProgressBar progressBar;

        public PostAdapter(Context mContext, List<Post> mPost) {
            this.mContext = mContext;
            this.mPost = mPost;
        }
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view= LayoutInflater.from(mContext).inflate(R.layout.post_item,parent,false);


            return new PostAdapter.ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull final ViewHolder holder, final int position) {

            firebaseUser= FirebaseAuth.getInstance().getCurrentUser();
            final Post post=mPost.get(position);

            try {
                Glide.with(mContext.getApplicationContext()).load(post.getPostimage()).into(holder.post_image);

            }catch (Exception e)
            {

            }



            //holder.time.setText(post.getTime());
            Get_Time_ago getTimeAgo=new Get_Time_ago();

            long lastTime=Long.parseLong(String.valueOf(post.timestamp));
            String last_seen_time=getTimeAgo.getTimeAgo(lastTime,mContext);
           holder. time.setText(last_seen_time);
                       /*SimpleDateFormat sfd = new SimpleDateFormat("dd-MM-yyyy HH:mm:ss");
                       String time=sfd.format(new Date(lastseenonline));
                       mLast_seenview.setText(time);*/


            if(post.getDescription().equals("")){
                holder.description.setVisibility(View.GONE);

            }else {
                holder.description.setVisibility(View.VISIBLE);
                holder.description.setText(post.getDescription());

            }

            publisherInfo(holder.image_profile,holder.username,holder.blood,holder.publisher,post.getPublisher());


            if(post.getPublisher().equals(firebaseUser.getUid())){
                holder.delete.setVisibility(View.VISIBLE);


            }else {
                holder.delete.setVisibility(View.GONE);

            }


            holder.delete.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                        AlertDialog.Builder alertDialog = new AlertDialog.Builder(mContext);
                        alertDialog.setTitle("Confirm Delete?");
                        alertDialog.setMessage("Do you want to delete your post?");
                        alertDialog.setPositiveButton("YES", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.cancel();
                                FirebaseDatabase.getInstance().getReference("posts").child(post.getPostid()).removeValue();
                                notify();


                            }
                        });
                        alertDialog.setNegativeButton("NO", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                dialog.cancel();
                            }
                        });
                        alertDialog.show();
                    }

            });


        }

        @Override
        public int getItemCount() {
            return mPost.size();
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            public ImageView image_profile,post_image,like,dislike,comment,save,delete;
            public TextView username,blood,likes,dislikes,comments, description,publisher,time;




            public ViewHolder(@NonNull View itemView) {
                super(itemView);

                image_profile=itemView.findViewById(R.id.image_profile);
                post_image=itemView.findViewById(R.id.post_image);
                like=itemView.findViewById(R.id.like);
                comment=itemView.findViewById(R.id.comment);
                save=itemView.findViewById(R.id.save);
                delete=itemView.findViewById(R.id.delete);

                username=itemView.findViewById(R.id.username);
                blood=itemView.findViewById(R.id.blood);
                time=itemView.findViewById(R.id.time);


                likes=itemView.findViewById(R.id.likes);
                dislikes=itemView.findViewById(R.id.dislikes);
                dislike=itemView.findViewById(R.id.dislike);
                comments=itemView.findViewById(R.id.comments);
                description=itemView.findViewById(R.id.description);
                publisher=itemView.findViewById(R.id.publisher);
                progressBar = (ProgressBar) itemView.findViewById(R.id.progressBar);


            }
        }




        private void publisherInfo (final ImageView image_profile, final TextView username,final  TextView blood, final TextView publisher, final String userId ){
            DatabaseReference reference= FirebaseDatabase.getInstance().getReference("Users").child(userId);
            reference.addValueEventListener(new ValueEventListener() {
                @Override
                public void onDataChange(@NonNull DataSnapshot dataSnapshot) {

                    try {
                        User user=dataSnapshot.getValue(User.class);
                        Glide.with(mContext.getApplicationContext()).load(user.getImageurl()).into(image_profile);

                        username.setText(user.getUsername());
                        blood.setText(user.getBlood());

                        publisher.setText(user.getUsername());

                    }catch (Exception e){

                    }

                }

                @Override
                public void onCancelled(@NonNull DatabaseError databaseError) {

                }
            });
        }

    }

Answer 1

You can show a loading using a CircularProgressDrawable in the Glides´s placeholder. I copied it from my little project, it is in Kotlin, but is easy:

fun AppCompatImageView.loadImage(imageUri: String) {
    val circularProgressDrawable = CircularProgressDrawable(context)
    circularProgressDrawable.strokeWidth = 5f
    circularProgressDrawable.centerRadius = 30f
    circularProgressDrawable.start()

    Glide.with(context)
            .load(imageUri)
            .placeholder(circularProgressDrawable)
            .error(R.drawable.ic_close_black)
            .override(200, 300)
            .into(this)
}

Update after your comment... code in Java:

 void loadImage(AppCompatImageView yourImageView, String imageUri) {
        CircularProgressDrawable circularProgressDrawable = new CircularProgressDrawable(yourImageView.getContext())
        circularProgressDrawable.setStrokeWidth(5f);
        circularProgressDrawable.setCenterRadius(30f);
        circularProgressDrawable.start();

        Glide.with(yourImageView)
            .load(imageUri)
            .placeholder(circularProgressDrawable)
            .error(R.drawable.ic_close_black)
            .override(200, 300)
            .into(yourImageView);
    }

Answer 2

Like this in Java:

private void loadImage(ImageView yourImageView, String imageUri) {
    CircularProgressDrawable circularProgressDrawable = new CircularProgressDrawable(yourImageView.getContext())
    circularProgressDrawable.setStrokeWidth(5f)
    circularProgressDrawable.setCenterRadius(30f)
    circularProgressDrawable.start()

    Glide.with(yourImageView.getContext())
        .load(imageUri)
        .placeholder(circularProgressDrawable)
        .error(R.drawable.ic_close_black)
        .override(200, 300)
        .into(yourImageView);
}