Search code examples
androidandroid-glide

Progress bar while loading image using Glide


Can I load a spinner in placeholder with rotating animation until the image is loaded using Glide?

I am trying to do that using .placeholder(R.Drawable.spinner) no animation is coming up?

It would be great if somebody could help me out?

Thanks!


Solution

  • Edit: This is super simple now with the CircularProgressDrawable

    build.gradle

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
    

    MyGlideModule.kt

    @GlideModule
    class MyGlideModule : AppGlideModule()
    

    MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
    
      val circularProgressDrawable = CircularProgressDrawable(this)
      circularProgressDrawable.strokeWidth = 5f
      circularProgressDrawable.centerRadius = 30f
      circularProgressDrawable.start()
    
      GlideApp.with(applicationContext)
          .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
          .placeholder(circularProgressDrawable)
          .into(a_main_image)
    }
    

    These are some other Glide snippets


    Old answer: You could also create a normal ProgressBar, and then hide it on Glide's onResourceReady().

    The method that will be called when the resource load has finished.


    Example:

    MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        final ImageView imageView = (ImageView) findViewById(R.id.img_glide);
        final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);
    
        Glide.with(this)
                .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        progressBar.setVisibility(View.GONE);
                        return false;
                    }
    
                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        progressBar.setVisibility(View.GONE);
                        return false;
                    }
                })
                .into(imageView);
    }
    

    activity_main.xml (layout):

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:visibility="visible" />
    
        <ImageView
            android:id="@+id/img_glide"
            android:layout_width="match_parent"
            android:layout_height="100dp" />
    
    </RelativeLayout>
    

    Result:

    enter image description here