CardView: image's corners is not rounded in Android 4.3?

Question

Android Studio version: 2.3.3, Android 4.3

I am using CardView and want to round image's corners.

Layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="@dimen/card_width"
    android:layout_height="@dimen/card_width"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        card_view:cardCornerRadius="15dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/img_lights" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

As you can ses I set

card_view:cardCornerRadius="15dp

Here is the result:

But image's corners is not rounded. Why?

Answer 1

Please Try this Class for Image Round corner

public class RoundedCornerImageLayout extends FrameLayout {
private final static float CORNER_RADIUS = 30.0f;
private float cornerRadius;

public RoundedCornerImageLayout(Context context) {
    super(context);
    init(context, null, 0);
}

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

public RoundedCornerImageLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
}

private void init(Context context, AttributeSet attrs, int defStyle) {
    DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}


@Override
protected void dispatchDraw(Canvas canvas) {
    int count = canvas.save();

    final Path path = new Path();
    path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
    canvas.clipPath(path, Region.Op.INTERSECT);

    canvas.clipPath(path);
    super.dispatchDraw(canvas);
    canvas.restoreToCount(count);
 }
}

In Xml

<com.utils.RoundedCornerImageLayout 
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_margin="@dimen/dimen_5">

                    <ImageView
                        android:id="@+id/img1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/scout_report_color"
                        android:scaleType="fitXY" />
                </com.utils.RoundedCornerImageLayout>

Answer 2

As stated in the docs of cardUseCompatPadding attribute:

CardView adds additional padding to draw shadows on platforms before Lollipop.

This may cause Cards to have different sizes between Lollipop and before Lollipop. If you need to align CardView with other Views, you may need api version specific dimension resources to account for the changes. As an alternative, you can set this flag to true and CardView will add the same padding values on platforms Lollipop and after..

Apply app:cardUseCompatPadding="true" to your CardView.