2026-09-11 · Q&A guide

Create Rounded Corner ImageView in Android XML – Quick Guide

Learn how to display images with rounded corners directly in XML using ShapeDrawables, CardView, or a lightweight custom view.

Why Rounded Corners Matter

Rounded corners give UI a modern look, improve visual hierarchy, and help images blend with card or list layouts. They also reduce visual noise on sharp edges.

Method 1: ShapeDrawable Mask

Wrap the image in an ImageView and apply a background that masks the corners. This requires no Java code and works on all API levels.

<ImageView
    android:id="@+id/img_round"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:scaleType="centerCrop"
    android:src="@drawable/sample"
    android:background="@drawable/round_mask"
    android:clipToOutline="true" />

<!-- res/drawable/round_mask.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent" />
    <corners android:radius="12dp" />
</shape>

Method 2: CardView Wrapper

Place the ImageView inside a CardView and set the corner radius. CardView handles clipping automatically and is part of the Material Components library.

<androidx.cardview.widget.CardView
    android:layout_width="120dp"
    android:layout_height="120dp"
    app:cardCornerRadius="12dp"
    app:cardUseCompatPadding="true"
    app:cardPreventCornerOverlap="false">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/sample" />
</androidx.cardview.widget.CardView>

Method 3: Custom RoundedImageView

Create a small subclass that overrides onDraw to clip the canvas. This gives full control over corner radius and can be reused across projects.

// RoundedImageView.kt
class RoundedImageView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0
) : AppCompatImageView(context, attrs, defStyle) {

    private val radius = 12f * resources.displayMetrics.density
    private val path = Path()

    override fun onDraw(canvas: Canvas) {
        val rect = RectF(0f, 0f, width.toFloat(), height.toFloat())
        path.reset()
        path.addRoundRect(rect, radius, radius, Path.Direction.CW)
        canvas.clipPath(path)
        super.onDraw(canvas)
    }
}

Performance Tips & Compatibility

Use clipToOutline for API 21+ to avoid custom drawing. Avoid setting both background and image drawable when using ShapeDrawable to reduce overdraw. For older APIs, the custom view method is safe.

Takeaway: Rounded corners can be added in XML without extra libraries by using ShapeDrawables, CardView, or a lightweight custom view.

People also ask

Can I change the corner radius at runtime?

Yes – for CardView use app:cardCornerRadius or call setCardCornerRadius(). For ShapeDrawable, modify the drawable’s radius property. For the custom view, expose a setter that updates the radius and calls invalidate().

Will this affect image loading libraries like Glide?

Glide can load into the ImageView normally; the clipping is handled by the view or background. If you use a custom view, pass the image to the parent ImageView or override setImageDrawable.

Inspired by a public discussion on Stack Overflow. This article is an original explanation for learners.

← All posts