I need to showing image in round corner view. Can it possible to make round corner with glide library?
If it is possible then how can we implement it?
@shailesh-fusionitechnology I managed to show images with rounded corners using RoundedCorners. Note the variation in the comment, in case you want to combine the rounded corners with a center crop transformation (e.g. when you don't know if the loaded image will always match your needed ratio).
Here is some kotlin code, hope that helps:
Define radius in dimens.xml:
<dimen name="corner_radius">8dp</dimen>
val radius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)
GlideApp.with(context)
.load(pictureUrl)
.transform(RoundedCorners(radius))
// Alternative: .transforms(CenterCrop(), RoundedCorners(radius))
.placeholder(R.drawable.placeholder_thumbnail_square_primary)
.error(R.drawable.placeholder_thumbnail_square_primary)
.transition(DrawableTransitionOptions.withCrossFade()).into(imageView)
The placeholder defined to show while loading or on error needs to be define with the same corner radius, since Glide transformations are only applied to the loaded image. The trick is to define the width and height of this image as matching to the ImageView into which we want to load. Otherwise the radius is scaled and this leads to mismatching effects.
Full example can be found here:
https://github.com/friederikewild/demoGlideTransformations
Note that I'm using the variation of Glide that includes the build of a GlideModule leading to GlideApp.with. But it might also work with just Glide.with
This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.
@friederikewild Will the Transformations work on SVGs? I am trying to do it to SVGs but not working.
You may refer to the issue I opened. https://github.com/bumptech/glide/issues/4026#issue-542631776
I still have problem with rounded corner transformation in Glide: https://github.com/bumptech/glide/issues/3020#issuecomment-576363866
A few of my image rounded & a few others not.
Unfortunately, even I also try the above options and from this SO answer here
Most helpful comment
@shailesh-fusionitechnology I managed to show images with rounded corners using
RoundedCorners. Note the variation in the comment, in case you want to combine the rounded corners with a center crop transformation (e.g. when you don't know if the loaded image will always match your needed ratio).Here is some kotlin code, hope that helps:
Define radius in dimens.xml:
The placeholder defined to show while loading or on error needs to be define with the same corner radius, since Glide transformations are only applied to the loaded image. The trick is to define the width and height of this image as matching to the
ImageViewinto which we want to load. Otherwise the radius is scaled and this leads to mismatching effects.Full example can be found here:
https://github.com/friederikewild/demoGlideTransformations
Note that I'm using the variation of Glide that includes the build of a
GlideModuleleading toGlideApp.with. But it might also work with justGlide.with