Introduction

Making an Android image appear circular is a common UI requirement for avatars and profile photos. The important detail is that a plain ImageView does not become circular just because its layout width and height are equal. You also need clipping or shape-aware rendering.

Today, the cleanest XML-first approach is often to use ShapeableImageView from Material Components. It gives you circular styling declaratively without writing a custom view for a basic avatar use case.

Why a Plain ImageView Is Not Enough

A regular ImageView only draws the image inside its rectangular bounds. Even if the view itself is square, the bitmap is still displayed in a rectangle unless you clip it or mask it.

That is why a circular background alone does not reliably produce a circular photo. The image content itself must be cropped or shaped.

This distinction matters because many “almost working” solutions only round the background or parent container while leaving the actual bitmap unmasked. The result looks circular at a glance but breaks immediately with transparent images or contrasting backgrounds.

XML Approach With ShapeableImageView

Add a Material shape overlay that defines a fully rounded corner treatment.

1<com.google.android.material.imageview.ShapeableImageView
2    android:id="@+id/avatar"
3    android:layout_width="72dp"
4    android:layout_height="72dp"
5    android:scaleType="centerCrop"
6    android:src="@drawable/profile"
7    app:shapeAppearanceOverlay="@style/CircleImage" />

Then define the style:

1<style name="CircleImage">
2    <item name="cornerFamily">rounded</item>
3    <item name="cornerSize">50%</item>
4</style>

With centerCrop, the image fills the view and the shape overlay clips it into a circle.

Why centerCrop Matters

Without the right scale type, the image may fit awkwardly inside the circle or leave empty space.

For profile images, centerCrop is usually the right choice because it fills the circular bounds while preserving aspect ratio.

If the image is rectangular, some edges will be cropped. That is generally desirable for avatars.

Alternative: Third-Party Image Libraries

If your app already uses Glide, Coil, or Picasso, those libraries often provide circle-crop transformations.

That approach is useful when images come from the network and you already rely on the library for:

• loading
• caching
• placeholders
• resizing

The XML shape still controls the view, while the loading library can preprocess the bitmap efficiently.

When a Custom View Is Needed

A custom circular image view may still be justified when you need:

• custom borders or gradients
• unusual clipping behavior
• highly optimized drawing for a specific design system

But for ordinary avatar rendering, a custom widget is often unnecessary extra code.

Add an Optional Border

You can combine circular image rendering with a stroke for profile styling.

1<com.google.android.material.imageview.ShapeableImageView
2    android:layout_width="72dp"
3    android:layout_height="72dp"
4    android:scaleType="centerCrop"
5    android:src="@drawable/profile"
6    app:shapeAppearanceOverlay="@style/CircleImage"
7    app:strokeColor="@android:color/white"
8    app:strokeWidth="2dp" />

This is a simple way to separate the avatar visually from a busy background.

Common Pitfalls

A common mistake is assuming a square ImageView is automatically circular. It is not.

Another mistake is applying only a circular background drawable while leaving the image itself unclipped, which produces a circular frame around a rectangular photo.

Developers also forget to set centerCrop, leading to images that look misaligned or letterboxed inside the circle.

Finally, avoid writing a custom view too early. For most standard avatar use cases, XML-based shape rendering is enough.

Summary

• A plain ImageView does not become circular without clipping or shape-aware rendering.
• 'ShapeableImageView with a 50 percent rounded corner overlay is a clean XML-first solution.'
• Use centerCrop so the image fills the circular bounds naturally.
• Add borders through stroke attributes if needed.
• Reserve custom image views for genuinely custom drawing requirements, not for basic circular avatars.