How to Create Circle Image View using CardView in Android App

We can easily use an Android ImageView to show Image in our App. But what if we want to show a circular image on our App screen, how will we do it? It is not possible to do it using a simple ImageView as it is not made for doing this type of stuffs, so to do so we have to use an external library.

One such external library is the hdodenhof module which provides the hdodenhof CircleImageView using which we can create a simple CircleImageView, but or for this tutorial we will use CardView to create a circular image view our our app in android studio.

So let's create a simple Circular ImageView using CardView in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat) )

4. Next click on Finish button after filling the above details

5. Now wait for the project to finish building.

Step 2: Adding the CircleImageView dependency

To show the circular image in our app we also have to implement the hdodenhof CircleImageView in our app, to do so follow the below steps.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" shown at the top:

dependencies {
    //Adding the card view library
    implementation 'androidx.cardview:cardview:1.0.0'
}

Step 3: Modify activity_main.xml

So before applying any changes to the activity_main.xml file we need an image which we will show in the CircleImageView, so you can download any image and put the image in the app -> res -> drawable and give it a suitable name.

Now go to app -> res -> layout -> activity_main.xml and remove the default code then change the layout to Android RelativeLayout and inside the layout add CardView as shown below:

 <!-- Card View -->
<androidx.cardview.widget.CardView
    app:cardElevation = "16dp"
    app:cardCornerRadius = "160dp"
    android:layout_margin = "16dp"
    android:foregroundGravity = "center"
    android:layout_centerInParent = "true"
    android:layout_width = "300dp"
    android:layout_height = "300dp">
</androidx.cardview.widget.CardView>

Now inside the CardView we will add a simple ImageView with following attributes:

• android:src="@drawable/img": Where img is the name of the image which we have pasted in the drawable folder.

• android:scaleType="centerCrop": It means to scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

<!-- simple image view -->
<ImageView
    android:scaleType = "centerCrop"
    android:src = "@drawable/img"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"/>

The complete code of activity_main.xml is show below:

<?xml version=  "1.0" encoding=  "utf-8" ?>
<RelativeLayout
    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 =  "match_parent"
    android:layout_height =  "match_parent"
    tools:context =  ".MainActivity">

    <!-- Card View -->
    <androidx.cardview.widget.CardView
        app:cardElevation = "16dp"
        app:cardCornerRadius = "160dp"
        android:layout_margin = "16dp"
        android:foregroundGravity = "center"
        android:layout_centerInParent = "true"
        android:layout_width = "300dp"
        android:layout_height = "300dp">

        <!-- simple image view -->
        <ImageView
            android:scaleType = "centerCrop"
            android:src = "@drawable/img"
            android:layout_width = "match_parent"
            android:layout_height = "match_parent"/>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

Android CardView Attributes:

Following are the few main attributes available in the CardView:

Attribute	Description
android:layout_width	It is used to set the width of the card view
android:layout_height	It is used to set the width of the card view
app:cardCornerRadius	It is used to set the card corner radius Note: To make a perfect circular card view make sure that the value is greater than 160d

Note: The value of layout_width and layout_height must be equal to make the circular image view.

You can change the size of the image view by changing the width and height of the CardView because the ImageView's layout_width and layout_height is set to match_parent.

Step 4: MainActivity.java file

There is nothing to do with the MainActivity.java file for this project, so keep it as it is.

//MainActivity.java file
package com.studytonight.project;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate ( Bundle savedInstanceState ) {
        super.onCreate(savedInstanceState) ;
        setContentView(R.layout.activity_main) ;
    }
}

Output:

In the below snapshots, you can see how the Circle Image View using card view will look in the android application.

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a Circle Image View using card view in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

---