Why do my images shrink after loading with glide library

Question

Hi I'm populating a gridview with glide image loader library when they first get called into my fragment they look like this But after scrolling up and down they are resized and look like this Is this something I'm doing with my gridview, the glide library, or is it something else like my placeholder image? on the second screenshot If I press on an image it lights up to show it is in actual fact filling that whole space, anyone know what I'm doing wrong here? I've tried changing the call in glide playing with centercrop and such but it seems to make no difference, I'm not sure how I would work out the width and height of each cell, any suggestions welcome

EDIT here is how im calling glide

   Glide.with(getActivity())
                .load(mThumbIds[position])
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.ic_drawer)
                .centerCrop()
                .override(500,300)
                .into(imageView);

Answer 1

Actually you have to give fix width and height to your image container(ImageView).

<ImageView
    android:id="@+id/channelImage"
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:layout_centerHorizontal="true"
    android:layout_margin="10dp"
    android:src="@drawable/sama" />

Then when you call glide you have to override your width and height dynamically with override method. This is maximum Width and height for you container.

Glide.with(getActivity())
                    .load("your url")

                    .placeholder(R.drawable.tv2v_icon)
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .fitCenter()
                    .override(500,500)
                    .into(channelImage);

hope this can help you.

Answer 2

Use .dontAnimate() method to solve the issue.

Glide.with(context)
                .using(new FirebaseImageLoader())
                .load(pathReference)
                .dontAnimate()
                .placeholder(R.drawable.place_holder)
                .into(holder.logo);

Answer 3

Following helped me:

1) Used adjustViewBounds = "true" in your Image View -> This will make the image view maintain its aspect ratio according to its image when it draws/redraws/resizes

2) Set layout_width = match_parent and layout_height = wrap_content for the recycler view's item view xml, and also for the Image View.

Reason:

Suppose Recycler view is set up with Grid Layout Manager having 2 columns in vertical orientation It will force the recycler view's item row's xml to be of half the screen width. Due to value of match_parent in the item row's and its chid's (imageview) layout_height attribute, it will result in image become half the screen's width. Now, due to adjustViewBounds = true, the image view would itself adjust its height to maintain the aspect ratio.

Answer 4

Anyway there are methods like .fitCenter() or .centerCrop() .Try using this methods in

    Glide.with(getApplicationContext())
                            .load("")
                            .centerCrop()
                            .placeholder(R.drawable.ic_launcher)
                            .crossFade()
.override(1000,1000)
                            .into(myImageView); 
           .

Answer 5

For an almost identical problem all I had to do was add .override(maxItemWidth, maxItemHeight). This seemed to prevent whatever Glide was doing that caused the images to shrink.

Note: maxItemWidth / maxItemHeight are the values I used for the recycler view item container, but the ImageView that holds the image is actually smaller (because of a border and label).

    Glide
        .with(context)
        .load(categoryItem.getThumbnail())
        .asBitmap()
        .fitCenter()
        .override(itemWidth, itemHeight)
        .into(holder.imgIcon);

Here is my xml if curious:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@id/item_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_gravity="center_vertical"
             android:orientation="vertical"
             android:padding="4dp">


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_white_rectangle"
        android:padding="2dp"
        >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />

    </FrameLayout>

</FrameLayout>

Answer 6

I found a solution that works in version Glide V4 (4.8.0)

import 'Glide' in gradle (Currently, the newest version is 4.8.0):

    implementation 'com.github.bumptech.glide:glide:4.8.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

your ImageView in RecycleView item should look like that:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher_background" />

    </RelativeLayout>

and in your adapter:

        final Content content = getItem(position);
        ImageViewHolder viewHolder = (ImageViewHolder) holder;

        RequestOptions options = new RequestOptions();
        options.optionalFitCenter();

        Glide.with(Application_News16.getAppContext())
                .load(content.getValue())
                .apply(options)
                .apply(new RequestOptions()
                        .placeholder(R.drawable.img_loading_s)
                        .error(R.drawable.img_error_s))
                .into(viewHolder.image);

Answer 7

Overriding for rectangular images could lead the image not correctly displayed when height is sometimes greater and width some time else.

Here is what I did, just in case someone wants to explore. This fixed the Glide bug of shrinking the images when the RecyclerView is scrolled up and down.

FYI: I am using androidx instead of the support libraries, but it should work with ImageView and AppCompatImageView widgets as well.

Here is the snippet from the RecyclerView's Item Layout:

<RelativeLayout...
       <androidx.appcompat.widget.AppCompatImageView
           android:id="@+id/attachment_image"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:adjustViewBounds="true"
           android:background="@drawable/camera_image_preview_default"
           android:minWidth="400dp"
           android:scaleType="centerCrop" />

</RelativeLayout>

And Here is the Code in my adapter onBindViewHolder override:

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    ....
    ....
    attachmentImage.layout(0, 0, 0, 0);
    Glide.with(context)
        .load(Uri.fromFile(new File(AppGlobals.IMAGES_THUMBNAIL_STORE_PATH + packet.getImageFileName())))
        .placeholder(ResourcesCompat.getDrawable(context.getResources(), R.drawable.image_loading_placeholder, null))
        .centerCrop()
        .error(ResourcesCompat.getDrawable(context.getResources(), R.drawable.missing_thumbnail, null))
        .into(attachmentImage);
    ....
    ....
}

If you notice,

1. Before the Glide binding, the ImageView has been set to layout 0, 0, 0, 0. This will ensure Glide interprets it as a new layout inflation and not use Cache Strategy.

2. The minWidth has been set to 400dp, while the layout_width has been set to match_parent and layout_height has been set to wrap_content. You can manipulate the minWidth to your choice of limit.

3. The binding will use centerCrop() at runtime so it doesn't really matter what scaleType you set at design time in the xml layout.

FYI: This example uses loading an image from the local device's public external storage directory. use other implementations to load from network or URL

Credits: The setting of layout to all zeros was mentioned and recommended by TWiStErRob in the Glide Github Community Forum.

@ https://github.com/TWiStErRob

For the issue #1591

https://github.com/bumptech/glide/issues/1591

On a side note, if you set the ImageView in the xml layout with absolute layout_height and layout_width - say 400dp and 300dp respectively, Glide works perfectly. Its only when the sizes are different for every image, one sees the problem.