How to Create Circle Image View using CardView in Android App

We can easily use an Android ImageView to show Images 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 stuff, 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 for this tutorial we will use CardView to create a circular image view our app in android studio.

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

How to Create Circle Image View using CardView in 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 the Finish button after filling in 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 the 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 that 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 the 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 shown 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:

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) ;
    }
}

Also Read: Add a NestedScrollView in Android App

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.

The seamless integration of CardView's material design and the versatility of ImageView enables you to elevate your app's visual aesthetics. As you delve deeper into Android app development, remember that paying attention to UI details can significantly enhance user experience and engagement.

If you face any issues while doing this, please share it in the comment section below and we will be happy to help.

Frequently Asked Questions(FAQs)

1. What is CardView in Android?

CardView is a UI component introduced in the Android Support Library that allows you to create visually appealing cards with rounded corners. It provides a flexible and customizable container for displaying content, making it ideal for various app design scenarios.

2. Why should I use a circular image view in my Android app?

Using a circular image view in your Android app adds a visually pleasing touch and can enhance the overall aesthetics. Circular image views are particularly useful when displaying user profile pictures, avatars, or any other images where a circular shape aligns with the app's design language.

3. How can I create a circle image view using CardView in Android?

To create a circle image view, you can use the CardView as the parent container and the ImageView inside it. Apply appropriate width and height constraints to the ImageView, set its scale type to centerCrop, and utilize appropriate attributes to achieve the circular shape, such as cornerRadius.

4. Can I customize the appearance of the circular image view with CardView?

Absolutely! CardView provides various attributes that allow you to customize its appearance, including the background color, elevation, padding, and more. You can experiment with these attributes to achieve the desired visual style for your circular image view.

5. Are there any performance considerations when using CardView with circular image views in Android?

While CardView itself has minimal impact on performance, keep in mind that circular image views may require additional resources for image loading and rendering. To optimize performance, consider using image-loading libraries like Picasso or Glide, which offer caching mechanisms and resizing options for efficient image handling.

You may also like:

• Gradient Drawable in Android - Create Gradient Backgrounds

• How to add Tapadoo Alerter in Android App

• How to add Admob Banner Ads in Android App

• Top 13 Android Emulator Software