Circular imageView with textview by using Cardview

Welcome to "Android Super Nerds". Thanks for coming back to my site, I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

So back to the topic title which states "Circular Image by using Cardview layout".

Before I begin, I would like to express that I really understand, how tough it would have been to create an ImageView in a circular shape. I mean, seriously we all think that it is going to be too simple and easy to implement just a circle shape ImageView. 

But its a sweet lie, because mostly what we try to achieve via creating a drawable gradient XML file with rounded curves and try to dumb the ImageView into it.

OR

set this drawable as a background for an ImageView and using the src attribute try to display image. The outcome is not what we are expected mostly. Sometimes it looks like ↓

This might be happening due to some reason:-

1. The image size is too large.
2. Layout overlapping is not proper.

Anyways the most common and easy way to display circular image is to dumb the ImageView (as it is) inside the CardView.

And as we know CardView by default had the previous articles attribute so by using it, making the circular view is an easy task.

Now without wasting more time, allow me to show you guys "How To Make It Happen".

Requirement:
First, get some good-resolution images and add them to a drawable folder. So we have added an image of good-resolution i.e. 191*186 ↓

Code:
Explanation:
As we are focusing to display a small circular image, we had considered and had fixed width and height as 150dp * 148dp.
Now give approximate half of the width or height size to its corner, we had considered and had fixed cardCornerRadius as 75dp.

Output:

So as you can see how CardView is easy to implement a circular ImageView. Here image had to be cropped, more like it is overlapped by the CardView corner.

That's All Guys.

If you guys have any questions about any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.

Till then "Happy Coding".

---

Update (September 2026): circular images with ShapeableImageView and Jetpack Compose

Wrapping an ImageView in a CardView with a huge corner radius works, but there are two cleaner ways today: ShapeableImageView (Material Components) for XML and Modifier.clip(CircleShape) for Compose.

1. XML: ShapeableImageView

Add com.google.android.material:material, then define a shape style that rounds every corner by 50%:

<!-- res/values/styles.xml -->
<style name="CircleImage">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<!-- layout -->
<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/avatar"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:scaleType="centerCrop"
    android:src="@drawable/profile"
    android:contentDescription="Profile photo"
    app:shapeAppearanceOverlay="@style/CircleImage"
    app:strokeColor="@color/white"
    app:strokeWidth="2dp" />

Keep the width and height equal. Otherwise the 50% radius produces an oval instead of a circle. You can also build the same shape in Kotlin:

binding.avatar.shapeAppearanceModel = binding.avatar.shapeAppearanceModel
    .toBuilder()
    .setAllCornerSizes(ShapeAppearanceModel.PILL)
    .build()

2. Text on top of the circle (the CardView layout from this post)

If you still want the label over the picture as in the original example, put the ShapeableImageView and the TextView in a FrameLayout (or ConstraintLayout) and set android:layout_gravity="center" on the text. You no longer need a CardView just to get round corners.

3. Jetpack Compose

@Composable
fun CircleAvatar() {
    Box(contentAlignment = Alignment.Center) {
        Image(
            painter = painterResource(id = R.drawable.profile),
            contentDescription = "Profile photo",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(96.dp)
                .clip(CircleShape)
                .border(2.dp, Color.White, CircleShape)
        )
        Text(
            text = "Vinod",
            color = Color.White,
            fontWeight = FontWeight.Bold
        )
    }
}

Order matters in Compose: apply size first, then clip, then border, and pass the same shape (CircleShape) to both clip and border so the outline follows the circle exactly.

Which one should you use?

• XML/View app: ShapeableImageView with a 50% corner size.
• Compose app: Modifier.clip(CircleShape).
• Old code: the CardView approach still works and needs no extra library, but you cannot draw a stroke around the circle as easily.