How to Create a CircularImageView in Android using hdodenhof Library?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.