Circular ImageView in Android

Home/Android/Circular ImageView in Android

Circular ImageView in Android




A fast Circular ImageView perfect for profile images.Very often in today’s modern applications, we can see a profile picture in a circle shape. It displays an approximate image, such as an icon. The ImageView chic can amount images from assorted sources (such as assets or agreeable providers), takes affliction of accretion its altitude from the angel so that it can be acclimated in any blueprint manager, and provides assorted affectation options such as ascent and tinting.

Today, we’ll create a simple example to view your image in a circular preview just by adding few lines in your .xml and adding a dependency in the Gradle file.

NOTE :  This project is developed in Android Studio, and tested in Android Marshmallow 6.0 .

Android allows you to dispense images by abacus altered kinds of furnishings on the images. You can calmly administer angel processing techniques to add assertive kinds of furnishings on images. The furnishings could be brightness,darkness, grayscale about-face etc. Android provides Bitmap chic to handle images. This can be begin beneath android.graphics.bitmap. There are abounding means through which you can instantiate bitmap. We are creating a bitmap of angel from the imageView.

Follow the steps below to create a Circular ImageView for your image:

  • Create a new project or any project in which you want a circled imageview. I have applied this on my current project which have a Navigation Drawer Activity. So, create a navigation drawer activity,
  • After the gradle build, open up your gradle file and add the following dependency for circular imageview,
dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

 

Screenshot from 2016-07-28 01-23-03

  • Now, after adding the dependency you need to just edit your nav_header_main.xml file in which you mention the circle imageview tag. So, add the following code to the xml file,
<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/logo"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

 

Screenshot from 2016-07-28 02-03-49

  • All done. Now, run the application and there you will see your image in a circle like this,

Screenshot_20160728-015846

By | 2017-05-22T19:53:03+00:00 July 28th, 2016|Android|0 Comments

About the Author:

Leave A Comment

13 − three =

Avada WordPress Theme