Android Glide placeholder size

Question

I have a problem with Android Glide. I am trying to quickly swap my image, they just become all placeholder size, and my placeholder image is very low size. So what I need t

Answer 1

What I did in this regard was to use override() to enforce image size. If you have a gridview and you need to have two images in each row, this is how you find the screen size in pixels to calculate the correct width and height of the image:

    WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
    Display display = wm.getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    placeholderWidth = size.x / 2 ;
    placeholderHeight = size.x * 3 / 2 ; // based on the image's height to width ratio

Once the desired width and height for each image is in hand, it's easy to use override:

    Glide.with(context)
            .load(url)
            .placeholder(R.drawable.loading)
            .override(placeholderWidth,placeholderHeight)                
            .into(viewHolder.imageViewHolder);

Answer 2

If I correctly understand your problem, you need to load images, but they must have width and height bigger than your placeholder image. To solve your problem you first should read documentation for Glide. I can't see your ImageView definition in the xml file, but i think that you use wrap_content attribute for width and height. If I am right there is your bottleneck. Before image loading is started, Glide gets exact ImageView width and height. After that it loads image from the network and at the same time resize it according to the one of the ImageView attributes(width or height). Thats why you get small images after loading. To solve your problem just set width or height of the ImageView in value that you expect to see. Other side of the image will be automatically calculated by the Glide logic.

Answer 3

I do it like mentioned below:

The idea is to set the scale type to as required by the place holder initially & attach listener to change the scale type again to as required by the downloaded image after the image is downloaded.

//ivBuilderLogo = Target ImageView
//Set the scale type to as required by your place holder
//ScaleType.CENTER_INSIDE will maintain aspect ration and fit the placeholder inside the image view
holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.CENTER_INSIDE); 

//AnimationDrawable is required when you are using transition drawables
//You can directly send resource id to glide if your placeholder is static
//However if you are using GIFs, it is better to create a transition drawable in xml 
//& use it as shown in this example
AnimationDrawable animationDrawable;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
     animationDrawable=(AnimationDrawable)context.getDrawable(R.drawable.anim_image_placeholder);
else
     animationDrawable=(AnimationDrawable)context.getResources().getDrawable(R.drawable.anim_image_placeholder);
animationDrawable.start();

Glide.with(context).load(logo_url)
                   .placeholder(animationDrawable)
                   .listener(new RequestListener<String, GlideDrawable>() {
                        @Override
                        public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource)
                        {
                           return false;
                        }

                        //This is invoked when your image is downloaded and is ready 
                        //to be loaded to the image view
                        @Override
                        public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource)
                        {   
                        //This is used to remove the placeholder image from your ImageView 
                        //and load the downloaded image with desired scale-type(FIT_XY in this case)
                        //Changing the scale type from 'CENTER_INSIDE' to 'FIT_XY' 
                        //will stretch the placeholder for a (very) short duration,
                        //till the downloaded image is loaded
                        //setImageResource(0) removes the placeholder from the image-view 
                        //before setting the scale type to FIT_XY and ensures that the UX 
                        //is not spoiled, even for a (very) short duration
                            holder.ivBuilderLogo.setImageResource(0);
                            holder.ivBuilderLogo.setScaleType(ImageView.ScaleType.FIT_XY);
                            return false;
                        }
                    })
                    .into( holder.ivBuilderLogo);

My transition drawable (R.drawable.anim_image_placeholder) :

(not required if using a static image)

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:drawable="@drawable/loading_frame1" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame2" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame3" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame4" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame5" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame6" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame7" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame8" android:duration="100" />-->
    <item android:drawable="@drawable/loading_frame9" android:duration="100" />
    <!--<item android:drawable="@drawable/loading_frame10" android:duration="100" />-->
</animation-list>

Answer 4

According to this issue on Glide GitHub page you can fix it with adding following line to your request of Glide:

  .dontAnimate()

That would make your full load line:

  Glide.with(context)
            .load("http://lorempixel.com/150/150")
            .placeholder(R.drawable.no_image)
            .override(100, 100)
            .dontAnimate()
            .into(imageView);