Circular and Shaped ImageView Examples

Circular ImageView in Android.

In Android, an ImageView is a commonly used component to display images in an application. However, sometimes we may want to display images with a circular shape, instead of the default rectangular shape. This is where the Circular ImageView comes in handy.

In this article, we will go through the steps to create a Circular ImageView in Android, using both Kotlin and Java.

Create a New Project

First, we need to create a new project in Android Studio. Open Android Studio and select "Start a new Android Studio project". Follow the instructions to create a new project with an empty activity.

Add Dependencies

To create a Circular ImageView, we need to add the CircleImageView library to our project. Add the following dependency to your build.gradle file:

dependencies {
    implementation 'de.hdodenhof:circleimageview:3.1.0'
}

Create the Layout

Now, let's create the layout for our Circular ImageView. In the activity_main.xml layout file, add the following code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:src="@drawable/profile_image"
        app:civ_border_width="2dp"
        app:civ_border_color="#FF0000"
        android:layout_centerInParent="true"/>

</RelativeLayout>

Here, we have used the CircleImageView component from the de.hdodenhof.circleimageview package. We have also set the src attribute to the image that we want to display, and added a red border around the image.

Load the Image

Next, we need to load the image into our Circular ImageView. In the MainActivity class, add the following code:

Kotlin

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.bumptech.glide.Glide
import de.hdodenhof.circleimageview.CircleImageView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val profileImage = findViewById<CircleImageView>(R.id.profile_image)
        Glide.with(this)
            .load(R.drawable.profile_image)
            .into(profileImage)
    }
}

Here, we have used the Glide library to load the image into our Circular ImageView. We have also set the src attribute to the image that we want to display.

Java

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import com.bumptech.glide.Glide;
import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        CircleImageView profileImage = findViewById(R.id.profile_image);
        Glide.with(this)
            .load(R.drawable.profile_image)
            .into(profileImage);
    }
}

More Examples

There are many cases where it may be more appropriate to use a circular or rounded imageview. For example if you want to show the user profiles or list users in a recyclerview. In those cases a circular imageview may be more appropriate.

Thus let's look at libraries and examples of how to render circular imageview natively in android.

(a). Use hdodenhof/CircleImageView

CircleImageView is just that, a circular ImageView for Android.

It is fast circular ImageView perfect for profile images. This is based on RoundedImageView from Vince Mi which itself is based on techniques recommended by Romain Guy.

It uses a BitmapShader and does not:

• create a copy of the original bitmap
• use a clipPath (which is neither hardware accelerated nor anti-aliased)
• use setXfermode to clip the bitmap (which means drawing twice to the canvas)

As this is just a custom ImageView and not a custom Drawable or a combination of both, it can be used with all kinds of drawables, i.e. a PicassoDrawable from Picasso or other non-standard drawables (needs some testing though).

Here is a demo:

Step 2: Use it

All you need is add it to your xml layout;

<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"/>

Full Example

1. Create Android Studio Project
2. Install the library.
3. Design Layout

We will have the following layout:

activity_main,xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:padding="@dimen/base_padding"
        android:background="@color/light">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:layout_centerInParent="true"
            android:src="@drawable/hugh"
            app:civ_border_width="2dp"
            app:civ_border_color="@color/dark" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:padding="@dimen/base_padding"
        android:background="@color/dark">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="160dp"
            android:layout_height="160dp"
            android:layout_centerInParent="true"
            android:src="@drawable/hugh"
            app:civ_border_width="2dp"
            app:civ_border_color="@color/light" />

    </RelativeLayout>

</LinearLayout>

MainActivity.java

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}

Reference

Here are the reference links:

Number	link
1.	Download Example
2.	Read more

Conclusion

In this article, we have gone through the steps to create a Circular ImageView in Android, using both Kotlin and Java. We have also used the Glide library to load the image into our Circular ImageView. With this knowledge, you can now create Circular ImageViews in your own Android applications.