Skip to content
Related Articles

Related Articles

How to Create Circular ImageView in Android using CardView?
  • Last Updated : 18 Feb, 2021

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. Note that we are going to implement this project using the Java language.

Sample image

Note:

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

Approach

Step 1: Create a New Project



To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency to the build.gradle file

 Go to 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 activity_main.xml file

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.java file

Finally, go to the MainActivity.kt file, and refer to the following code. Below is the code for the MainActivity.kt file. We have added a Toast message only. It Toasts a message as you click on the Image.

Java




import android.os.Bundle;
import android.view.View;
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 = (ImageView) findViewById(R.id.imageView);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "This is a Circular ImageView", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Output:

Output

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
My Personal Notes arrow_drop_up
Recommended Articles
Page :