Glide: show image with radius corners only on top

Question

I use Glide. Here snippet:

Glide.with(context).load(referenceUrl).into(holder.imageViewPhoto);

OK. It's work fine. But I need image to show with radius corners only on TOP.

Something like this:

Is it possible by Glide?

Try this with some customizations : http://thedeveloperworldisyours.com/android/rounded-corners-with-glide/ — Vidhi Dave, Nov 17 '17 at 12:49
Nice. It's work. One question: int sCorner = 10 - it's on dp or pixels? — Alex, Nov 17 '17 at 13:06
Use [This link](https://stackoverflow.com/questions/24735214/android-how-to-programmatically-round-only-top-corners-of-a-bitmap) and create a Custom transformation for glide .. — ADM, Nov 17 '17 at 13:16
@ADM, thanks! I got another [link](https://stackoverflow.com/questions/2459916/how-to-make-an-imageview-with-rounded-corners/5252726) there which helped me with rectangular images. — CoolMind, Dec 15 '20 at 21:19

score 30 · Answer 1 · answered Jun 11 '20 at 09:40

30

You can use :

requestOptions.centerInside().transform(new CenterInside(), new GranularRoundedCorners(topLeft, topRight, bottomRight, bottomLeft))

answered Jun 11 '20 at 09:40

Ranzz

396
3
10

Where does GranularRoundedCorners come from? – GudniPall Mar 18 '21 at 12:49
1

@GudniPall GranularRoundedCorners is a part of the Gilide library. Upgrade to the latest version of the library. – Ranzz Mar 19 '21 at 07:00
Thanks. Sorry I thought I had the latest version. – GudniPall Mar 19 '21 at 15:20

score 2 · Answer 2 · edited Jul 25 '22 at 02:02

If your are using Glide 3.7 =>

val multiLeftTopCorner: MultiTransformation<Bitmap> = MultiTransformation(
    RoundedCornersTransformation(context, 15f, 0, RoundedCornersTransformation.CornerType.TOP_RIGHT),
    RoundedCornersTransformation(context, 15f, 0, RoundedCornersTransformation.CornerType.TOP_LEFT)
)

Glide.with(context)
    .load(IMAGE_URL)
    .asBitmap()
    .transform(multiLeftTopCorner)
    .placeholder(R.drawable.no_image)
    .into(imageView)

If your using latest Glide version 4.13

Glide.with(this)
            .load(imageUrl)
            .transform(new GranularRoundedCorners(75, 75, 0, 0))
            .into(imageView);

But the better option is ShapeableImageView(Material library com.google.android.material.imageview.ShapeableImageView)

<com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/imageView"
      app:srcCompat="@drawable/ic_image" />
    
imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel()
.toBuilder().setTopLeftCorner(CornerFamily.ROUNDED, 10)
            .setTopRightCorner(CornerFamily.ROUNDED, 10)
            .build())

You can also apply in the xml the shapeAppearanceOverlay parameter:

<com.google.android.material.imageview.ShapeableImageView
      app:shapeAppearanceOverlay="@style/customRoundedImageView"
      app:srcCompat="@drawable/ic_image" />

with:

<style name="customRoundedImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>   
    <item name="cornerSizeTopRight">8dp</item>
  </style>

Glide: show image with radius corners only on top

2 Answers2