How to Create CircleImageView using hdodenhof in Android App

Android app development has been one of the most popular and sought-after skills in the software industry. Creating visually appealing user interfaces is a crucial aspect of any Android application. CircleImageView is a widely used UI element in Android apps that enhances the visual aesthetics of the app by displaying images in a circular shape. In this article, we will cover the process of how to create CircleImageView using hdodenhof library in Android app development.

Hdodenhof library is a popular and widely used open-source library for Android app development. It provides easy-to-use classes and methods for creating CircleImageView in Android apps. With this library, developers can easily display images in circular shapes, add borders, and customize the view according to their requirements. In the following sections, we will go through the steps required to create CircleImageView using hdodenhof library in an Android app.

What is CircleImageView?

It is mainly used for creating a circular profile picture in your Android app but it is not limited to that. You can use it according to your needs in your app. CircleImageView is based on the RoundedImageView from Vince Mi which itself is based on techniques recommended by Romain Guy with some changes and advancements.

It uses a BitmapShader and,

• create a copy of the original bitmap

• It uses a clipPath (which is neither hardware accelerated nor anti-aliased)

• It uses setXfermode to clip the bitmap (it means drawing twice to the It canvas)

Limitations of CircleImageView

• Using the TransitionDrawable with CircleImageView will not work properly and it will lead to messed-up images.

• The ScaleType of CircleImageView is always CENTER_CROP and if we try to change it we get an exception. So it is perfect for the profile pictures.

• Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType

• If you use an image-loading library like Picasso or Glide, you need to disable their fade animations to avoid messed-up images. For Picasso we use the noFade() option and for Glide use dontAnimate(). If we Want to keep the fadeIn animation, firstly we have to fetch the image Target and then apply a custom animation ourselves when receiving the Bitmap.

So let's implement a simple CircleImageView in our Android app.

How to Create CircleImageView using hdodenhof in Android App

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ), and minimum SDK(we are using API 19: Android 4.4 (KitKat) )

4. Next, click on the Finish button after filling in the above details

5. Now wait for the project to finish building.

Step 2: Adding the CircleImageView dependency

To show the circular image in our app we also have to implement the hdodenhof CircleImageView in our app, to do so follow the below steps.

Go to Gradle Scripts->build.gradle (Module: app) section import the below dependencies and click the "sync Now" shown at the top:

dependencies {
    //adding circle image view
    implementation 'de.hdodenhof:circleimageview:3.1.0'

}

Now our build.gradle file will look like this:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.3"

    defaultConfig {
        applicationId "com.studytonight.project"
        minSdkVersion 19
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    //adding circle image view
    implementation 'de.hdodenhof:circleimageview:3.1.0'

}

Step 3: Modify activity_main.xml

Before applying changes to the activity_main.xml file we need an image which we will show in the circleImageView, so you can download any image and past the image in the app->res->drawable

Now go to app->res->layout->activity_main.xml and add the CircleImageView as shown below:

  <!-- circle image view to show the image -->
<de.hdodenhof.circleimageview.CircleImageView
    app:civ_border_width= "8dp"
    app:civ_border_color= "@color/colorPrimary"
    android:src= "@drawable/indian_flag_image"
    android:layout_centerInParent= "true"
    android:layout_width= "240dp"
    android:layout_height= "240dp"/>

The complete code of activity_main.xml is shown below:

<?xml version=  "1.0" encoding=  "utf-8"?>
<RelativeLayout xmlns:android=  "http://schemas.android.com/apk/res/android"
    xmlns:app=  "http://schemas.android.com/apk/res-auto"
    xmlns:tools=  "http://schemas.android.com/tools"
    android:layout_width=  "match_parent"
    android:layout_height=  "match_parent"
    tools:context=  ".MainActivity">

    <!-- circle image view to show the image -->
<de.hdodenhof.circleimageview.CircleImageView
    app:civ_border_width= "8dp"
    app:civ_border_color= "@color/colorPrimary"
    android:src= "@drawable/indian_flag_image"
    android:layout_centerInParent= "true"
    android:layout_width= "240dp"
    android:layout_height= "240dp"/>

</RelativeLayout>

CircleImageView Attributes:

The following are the attributes available in the CircleImageView:

app:civ_border_width= "8dp"

app:civ_border_color= "@color/colorPrimary"

app:civ_border_overlay= "false"

Step 4: MainActivity.java file

There is nothing to do with the MainActivity.java file for this project, so keep it as it is.

//MainActivity.java file
package com.studytonight.project;
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:

You can download the final app by clicking the link.

In the below snapshots, you can see how the Circle Image View will look in the Android application.

Conclusion:

The CircleImageView library by hdodenhof offers a straightforward and efficient way to create circular image views in your Android app. By following the steps and examples provided in this article, you can seamlessly integrate CircleImageView into your project, effortlessly create circular images, and customize various attributes to match your app's design.

In just 3 simple steps we have integrated and shown you the basic example for creating a Circle Image View in your Android app. If you face any issues while doing this, please share it in the comment section below and we will be happy to help.

Frequently Asked Questions(FAQs)

Here are some frequently asked questions related to creating circular image views on Android apps.

1. What is CircleImageView?

CircleImageView is a UI element that displays images in a circular shape instead of the usual rectangular shape.

2. What is the hdodenhof library?

The hdodenhof library is an open-source library for Android app development that provides classes and methods for creating CircleImageView.

3. How do I add the hdodenhof library to my Android project?

Add the following line to your app-level build. gradle file:
implementation 'de.hdodenhof:circleimageview:3.1.0'

4. How do I customize CircleImageView using the hdodenhof library?

You can customize CircleImageView by adding attributes such as border color, width, and background color to the layout XML file or programmatically using Java code.

You may also like:

• How to Create Circle Image View using CardView in Android App

• How to add a ScrollView in Android App

• How to add Tapadoo Alerter in Android App

• How to Add Staggered Grid View in Android?