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?

Possible duplicate of [How to make an ImageView with rounded corners?](https://stackoverflow.com/questions/2459916/how-to-make-an-imageview-with-rounded-corners) — Pavneet_Singh, Oct 04 '17 at 17:25

score 3 · Answer 1 · answered Aug 19 '19 at 06:22

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>

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 04 '17 at 18:44

azizbekian

60,783
13
169
249

Updated answer. – azizbekian Oct 05 '17 at 07:37
I answered the same here below. But I am suprised he said it does not work and he downvoted it! How is it not working to him? @azizbekian – Xenolion Oct 14 '17 at 20:46

Xenolion · Answer 3 · 2017-10-04T18:26:44.133

1

Add to app

To be

app:cardCornerRadius="15dp"
app:cardUseCompatPadding="true"

Then import necessary values!

edited Oct 04 '17 at 18:26

answered Oct 04 '17 at 17:27

Xenolion

12,035
7
33
48

Not help: `xmlns:app="http://schemas.android.com/apk/res-auto" app:cardCornerRadius="15dp` – user8542613 Oct 04 '17 at 17:42
I found the problem. This is because I start on Android 4.3. If I start on Android 6.0 - then all is ok. – user8542613 Oct 04 '17 at 18:06
I have found your thing add that on the layout. I have edited the answer. Also consider upvoting if it works! – Xenolion Oct 04 '17 at 18:27
Unfortunately not help. Work only on Android 5.0+ – user8542613 Oct 05 '17 at 06:56

score 1 · Answer 4 · answered Oct 06 '17 at 10:29

The padding you see is the result of support for older than API 20. To make your layouts look the same either on the pre-Lollipop (and pre-CardView widget) or Lollipop and newer, Android introduced some additional attributes.

Because overlapping the content - rounding the corners - was difficult for older Android versions, the cardPreventCornerOverlap has been added and has been set by default as true. That is why there're white stripes around your image.

To remove this padding turn off cardPreventCornerOverlap. You can do it:

via xml by card_view:cardPreventCornerOverlap="false"
or programatically by yourCardView.setPreventCornerOverlap(false).

Keep in mind that this gives you the effect you want only for API 20+. On devices with older versions of system, your rounded corners will be invisible (hidden under not-rounded image).

To know more check the CardView doc. In the first paragraph you can find the official note about your issue.

score 0 · Answer 5 · answered Oct 05 '17 at 07:44

Try adding following drawable as background of your image.

<ImageView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerCrop"
     android:background="drawable/rounded"
     android:src="@drawable/img_lights" />

drawable/rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#FFFFFF" />
  <corners android:radius="15dp" />

</shape>

I known that by "shape" I can do this. But I want do this only by CardView element. — user8542613, Oct 05 '17 at 08:28

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

5 Answers5