How to Create Circular ImageView in Android using CardView? - GeeksforGeeks

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.
Note:
One may perform the same operation in another two methods. Please refer to the link below.
How to create a Circular image view in Android without using any library?
How to Create a CircularImageView in Android using hdodenhof Library?
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: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">      <!-- 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();            }        });    }}
android
Android-View
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
Android Listview in Java with Example
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Reverse a string in Java
Arrays.sort() in Java with examples