New Tutorials:   TKINTER    KOTLIN    JAVASCRIPT    SASS/SCSS    PL/SQL    Matplotlib    C++ Programs
CLOSE
   Android  CircleImageView  hdodenhof  
   Technology    Programming

How to Create CircleImageView using hdodenhof in Android App

         
 NOVEMBER 3, 2020   by onlyklohan

We have seen the circular image view in many apps such as Facebook, Instagram, YouTube, WhatsApp, Google, Gmail, etc. It is mainly used to show the profile picture of the user or display stories or status and at many other places. A circular image will make the UI of your Android app more beautiful and interactive.

What is CircleImageView?

It is mainly used for creating the 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 the copy of the original bitmap

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

  • It use 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 leads 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(). And if we Iwant to keep the fadeIn animation, firstly we have to fetch the image into a Target and then apply a custom animation ourself when receiving the Bitmap.

So let's implement a simple CircleImageView in our 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 Finish button after filling 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 and import below dependencies and click the "sync Now" show at the top:

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

}

Now our build.gradle file will look like:

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 a 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 show 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:

Following are the attributes available in the CircleImageView:

Attribute Description
app:civ_border_width= "8dp"

It is used to set the width of the border around the circle image view
app:civ_border_color= "@color/colorPrimary"

It is used to set the color of the border around the circle image view
app:civ_border_overlay= "false"

It is used to set the border overy value of the circle image view

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 apk by clicking the link.

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

circle image view example in android studio

Conclusion:

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 issue while doing this, please share it in the comment section below and we will be happy to help.


RELATED POSTS



Subscribe and receive amazing posts directly in your inbox.