Android Circular ImageView: How to Create a Circular Image in Your App

Displaying images in a circular shape is a popular design choice for many modern Android apps. It is often used in profile pictures, icons, and other elements where rounded images enhance the user interface. In Android development, achieving a circular ImageView effect is simple and can be done in a few different ways. Whether you're using a library, creating a custom view, or leveraging built-in features, Android provides multiple ways to display circular images in your apps.

In this guide, we'll cover different methods to create a circular ImageView in Android.

What is Circular ImageView?

A Circular ImageView refers to an image that is displayed inside a circular container rather than the typical rectangular shape. This rounded display style is commonly used for profile images, user avatars, and other image elements that need a more visually appealing and modern look.

Benefits of Circular ImageView:

  1. Aesthetically pleasing: Rounded images are visually appealing and fit better into modern app designs.
  2. Better focus: Circular images can help users focus on key elements, like profile pictures, without distractions.
  3. Consistency: Using circular images creates a uniform, consistent design that makes your app look more polished.

Methods to Create Circular ImageView in Android

1. Using a Library (Glide or Picasso)

The easiest and most efficient way to display a circular image is by using an image loading library like Glide or Picasso. These libraries allow you to load images efficiently and apply transformations like rounding the image automatically.

Using Glide:

Glide is one of the most popular image loading libraries in Android. It provides a simple way to load images from various sources and apply transformations like circular cropping.

Step-by-Step Guide:

  1. Add Glide dependency to your project: Open your build.gradle file and add the Glide dependency:

    dependencies {
    implementation 'com.github.bumptech.glide:glide:4.15.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.15.0'
}

  2. Update your XML layout: Use a standard ImageView in your layout file (e.g., activity_main.xml):

    <ImageView
    android:id="@+id/circularImageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:src="@drawable/sample_image" />

  3. Load the image with Glide and apply the circular transformation: In your activity or fragment, load the image using Glide and apply the circular transformation:

    import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.CircleCrop;

Glide.with(this)
    .load("https://your-image-url.com")
    .transform(new CircleCrop())  // Apply circular crop transformation
    .into(circularImageView);

Why Glide?

  • Glide is lightweight and highly optimized for Android.
  • It has a built-in transformation API, so applying a circular image is quick and efficient.

2. Using Picasso Library

Picasso is another powerful image loading library for Android that can also load images from URLs or resources and apply transformations.

Using Picasso:

  1. Add Picasso dependency: Include Picasso in your build.gradle file:

    dependencies {
    implementation 'com.squareup.picasso:picasso:2.71828'
}

  2. Update XML layout (same as before):

    <ImageView
    android:id="@+id/circularImageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_centerInParent="true"
    android:src="@drawable/sample_image" />

  3. Load the image with Picasso and apply the circular transformation:

    import com.squareup.picasso.Picasso;
import com.squareup.picasso.Transformation;

Transformation transformation = new Transformation() {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
        if (squared != source) {
            source.recycle();
        }
        Bitmap result = Bitmap.createScaledBitmap(squared, 200, 200, false);
        if (squared != result) {
            squared.recycle();
        }
        return result;
    }

    @Override
    public String key() {
        return "circle";
    }
};

Picasso.get()
    .load("https://your-image-url.com")
    .transform(transformation)  // Apply custom circular transformation
    .into(circularImageView);

Why Picasso?

  • Picasso is simple to use and integrates seamlessly with Android.
  • It is reliable and handles images efficiently in terms of caching and memory usage.

3. Creating a Custom Circular ImageView

If you prefer more control over the circular transformation, you can create a custom Circular ImageView by extending the standard ImageView class and overriding the onDraw() method.

Step-by-Step Guide:

  1. Create a custom CircularImageView class:

    import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircularImageView extends ImageView {

    private Paint paint;

    public CircularImageView(Context context) {
        super(context);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Bitmap bitmap = getBitmap();
        if (bitmap != null) {
            BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);
            int radius = Math.min(getWidth(), getHeight()) / 2;
            canvas.drawCircle(getWidth() / 2, getHeight() / 2, radius, paint);
        }
    }

    private Bitmap getBitmap() {
        // Return the image Bitmap from the ImageView
        if (getDrawable() != null) {
            return ((android.graphics.drawable.BitmapDrawable) getDrawable()).getBitmap();
        }
        return null;
    }
}

  2. Use the Custom CircularImageView in your layout:

    <com.yourapp.CircularImageView
    android:id="@+id/circularImageView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/sample_image" />

  3. Set the image in your Activity or Fragment:

    CircularImageView circularImageView = findViewById(R.id.circularImageView);
circularImageView.setImageResource(R.drawable.sample_image);

Why Custom CircularImageView?

  • You get complete control over how the circular image is rendered.
  • It’s ideal for custom designs or when you want to modify the circular cropping behavior.

Conclusion

Creating a circular ImageView in Android is a straightforward process, and there are multiple ways to achieve this effect. If you're looking for an easy solution, libraries like Glide and Picasso offer built-in transformations that can automatically round your images. However, if you need more flexibility, creating a custom CircularImageView gives you complete control over the rendering process.

Summary of Methods:

  1. Glide: A simple, efficient image loading library with built-in support for circular images.
  2. Picasso: A reliable image loading library, with the option to create custom transformations for circular images.
  3. Custom CircularImageView: Full control over the circular image rendering, perfect for custom design requirements.

By choosing the right method based on your needs, you can easily integrate circular images into your Android app and enhance the overall user experience.