Open In App

How to Create a CircularImageView in Android using hdodenhof Library?

Improve
Improve
Like Article
Like
Save
Share
Report

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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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:

CircularImageView in Android using hdodenhof Library Output

 

Limitations

  • In this library, the ScaleType is always CENTER_CROP and you will get an exception if you try to change it.
  • Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType.
  • Using a TransitionDrawable with CircleImageView doesn’t work properly and leads to messed-up images.


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