Create a gist now

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.

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

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

+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.

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.

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 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 ""?

Thanks!

shnapsi commented Jun 8, 2015

Hi,
can you please share the ""?

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

Thank you.

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