Why are my images compressed after upload using the slip library

Question

Hi, I populate the gridview with the slide image loader library, when they are first called in my fragment, they look like But after scrolling up and down, they change and look like this: Is this something I am doing with my gridview, a slide library, or is it something else similar to my placeholder image? in the second screenshot. If I click on the image, it lights up to show that it actually fills the whole space, does anyone know what I'm doing wrong here? I tried changing the call in sliding mode using the center and this way, but it doesn't seem to matter, I'm not sure how I would determine the width and height of each cell, any suggestions are welcome

EDIT this is how im call glide

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

Answer 1

In fact, you need to specify the width and height of the size for 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 cause the slide, you must dynamically change your width and height using the override method. This is the maximum width and height for your 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 the .dontAnimate () method to solve the problem.

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

Answer 3

In any case, there are methods such as .fitCenter () or .centerCrop (). Try using these methods in

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

Answer 4

For an almost identical task, I needed to add .override (maxItemWidth, maxItemHeight) . This seemed to prevent what Glide was doing, causing the images to shrink.

Note: maxItemWidth / maxItemHeight are the values ​​that I used for the recycler elements container, but the ImageView that contains the image is actually smaller (due to border and label).

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

Here is my xml if you're interested:

 <?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 5

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

import Glide into Gradle (currently the newest version 4.8.0):

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

Your ImageView in the RecycleView element should look like this:

 <?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 6

Overriding for rectangular images can cause the image to not display correctly when the height is sometimes larger and the width sometimes.

Here's what I did, in case someone wants to explore. This fixed the Glide bug of reducing images when scrolling the RecyclerView up and down.

For your information: I use androidx instead of support libraries, but it should work with ImageView and AppCompatImageView widgets as well.

Here is a snippet from the layout of the RecyclerView element:

 <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 onBindViewHolder adapter to 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. Prior to Glide binding, ImageView was set to a layout of 0, 0, 0, 0. This ensures that Glide interprets it as new layout inflation and does not use a caching strategy.

2. minWidth set to 400dp , and layout_width set to match_parent and layout_height set to wrap_content .

3. When binding, centerCrop() will be used at runtime, so it does not matter which scaleType you set at design time in the xml layout.

Note: this example uses the image download from the external external storage directory of the local device. use other implementations to download from a network or URL

Credits: Layout customization for all zeros was mentioned and recommended by TWiStErRob on the Glide Github community forum.

@ https://github.com/TWiStErRob

For a question No. 1591

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

layout_height , if you set the ImageView to xml layout with absolute layout_height and layout_width - say 400dp and 300dp respectively, Glide works fine. Only when the sizes are different for each image can you see the problem.