Glide: Can we create round corner image using glide?

Created on 9 Jul 2018  路  4Comments  路  Source: bumptech/glide

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?

stale

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:

<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

All 4 comments

@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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PatrickMA picture PatrickMA  路  3Comments

sant527 picture sant527  路  3Comments

kooeasy picture kooeasy  路  3Comments

billy2271 picture billy2271  路  3Comments

Anton111111 picture Anton111111  路  3Comments