Open In App

How to Create Circular ImageView in Android using CardView?

Improve
Improve
Like Article
Like
Save
Share
Report

Displaying an Image in Android is done easily using ImageView. But what if one wants to display a circular image? It is seen that many Android apps use CircularImageView to show the profile images, status, stories, and many other things but doing this with a normal ImageView is a bit difficult. This article will help to create a circular image using CardView. Through cardCornerRadius one can customize the corner of the ImageView. A sample image is given below to get an idea about what we are going to create in this article. We are going to implement this project using both Java and Kotlin Programming Language for Android.

Circular ImageView Example

 

Note: One may perform the same operation in another two methods. Please refer to the link below:

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Adding Dependency to the build.gradle File

 Go to Module build.gradle file and add this dependency and click on Sync Now button.

implementation 'androidx.cardview:cardview:1.0.0'

Step 3: Working with the XML Files

Next, go to the activity_main.xml file, which represents the UI of the project. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

Note: Change android:src="@drawable/your_image" to your Image Name

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Using CardView for CircularImageView -->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        app:cardCornerRadius="100dp">
  
        <!-- add a Image image.png in your Drawable folder -->
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/circular" />
    </androidx.cardview.widget.CardView>
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/cardView"
        android:layout_marginTop="25dp"
        android:gravity="center"
        android:text="Circular ImageView"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        android:textStyle="bold" />
</RelativeLayout>


Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    ImageView imageView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        imageView = findViewById(R.id.imageView);
          
        imageView.setOnClickListener(v -> 
            Toast.makeText(MainActivity.this, "This is a Circular ImageView", Toast.LENGTH_SHORT).show()
        );
    }
}


Kotlin




import android.os.Bundle
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
      
    private lateinit var imageView: ImageView
      
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        imageView = findViewById(R.id.imageView)
          
        imageView.setOnClickListener {
            Toast.makeText(this, "This is a Circular ImageView", Toast.LENGTH_SHORT).show()
        }
    }
}


Output:

Circular ImageView Example Output

 



Last Updated : 15 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads