How to make an ImageView with rounded corners? How to make an ImageView with rounded corners? android android

How to make an ImageView with rounded corners?


This is pretty late in response, but for anyone else that is looking for this, you can do the following code to manually round the corners of your images.

http://www.ruibm.com/?p=184

This isn't my code, but I've used it and it's works wonderfully. I used it as a helper within an ImageHelper class and extended it just a bit to pass in the amount of feathering I need for a given image.

Final code looks like this:

package com.company.app.utils;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.Bitmap.Config;import android.graphics.PorterDuff.Mode;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;    }}

Hope this helps someone!


Another easy way is to use a CardView with the corner radius and an ImageView inside:

  <androidx.cardview.widget.CardView            android:layout_width="match_parent"            android:layout_height="match_parent"            app:cardCornerRadius="8dp"            android:layout_margin="5dp"            android:elevation="10dp">            <ImageView                android:id="@+id/roundedImageView"                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>

enter image description here


While the above answer works, Romain Guy (a core Android developer) shows a better method in his blog which uses less memory by using a shader not creating a copy of the bitmap. The general gist of the functionality is here:

BitmapShader shader;shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);Paint paint = new Paint();paint.setAntiAlias(true);paint.setShader(shader);RectF rect = new RectF(0.0f, 0.0f, width, height);// rect contains the bounds of the shape// radius is the radius in pixels of the rounded corners// paint contains the shader that will texture the shapecanvas.drawRoundRect(rect, radius, radius, paint);

The advantages of this over other methods is that it:

  • does not create a separate copy of the bitmap, which uses a lot of memory with large images [vs most of the other answers here]
  • supports antialisasing [vs clipPath method]
  • supports alpha [vs xfermode+porterduff method]
  • supports hardware acceleration [vs clipPath method]
  • only draws once to the canvas [vs xfermode and clippath methods]

I've created a RoundedImageView based off this code that wraps this logic into an ImageView and adds proper ScaleType support and an optional rounded border.