Glide: show image with radius corners only on top

user_8945148 0
Viewed 6453

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:

radius

Is it possible by Glide?

android-glide android
2 Answers

You can use :

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

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>
user_71815830
Related