Android: Circular ImageView

Photo by Erlend Ekseth on Unsplash

Many android applications use circular ImageView to display profile pictures, status feeds, etc, but achieving it is not straightforward using the android ImageView widget. There is a very popular third-party library that helps achieve the same, but in this snippet, we will not be using any third-party library, it is quick and easy.

I will be using a CardView to achieve the same. Following is the code snippet for the same.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <androidx.cardview.widget.CardView
        android:id="@+id/cvStories"
        android:layout_width="60dp"
        android:layout_height="60dp"
        app:cardCornerRadius="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/ivStory"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:background="@drawable/placeholder_image"
            android:contentDescription="@string/story_image"
            tools:background="@android:color/holo_orange_light" />

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Inside the CardView, I have added an ImageView with a drawable source.

The main points to note here are:

The value of layout_width and layout_height must be equal to make the ImageView circular, and the app:cardCornerRadius value must be at least half of the layout_width / layout_height, and you are good to go.