Circular ImageView : Nightmare For Beginners?

When i have started my career as an Android Developer in around 2013 i have gone through lot of different design tasks like round corner view, shadow on custom view, highlight the button when it gets clicked etc. These tasks looks smaller now but as a beginner in android development it takes lot of time because you don’t know whether there is any kind of default functionality available or not.

One of the most common task was to create Circular ImageView. Whenever i get a new project, there is a screen where you have to implement Circular ImageView. Either it will be in profile screen or within some listing.

Today we will see what are the different ways to create Circular ImageView in Android. There are lot many libraries to customize your ImageView and make it rounded. Few of them are :

hdodenhof/CircleImageView

First most library i have used is CircularImageView created by Henning Dodenhof. You just need to write few lines of code in your xml

<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/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

And that’s it, output will look similar to this

CircularImageView

Another nice library is developed by Mikhael Lopez

lopspower/CircularImageView

It gives you a way to add shadow to your CircularImageView. Like other library, implementation is same, you just need to write few lines of code in xml.

<com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/image"
        app:civ_border_color="#EEEEEE"
        app:civ_border_width="4dp"
        app:civ_shadow="true"
        app:civ_shadow_radius="10"
        app:civ_shadow_color="#8BC34A"/>

CircularImageView

Here is the list of few more libraries which provide similar kind of functionalities

Pkmmte/CircularImageView

vinc3m1/RoundedImageView

siyamed/android-shape-imageview

AlexZhukovich/CircleImageView

Similarity in all these libraries is that it will give you a customized ImageView and image will be fitted on that.

There are few more libraries which provides you a way to directly download image from url and make it rounded. I have seen GlideTransformation and PicassoTransformation library created by wasabeef which provides similar kind of functionality.

Glide

Glide.with(this).load(url)
        .bitmapTransform(new BlurTransformation(context))
        .into((ImageView) findViewById(R.id.image));

Picasso

Picasso.with(this).load(url)
          .transform(new CropCircleTransformation())
          .into((ImageView) findViewById(R.id.image));

Now if you have a task related to Circular Images, don’t get afraid like me :)

Enjoy coding and if you like this article don’t forget to like and share it.