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.
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 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.Bundleimport android.widget.ImageViewimport android.widget.Toastimport 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:
