Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to obtain a CardView (support library) with a Image and rounded corners for API<21
<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>
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);
}
/**
* 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 (gabri.mariotti@gmail.com)
*/
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);
}
}
@jplauber

This comment has been minimized.

Show comment
Hide comment
@jplauber

jplauber Nov 5, 2014

Thank you :) That works fine for me

jplauber commented Nov 5, 2014

Thank you :) That works fine for me

@prashantwosti

This comment has been minimized.

Show comment
Hide comment
@prashantwosti

prashantwosti Nov 13, 2014

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.

prashantwosti commented Nov 13, 2014

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.

@mheras

This comment has been minimized.

Show comment
Hide comment
@mheras

mheras Nov 21, 2014

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

mheras commented Nov 21, 2014

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

@ndorigatti

This comment has been minimized.

Show comment
Hide comment
@ndorigatti

ndorigatti Jan 16, 2015

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

ndorigatti commented Jan 16, 2015

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

@vsahu1986

This comment has been minimized.

Show comment
Hide comment
@vsahu1986

vsahu1986 commented Jan 28, 2015

+1

@alamkanak

This comment has been minimized.

Show comment
Hide comment
@alamkanak

alamkanak Feb 12, 2015

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.

alamkanak commented Feb 12, 2015

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.

@ianmartorell

This comment has been minimized.

Show comment
Hide comment
@ianmartorell

ianmartorell Mar 8, 2015

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

ianmartorell commented Mar 8, 2015

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

@kaine987

This comment has been minimized.

Show comment
Hide comment
@kaine987

kaine987 commented May 3, 2015

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

@shnapsi

This comment has been minimized.

Show comment
Hide comment
@shnapsi

shnapsi Jun 8, 2015

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

Thanks!

shnapsi commented Jun 8, 2015

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

Thanks!

@cathirv

This comment has been minimized.

Show comment
Hide comment
@cathirv

cathirv Sep 17, 2015

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

cathirv commented Sep 17, 2015

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

@wandering7man

This comment has been minimized.

Show comment
Hide comment
@wandering7man

wandering7man commented May 16, 2016

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment