Open In App

How to Create a CircularImageView in Android using hdodenhof Library?

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.

 

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




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




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:

 

Limitations


Article Tags :