How to obtain a CardView (support library) with a Image and rounded corners for API<21

card_layout.xml

 <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="250dp"
        android:layout_height="200dp">

        <ImageView
            android:id="@+id/card_thumbnail_image"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            style="@style/card_thumbnail_image"/>
    </android.support.v7.widget.CardView>

MainActivity.java

        ImageView imageView = (ImageView) findViewById(R.id.card_thumbnail_image);
        Bitmap mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rose);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            //Default 
            imageView.setBackgroundResource(R.drawable.rose);
        } else {
            //RoundCorners 
            RoundCornersDrawable round = new RoundCornersDrawable(mBitmap,
                    getResources().getDimension(R.dimen.cardview_default_radius), 0); //or your custom radius

            CardView cardView = (CardView) findViewById(R.id.card_view);
            cardView.setPreventCornerOverlap(false); //it is very important

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
                imageView.setBackground(round);
            else
                imageView.setBackgroundDrawable(round);
        }

RoundCornersDrawable.java

/**
 * Image with rounded corners
 *
 * You can find the original source here:
 * http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/
 *
 * @author Gabriele Mariotti ([email protected])
 */
public class RoundCornersDrawable extends Drawable {

    private final float mCornerRadius;
    private final RectF mRect = new RectF();
    //private final RectF mRectBottomR = new RectF();
    //private final RectF mRectBottomL = new RectF();
    private final BitmapShader mBitmapShader;
    private final Paint mPaint;
    private final int mMargin;

    public RoundCornersDrawable(Bitmap bitmap, float cornerRadius, int margin) {
        mCornerRadius = cornerRadius;

        mBitmapShader = new BitmapShader(bitmap,
                Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setShader(mBitmapShader);

        mMargin = margin;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);
        //mRectBottomR.set( (bounds.width() -mMargin) / 2, (bounds.height() -mMargin)/ 2,bounds.width() - mMargin, bounds.height() - mMargin);
       // mRectBottomL.set( 0,  (bounds.height() -mMargin) / 2, (bounds.width() -mMargin)/ 2, bounds.height() - mMargin);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
        //canvas.drawRect(mRectBottomR, mPaint); //only bottom-right corner not rounded
        //canvas.drawRect(mRectBottomL, mPaint); //only bottom-left corner not rounded

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }


}

Thank you :) That works fine for me

Thanks for this. But what if I have image loaders such as picasso and UIL in an adapter and I have to make image round at its corner? a little snippet would be great.

Thanks again.

+1 to @prashantwosti. I also need a way to use this with PIcasso within an adapter. Any idea on how to achieve it? Thanks!!!!

on picasso you can use Transformation to transform the bitmap after the download so you have to work on it a bit

+1

It does not seem to behave correctly if I set scaleType of the ImageView to be centerCrop. Still zooms the image to the actual size.

This method sets the image as a background, and it looks like there is currently no way to centerCrop a background.

Is this method supposed to also work to get rounded corners for the enclosed image?
http://stackoverflow.com/questions/30016370/cardview-containing-image-with-round-corners-using-roundcornersdrawable-class

Hi,
can you please share the "@style/card_thumbnail_image"?

Thanks!

Hi, this is just what I need, but I get out, because not wear a drawable, but is an image database, a string:

sport.get (position) .getImagen ()
http://files.parsetfss.com/eefc5862-267e-4f3c-874e-a27ff8a822a0/tfss-43981567-a132-429d-b043-30929d9c8ae9-Tres-usos-caseros-del-aceite-de-oliva-1.jpg

Please help, I have several days with this problem. Thank you

Thank you.