How to Create a CircularImageView in Android using hdodenhof Library?

Last Updated : 15 Aug, 2022

It is seen that many Android Applications use CircularImageView to show the profile images, status, stories, and many other things but doing this with a normal ImageView is a bit difficult. So to do so use hdodenhof CircleImageView Library. It's a fast circular ImageView perfect for profile images. This is based on RoundedImageView from Vince Mi. So in this article, let's add a CircleImageView to the Android App. A sample image is given below to get an idea about what we are going to do in this article.

CircularImageView in Android using hdodenhof Library

Note: To create a CircularImageView in Android without using any library please refer to How to create a Circular image view in Android without using any library?

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 'de.hdodenhof:circleimageview:3.1.0'

Step 3: Working with the XML Files

Create a CircleImageView inside the activity_main.xml file and set the android:src="@drawable/mountain". The complete code of the activity_main.xml file is given below.

XML

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout      xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     xmlns:app="http://schemas.android.com/apk/res-auto"     tools:context=".MainActivity">      <!-- Circular Image View  -->     <de.hdodenhof.circleimageview.CircleImageView         app:civ_border_width="4dp"         android:layout_centerInParent="true"         android:src="@drawable/mountain"         app:civ_border_color="#FF000000"         android:layout_width="300dp"         android:layout_height="300dp"/>  </RelativeLayout>

Step 4: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Since there is no change in MainActivity File, So keep it as it is.

Java

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

Kotlin

import android.os.Bundle import androidx.appcompat.app.AppCompatActivity  class MainActivity : AppCompatActivity() {     override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)     } }

Output: