How to fit Image into ImageView using Glide
AndroidImageAndroid LayoutCropAndroid GlideAndroid Problem Overview
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
Android Solutions
Solution 1 - Android
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
Solution 2 - Android
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);
Solution 3 - Android
<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);
Solution 4 - Android
You would use .centerCrop()
, .centerInside()
or .fitCenter()
Another way to do it is with a custom Transformation
Solution 5 - Android
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}" />
Solution 6 - Android
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);
Solution 7 - Android
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)