Create a gist now

Instantly share code, notes, and snippets.

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 commented Nov 5, 2014

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.

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!!!!

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.

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 commented Jun 8, 2015

Hi,
can you please share the ""?

Thanks!

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

Thank you.

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