Skip to content
Related Articles

Related Articles

How to Create a CircularImageView in Android using hdodenhof Library?
  • Last Updated : 18 Feb, 2021

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. 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 in the Android App. A sample image is given below to get an idea about what we are going to do in this article.

CirCleImageView

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?

Steps for Creating a CircularImageView

Step 1: Creating 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 choose Java as language though we are going to implement this project in Java language.



Step 2: Before going to the coding section first do some pre-task

  • Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop up.

implementation ‘de.hdodenhof:circleimageview:3.1.0’

Step 3: Designing the UI 

  • 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: MainActivity.java file

Here in this project there is nothing to do with the MainActivity.java 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);
  
    }
}

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.

Resources:

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 :