Rounding Image Corners in Android

In Android, displaying images with rounded corners can enhance the visual appeal of your application. There are several approaches to achieve this effect, each suitable for different scenarios and requirements. This tutorial will guide you through various methods to round image corners in Android.

Using ShapeableImageView (Recommended)

The ShapeableImageView is part of the Material Components Library, introduced in version 1.2.0-alpha03. It provides a straightforward way to display images with rounded corners without requiring extensive custom code. To use ShapeableImageView, you need to add the Material Components Library to your project.

First, ensure your project uses the Material Components theme and then include the com.google.android.material:material dependency in your build.gradle file:

dependencies {
    implementation 'com.google.android.material:material:1.6.0'
}

Next, you can use ShapeableImageView in your layout XML like so:

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/shapeable_image_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:srcCompat="@drawable/image"
    app:shapeAppearanceOverlay="@style/roundedImageView" />

To define the rounded corners, create a style in your themes.xml or styles.xml file:

<style name="roundedImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
</style>

Alternatively, you can programmatically set the shape appearance model of the ShapeableImageView like this:

float radius = getResources().getDimension(R.dimen.default_corner_radius);
shapeableImageView.setShapeAppearanceModel(shapeableImageView.getShapeAppearanceModel()
    .toBuilder()
    .setAllCorners(CornerFamily.ROUNDED, radius)
    .build());

Using CardView

Another approach is to wrap your ImageView inside a CardView, which allows you to easily set rounded corners and elevation for the image.

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:cardCornerRadius="8dp"
    android:layout_margin="5dp"
    android:elevation="10dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image"
        android:background="@color/white"
        android:scaleType="centerCrop" />

</androidx.cardview.widget.CardView>

Clipping to Rounded Shapes

For more control over the shape, you can create a rounded shape drawable and use it as the background of your ImageView. Then, set clipToOutline to true on the ImageView.

First, define the rounded shape in a separate XML file (e.g., round_outline.xml) under the drawable directory:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
</shape>

Then, set this shape as the background of your ImageView and enable clipping to outline in Java:

imageView.setBackgroundResource(R.drawable.round_outline);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    imageView.setClipToOutline(true);
}

Note that for clipToOutline to work, you must set the image using android:src, not android:background.

Jetpack Compose

If your project uses Jetpack Compose, rounding image corners is as simple as applying a modifier to the Image composable:

Image(
    painter = painterResource(R.drawable.image),
    contentDescription = "Image",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .size(64.dp)
        .clip(RoundedCornerShape(8.dp))
)

Custom Implementation

For a fully customizable solution or when working with older Android versions, you can manually round the corners of your images by using Canvas and Paint. Here’s an example method that takes a bitmap and rounds its corners:

public class ImageHelper {
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
}

Conclusion

Rounding image corners in Android can be achieved through various methods, each with its advantages and use cases. For most modern applications, using ShapeableImageView from the Material Components Library is recommended due to its simplicity and flexibility. However, other approaches like utilizing CardView, clipping to rounded shapes, or implementing a custom solution might be more suitable depending on your specific requirements.

When choosing an approach, consider factors such as compatibility with different Android versions, customization needs, and performance implications. By applying these techniques, you can enhance the visual appeal of your app by incorporating images with rounded corners seamlessly.