Corners ImageView fit inside CardView does not have radius like CardView's corners in Android

Question

I am developing an Android App. In my app I am using CardView and ImageView together. But I am having a problem in designing ImageView inside CardView. The problem is with corner radius radius of ImageView.

I have XML layout for adapter item like this.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    card_view:cardCornerRadius="5dp"
    android:layout_width="match_parent"
    android:id="@+id/di_card_container"
    android:layout_height="wrap_content">

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/di_iv_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:padding="10dp"
            android:layout_below="@id/di_iv_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/di_name_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:textSize="15dp"
                android:textColor="@color/textColorPrimary"
                android:id="@+id/di_tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

As you can see I set, corner radius of CardView to 5dp and the ImageView with is fit to the width of its parent CardView. The problem is both top corners of ImageView is not bent like its parent CardView's corner.

This is the screenshot

Normally corners of child views of CardView automatically bent like its parent corners if it fit to parent CardView. Is that right? So why is my ImageView is not working?

Are you having this issue while testing on a pre lollipop device? — NSimon, May 31 '16 at 15:03

NSimon · Accepted Answer · 2016-05-31T15:30:29.897

So this is a common behavior on pre lollipop. Here are the steps to fix it :

Step 1 : Add the following attributes to your cardView

card_view:cardUseCompatPadding="true"
card_view:cardPreventCornerOverlap="false"
card_view:cardCornerRadius="10dp"

Step 2 : Use a custom ImageView that rounds its top borders :

public class RoundedTopImageView extends ImageView {
private Paint                       mPaint;
private Path                        mPath;
private Bitmap                      mBitmap;
private Matrix                      mMatrix;
private int                         mRadius = DisplayUtils.convertDpToPixel(10);
private int                         mWidth;
private int                         mHeight;
private Drawable                    mDrawable;

public RoundedTopImageView(Context context) {
    super(context);
    init();
}

public RoundedTopImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public RoundedTopImageView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    mPaint = new Paint();
    mPaint.setColor(Color.WHITE);

    mPath = new Path();
}

@Override
public void setImageDrawable(Drawable drawable) {
    mDrawable = drawable;
    if (drawable == null) {
        return;
    }
    mBitmap = drawableToBitmap(drawable);

    int bDIWidth = mBitmap.getWidth();
    int bDIHeight = mBitmap.getHeight();

    //Fit to screen.
    float scale;
    if ((mHeight / (float)bDIHeight) >= (mWidth / (float)bDIWidth)){
        scale =  mHeight / (float)bDIHeight;
    } else {
        scale = mWidth / (float)bDIWidth;
    }

    float borderLeft = (mWidth - (bDIWidth * scale)) / 2;
    float borderTop = (mHeight - (bDIHeight * scale)) / 2;

    mMatrix = getImageMatrix();
    RectF drawableRect = new RectF(0, 0, bDIWidth, bDIHeight);
    RectF viewRect = new RectF(borderLeft, borderTop, (bDIWidth * scale) + borderLeft, (bDIHeight * scale) + borderTop);
    mMatrix.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.CENTER);
    invalidate();
}

private Bitmap drawableToBitmap(Drawable drawable) {
    Bitmap bitmap;

    if (drawable instanceof BitmapDrawable) {
        BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
        if(bitmapDrawable.getBitmap() != null) {
            return bitmapDrawable.getBitmap();
        }
    }

    if(drawable.getIntrinsicWidth() <= 0 || drawable.getIntrinsicHeight() <= 0) {
        bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888); // Single color bitmap will be created of 1x1 pixel
    } else {
        bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(bitmap);
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);
    return bitmap;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    mWidth = MeasureSpec.getSize(widthMeasureSpec);
    mHeight = MeasureSpec.getSize(heightMeasureSpec);
    if ((mDrawable != null) && (mHeight > 0) && (mWidth > 0)) {
        setImageDrawable(mDrawable);
    }
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (mBitmap == null) {
        return;
    }

    canvas.drawColor(Color.TRANSPARENT);

    mPath.reset();
    mPath.moveTo(0, mRadius);
    mPath.lineTo(0, canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), canvas.getHeight());
    mPath.lineTo(canvas.getWidth(), mRadius);
    mPath.quadTo(canvas.getWidth(), 0, canvas.getWidth() - mRadius, 0);
    mPath.lineTo(mRadius, 0);
    mPath.quadTo(0, 0, 0, mRadius);


    canvas.drawPath(mPath, mPaint);
    canvas.clipPath(mPath);
    canvas.drawBitmap(mBitmap, mMatrix, mPaint);
}

}

Step 3 : Simply replace your ImageView in your xml with the RoundedTopImageView

Step 4 : Use this in your code as a regular imageView, for example with Picasso :

RoundedTopImageView image = (RoundedTopImageView) findViewById(R.id.di_iv_image);
Picasso.with(context)
                    .load("Some cool Url")
                    .into(image);

EDIT : Added the convertDpToPixel function

Sorry, I forgot to add this, which is part of a Util class that you can add anywhere you want (in my case in DisplayUtils class) :

public static int convertDpToPixel(int dp) {
    DisplayMetrics displayMetrics = Resources.getSystem().getDisplayMetrics();
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics);
}

Cannot find DisplayUtils class for DisplayUtils.convertDpToPixel(10). So please how can I get it? — Wai Yan Hein, May 31 '16 at 15:28
It works well removing padding spaces but the top corners are not rounded with lint error stating `extend AppCompatImageView instead` — Geek Guy, Jul 15 '18 at 13:44

Aba · Answer 2 · 2019-02-14T09:21:19.920

For anyone who stumbles upon this question like me..
If you're using Picasso, you can use this transformations lib & use the following (in Kotlin):

val radius = 5
Picasso.get()
        .load(image)
        .fit()        // to centerCrop, you have to do either resize() or fit()
        .centerCrop() // to remove any possible white areas
        .transform(RoundedCornersTransformation(radius, 0,
                RoundedCornersTransformation.CornerType.TOP))
        .into(imageView)

I tried checking whether radius is px or dp, but could not find any resources. However, from my test, it should be dp. The sample also seems to suggest it's dp because there's no conversion done from dp to px.

The functions fit(), centerCrop() & transform() must be done in order.

If you're using Glide, a similar solution exists in the Glide version of the lib.

score -2 · Answer 3 · answered Sep 18 '17 at 06:23

Step1: add dependency in your App level build.gradle

compile 'com.makeramen:roundedimageview:2.2.1'

Step2: in CardView xml Code:

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" 

android:id="@+id/di_card_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="4dp">

Step3 in ImageView:

 <com.makeramen.roundedimageview.RoundedImageView
  android:id="@+id/di_iv_image"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:scaleType="centerCrop"
  android:layout_alignParentTop="true"
  app:riv_corner_radius_top_left="5dp"                                     
  app:riv_corner_radius_top_right="5dp"/>

I hope It will help

This dependency just crops the photo in a wired way and make it look like crap — Muhammad Sarib, Dec 01 '18 at 18:25

Corners ImageView fit inside CardView does not have radius like CardView's corners in Android

3 Answers3