How to fit Image into ImageView using Glide

Question

My concern is how to fit image using android:scaleType="fitXY" into image using Glide.

My ImageView is

<ImageView
    android:id="@+id/img_pager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:scaleType="fitXY" />

Loads image using Glide like this

Glide.with(context).load(url).placeholder(R.drawable.default_image).into(img);

but image is not getting fit into ImageView it show space on image either side as shown in screen I need it fitXY

score 89 · Accepted Answer · edited Dec 20 '18 at 12:58

89

You can use centerCrop() or fitCenter() methods:

Glide.with(context)
     .load(url)
     .centerCrop()
     .placeholder(R.drawable.default_image)
     .into(img)

or

Glide.with(context)
     .load(url)
     .fitCenter()
     .placeholder(R.drawable.default_image)
     .into(img)

You can also find more information at: https://futurestud.io/tutorials/glide-image-resizing-scaling

edited Dec 20 '18 at 12:58

Vadim Kotov

8,084
8
48
62

answered Dec 01 '15 at 14:17

ArtKorchagin

4,801
13
42
58

5

how to set scaletype for placeholder ? – Anand Savjani Sep 19 '16 at 06:18
3

On Android use this: Glide.with(getActivity()).load(imageSourceUrl) .apply(new RequestOptions().centerCrop()) – Alexei Sep 27 '18 at 10:44
6

Okay, the above answer shows to fit the image with **fitCenter** or **centerCrop**. But what about **fitXY**? Is there anyway to set fitXY instead of any other parameters? – dipakbari4 May 14 '19 at 20:00

OriolJ · Answer 2 · 2018-11-07T20:06:05.680

79

On Glide v4 you have to create a RequestOptions object, like this:

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

Glide.with(fragment)
    .load(url)
    .apply(options)
    .into(imageView);

More info

edited Nov 07 '18 at 20:06

answered Aug 17 '17 at 08:25

OriolJ

2,762
1
28
22

2

The result of options.centerCrop() is ignored – quangkid Mar 10 '18 at 02:51
6

Also as a more succinct option: Glide.with(fragment).load(url).apply(RequestOptions.centerCropTransform()).into(imageView); – dfinn Mar 23 '18 at 20:30

Ahamadullah Saikat · Answer 3 · 2018-09-06T10:00:32.350

<android.support.v7.widget.AppCompatImageView
    android:id="@+id/ivPhoto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="fitXY" />

.....................................

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

AppCompatImageView ivPhoto = findViewById(R.id.ivPhoto);

Glide.with(this)
            .load("https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg")
            .apply(new RequestOptions()
                    .placeholder(R.drawable.place_holder_gallery)
                    .error(R.drawable.ic_no_image)
            )
            .into(ivPhoto);

That worked perfectly for my case, thank you. – João Gabriel Jun 29 '21 at 23:06 — João Gabriel, Jun 29 '21 at 23:06

score 6 · Answer 4 · edited Oct 23 '20 at 08:09

6

You would use .centerCrop(), .centerInside() or .fitCenter()

Another way to do it is with a custom Transformation

edited Oct 23 '20 at 08:09

Cristan

12,083
7
65
69

answered Dec 01 '15 at 14:20

Empty2k12

475
12
34

Hi @Empty2k12, can you elaborate on custom Transformation? I have a custom masking transformation but I am unable to center fit or correctly crop the image keeping the aspect ratio consistent. – Bijon Desai Oct 12 '20 at 19:51

score 3 · Answer 5 · answered Jun 04 '19 at 06:36

If use Glide v4 GlideApp instance of Glide:

GlideApp.with(view.getContext())
        .load(url)
        .centerCrop()
        .into(view);

If use databinding:

@BindingAdapter("glideCropCenter")
public static void setProgress(ImageView view, string url) {
    GlideApp.with(view.getContext())
            .load(url)
            .centerCrop()
            .into(view);
}

In xml:

       <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:glideCropCenter="@{viewModel.url}" />

score 1 · Answer 6 · answered Sep 12 '20 at 05:26

You can call .override(horizontalSize, verticalSize). This will resize the image before displaying it in the ImageView.

Glide.with(context)
     .load(url)
     .override(horizontalSize, verticalSize)//resizes the image to these dimensions (in pixel).
     .into(img);

score 1 · Answer 7 · answered Jun 19 '21 at 14:44

My solution is to ignore BitmapTransformation for FIT_XY scale type.
Also set scale type to the corresponding types like below,

        val options = RequestOptions()

        mDesignOptions?.bgScaleType?.let {
            mScaleType = it
        }

        if (mScaleType == Settings.SCALE_TYPE_CENTER_CROP) {
            imgView.scaleType = ImageView.ScaleType.CENTER_CROP
            options.transform(CenterCrop())
        } else if (mBgScaleType == Settings.SCALE_TYPE_ORIGINAL) {
            imgView.scaleType = ImageView.ScaleType.FIT_CENTER
            options.transform(FitCenter())
        } else {
            imgView.scaleType = ImageView.ScaleType.FIT_XY
        }


        Glide.with(applicationContext)
            .load(imgPath) // Uri of the Photo
            .apply(options)
            .into(imgView)

How to fit Image into ImageView using Glide

7 Answers7

Linked