How to make an ImageView with rounded corners?

ImageView

rounded corners

Android development

UI design

mobile app development

How to make an ImageView with rounded corners?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

iOS & Android

Introduction

In modern UI design, aesthetics play a crucial role in enhancing user experience. One common design element is an ImageView with rounded corners. This article will guide you through implementing an ImageView with rounded corners, offering technical explanations and examples, primarily focusing on Android development.

Understanding ImageView and Rounded Corners

ImageView is an Android widget that displays image resources. Modifier techniques, such as applying rounded corners, improve visual consistency and style. Rounded corners soften the hard edges of rectangular images, creating a more polished and modern look.

Why Use Rounded Corners?

Aesthetics: They make the UI look more appealing.
User Experience: Rounded corners offer a softer look, potentially increasing user engagement.
Consistency: Many modern design systems and platforms use rounded corners to maintain a consistent look.

Methods to Create an ImageView with Rounded Corners

Several methods are available to create an ImageView with rounded corners in Android. Below are the most common approaches:

1. Using XML with simple shape drawables

Android's XML drawable resources can be used to achieve rounded corners effortlessly. Here's a simple example:

xml

1<!-- res/drawable/rounded_corners.xml -->
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="rectangle">
4    <corners android:radius="10dp"/>
5    <solid android:color="@android:color/transparent"/>
6</shape>

Apply this drawable to the ImageView:

xml

1<ImageView
2    android:layout_width="wrap_content"
3    android:layout_height="wrap_content"
4    android:src="@drawable/your_image"
5    android:background="@drawable/rounded_corners"/>

2. Using Picasso Library

Picasso is a powerful image downloading and caching library that supports complex transformations such as rounding corners.

First, include Picasso in your build.gradle:

groovy

implementation 'com.squareup.picasso:picasso:2.71828'

Implement rounded transformation:

java

1import com.squareup.picasso.Transformation;
2import android.graphics.Bitmap;
3import android.graphics.Canvas;
4import android.graphics.Paint;
5import android.graphics.Path;
6import android.graphics.RectF;
7
8public class RoundedCornersTransformation implements Transformation {
9    private final int radius;
10    private final int margin;
11
12    public RoundedCornersTransformation(int radius, int margin) {
13        this.radius = radius;
14        this.margin = margin;
15    }
16
17    @Override
18    public Bitmap transform(Bitmap source) {
19        final Paint paint = new Paint();
20        paint.setAntiAlias(true);
21
22        Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
23        Canvas canvas = new Canvas(output);
24        Path path = new Path();
25        path.addRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin),
26                radius, radius, Path.Direction.CW);
27
28        canvas.drawPath(path, paint);
29        source.recycle();
30
31        return output;
32    }
33
34    @Override
35    public String key() {
36        return "rounded(radius=" + radius + ", margin=" + margin + ")";
37    }
38}

Load the image using Picasso with the transformation:

java

1Picasso.get()
2    .load("your_image_url_or_resource")
3    .transform(new RoundedCornersTransformation(20, 0))
4    .into(yourImageView);

3. Using Glide Library

Glide is another popular image loading library that provides support for rounded corners.

Add Glide dependency:

groovy

implementation 'com.github.bumptech.glide:glide:4.12.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

Use Glide's RequestOptions to transform the image:

java

1import com.bumptech.glide.Glide;
2import com.bumptech.glide.request.RequestOptions;
3import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
4
5RequestOptions requestOptions = new RequestOptions();
6requestOptions = requestOptions.transforms(new RoundedCorners(20));
7
8Glide.with(context)
9    .load("your_image_url_or_resource")
10    .apply(requestOptions)
11    .into(yourImageView);

4. Using a Custom View

For more control, you can extend the ImageView class to create a custom view:

java

1import android.content.Context;
2import android.graphics.Canvas;
3import android.graphics.Path;
4import android.graphics.RectF;
5import android.util.AttributeSet;
6import androidx.appcompat.widget.AppCompatImageView;
7
8public class RoundedImageView extends AppCompatImageView {
9    private float radius = 18.0f;
10    private Path path;
11    private RectF rect;
12
13    public RoundedImageView(Context context) {
14        super(context);
15        init();
16    }
17
18    public RoundedImageView(Context context, AttributeSet attrs) {
19        super(context, attrs);
20        init();
21    }
22
23    public RoundedImageView(Context context, AttributeSet attrs, int defStyleAttr) {
24        super(context, attrs, defStyleAttr);
25        init();
26    }
27
28    private void init() {
29        path = new Path();
30    }
31
32    @Override
33    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
34        super.onSizeChanged(w, h, oldw, oldh);
35        rect = new RectF(0, 0, w, h);
36    }
37
38    @Override
39    protected void onDraw(Canvas canvas) {
40        path.addRoundRect(rect, radius, radius, Path.Direction.CW);
41        canvas.clipPath(path);
42        super.onDraw(canvas);
43    }
44}

Use this custom view in your XML layout:

xml

1<com.example.yourpackage.RoundedImageView
2    android:layout_width="wrap_content"
3    android:layout_height="wrap_content"
4    android:src="@drawable/your_image"/>

Summary

Each method above offers unique advantages depending on the project requirements. Here's a quick comparison of the methods discussed:

Method	Advantages	When to Use
XML with Shape Drawable	Simple and no external libraries	Basic needs, minimal custom styling
Picasso with Transformation	Easy integration, robust caching	Dynamic image loading with style
Glide with RequestOptions	Powerful, integrates well with other libraries	Custom transformations, performance
Custom ImageView Class	Full control over functionality	Unique designs, precise control

Conclusion

Creating an ImageView with rounded corners can significantly improve the look and feel of your application. Depending on the complexity and requirements of your project, choose the method that best suits your needs. Whether you use XML, a third-party library like Picasso or Glide, or create your custom view, you can achieve a stylish and modern UI element with rounded corners.

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

How to make an ImageView with rounded corners?

Interview Questions practice on Codemia

Introduction

Understanding ImageView and Rounded Corners

Why Use Rounded Corners?

Methods to Create an ImageView with Rounded Corners

1. Using XML with simple shape drawables

2. Using Picasso Library

3. Using Glide Library

4. Using a Custom View

Summary

Conclusion

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia