Saltar al contenido

Barra de progreso al cargar la imagen usando Glide

Recabamos por el mundo online y así mostrarte la solución para tu duda, si continúas con dudas deja tu pregunta y contestamos porque estamos para ayudarte.

Solución:

Editar: Esto es súper simple ahora con 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)

Estos son algunos otros fragmentos de Glide


Respuesta anterior: También puede crear una barra de progreso normal y luego ocultarla en Glide’s onResourceReady().

El método al que se llamará cuando finalice la carga de recursos.


Ejemplo:

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() 
                @Override
                public boolean onLoadFailed(@Nullable GlideException e, Object model, Target target, boolean isFirstResource) 
                    progressBar.setVisibility(View.GONE);
                    return false;
                

                @Override
                public boolean onResourceReady(Drawable resource, Object model, Target target, DataSource dataSource, boolean isFirstResource) 
                    progressBar.setVisibility(View.GONE);
                    return false;
                
            )
            .into(imageView);

activity_main.xml (diseño):




    

    



Resultado:

ingrese la descripción de la imagen aquí

Puede establecer el valor de progreso lo que quiera con mi GlideImageLoader.

Espero que resuelva tu pregunta.

DEMOSTRACIÓN DE LA APLICACIÓN

Encapsulo el cargador de imágenes con el progreso en GlideImageLoader.java y ProgressAppGlideModule .java

Cómo implementar con 3 pasos:

1. build.gradle

//Glide
implementation 'com.github.bumptech.glide:glide:4.4.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.4.0'
implementation 'com.github.bumptech.glide:okhttp3-integration:4.4.0'

2. Clone GlideImageLoader.java y ProgressAppGlideModule.Java en su proyecto

3. Uso simple en cualquier lugar

RequestOptions options = new RequestOptions()
                    .centerCrop()
                    .placeholder(R.drawable.placeholder)
                    .error(R.drawable.ic_pic_error)
                    .priority(Priority.HIGH);

new GlideImageLoader(YOUR.imageView,  
                     YOUR.progressBar).load(url,options);

Código Java completo para clonar:

GlideImageLoader.java

public class GlideImageLoader 

    private ImageView mImageView;
    private ProgressBar mProgressBar;

    public GlideImageLoader(ImageView imageView, ProgressBar progressBar) 
        mImageView = imageView;
        mProgressBar = progressBar;
    

    public void load(final String url, RequestOptions options) 
        if (url == null 


    private void onConnecting() 
        if (mProgressBar != null) mProgressBar.setVisibility(View.VISIBLE);
    

    private void onFinished() 
        if (mProgressBar != null && mImageView != null) 
            mProgressBar.setVisibility(View.GONE);
            mImageView.setVisibility(View.VISIBLE);
        
    

ProgressAppGlideModule.java

@GlideModule
public class ProgressAppGlideModule extends AppGlideModule 

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) 
        super.registerComponents(context, glide, registry);
        OkHttpClient client = new OkHttpClient.Builder()
                .addNetworkInterceptor(new Interceptor() 
                    @Override
                    public Response intercept(Chain chain) throws IOException 
                        Request request = chain.request();
                        Response response = chain.proceed(request);
                        ResponseProgressListener listener = new DispatchingProgressListener();
                        return response.newBuilder()
                                .body(new OkHttpProgressResponseBody(request.url(), response.body(), listener))
                                .build();
                    
                )
                .build();
        registry.replace(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    

    public static void forget(String url) 
        ProgressAppGlideModule.DispatchingProgressListener.forget(url);
    
    public static void expect(String url, ProgressAppGlideModule.UIonProgressListener listener) 
        ProgressAppGlideModule.DispatchingProgressListener.expect(url, listener);
    

    private interface ResponseProgressListener 
        void update(HttpUrl url, long bytesRead, long contentLength);
    

    public interface UIonProgressListener 
        void onProgress(long bytesRead, long expectedLength);
        /**
         * Control how often the listener needs an update. 0% and 100% will always be dispatched.
         * @return in percentage (0.2 = call @link #onProgress around every 0.2 percent of progress)
         */
        float getGranualityPercentage();
    

    private static class DispatchingProgressListener implements ProgressAppGlideModule.ResponseProgressListener 
        private static final Map LISTENERS = new HashMap<>();
        private static final Map PROGRESSES = new HashMap<>();

        private final Handler handler;

        DispatchingProgressListener() 
            this.handler = new Handler(Looper.getMainLooper());
        

        static void forget(String url) 
            LISTENERS.remove(url);
            PROGRESSES.remove(url);
        

        static void expect(String url, UIonProgressListener listener) 
            LISTENERS.put(url, listener);
        

        @Override
        public void update(HttpUrl url, final long bytesRead, final long contentLength) 
            //System.out.printf("%s: %d/%d = %.2f%%%n", url, bytesRead, contentLength, (100f * bytesRead) / contentLength);
            String key = url.toString();
            final UIonProgressListener listener = LISTENERS.get(key);
            if (listener == null) 
                return;
            
            if (contentLength <= bytesRead) 
                forget(key);
            
            if (needsDispatch(key, bytesRead, contentLength, listener.getGranualityPercentage())) 
                handler.post(new Runnable() 
                    @Override
                    public void run() 
                        listener.onProgress(bytesRead, contentLength);
                    
                );
            
        

        private boolean needsDispatch(String key, long current, long total, float granularity)  current == 0 
    

    private static class OkHttpProgressResponseBody extends ResponseBody 
        private final HttpUrl url;
        private final ResponseBody responseBody;
        private final ResponseProgressListener progressListener;
        private BufferedSource bufferedSource;

        OkHttpProgressResponseBody(HttpUrl url, ResponseBody responseBody,
                                   ResponseProgressListener progressListener) 
            this.url = url;
            this.responseBody = responseBody;
            this.progressListener = progressListener;
        

        @Override
        public MediaType contentType() 
            return responseBody.contentType();
        

        @Override
        public long contentLength() 
            return responseBody.contentLength();
        

        @Override
        public BufferedSource source() 
            if (bufferedSource == null) 
                bufferedSource = Okio.buffer(source(responseBody.source()));
            
            return bufferedSource;
        

        private Source source(Source source) 
            return new ForwardingSource(source) 
                long totalBytesRead = 0L;

                @Override
                public long read(Buffer sink, long byteCount) throws IOException 
                    long bytesRead = super.read(sink, byteCount);
                    long fullLength = responseBody.contentLength();
                    if (bytesRead == -1)  // this source is exhausted
                        totalBytesRead = fullLength;
                     else 
                        totalBytesRead += bytesRead;
                    
                    progressListener.update(url, totalBytesRead, fullLength);
                    return bytesRead;
                
            ;
        
    

Estaba escribiendo una aplicación en Kotlin y tenía este problema exacto, pero, desafortunadamente, la respuesta aceptada estaba en Java. Entonces, lo reescribí en Kotlin.

Glide.with(context)
                .load("")
                .listener(object : RequestListener 
                    override fun onResourceReady(resource: Drawable?, model: Any?, target: Target?, dataSource: DataSource?, isFirstResource: Boolean): Boolean 
                        progressBar.visibility = View.GONE
                        return false
                    

                    override fun onLoadFailed(e: GlideException?, model: Any?, target: Target?, isFirstResource: Boolean): Boolean 
                        progressBar.visibility = View.GONE
                        return false
                    
                )
                .into(holder.imageView)

Aquí puedes ver las comentarios y valoraciones de los usuarios

Recuerda que tienes la capacidad de reseñar si te ayudó.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *