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);
    }


}

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.