CardView Radius and Drawable Shape Radius are not same

Question

I have below layout that has a CardView

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:padding="50dp"
    >
  <androidx.cardview.widget.CardView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      app:cardBackgroundColor="@android:color/holo_red_light"
      app:cardCornerRadius="50dp"
      app:cardElevation="0dp"
      app:layout_constraintTop_toTopOf="parent"
      >
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/outline"
        />
  </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

And my @drawable/outline is just a stroke with corner radius same as cardCornerRadius

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="50dp" />
  <stroke
      android:width="3dp"
      android:color="@color/white" />
</shape>

So, I was expecting a CardView that has an outline. But this is what I get

Why does the radius of my stoke and radius of CardView are not the same and how to fix it?

I don't see a point of using a CardView if `cardElevation` is 0 .. It will show like a normal Layout .. — ADM, Jun 17 '20 at 04:24
@ADM Whether cardElevation is 0 or not, the problem I have mentioned still occurs. I set cardElevation to 0 just to focus on the actual problem so that the problem is well shown — musooff, Jun 17 '20 at 04:30
This can be resolve by adding some attributes to cardView maybe `app:cardUseCompatPadding` will work .. but my point is you can replace cardview with a normal layout if there is no elevation .. which is easy and effective .. — ADM, Jun 17 '20 at 04:32
@ADM I see your concern. You can assume that I have cardElevation 10dp. `app:cardUseCompatPadding` that you have mentioned has no effect on the issue. — musooff, Jun 17 '20 at 04:36
I think you can use [MaterialcardView](https://stackoverflow.com/a/54921926/4168607). — ADM, Jun 17 '20 at 04:43
@ADM Yes, sure I can. But I want to stick with CardView and fix this issue if it is fixable or if it is some kind of bug, then I can move and find different methods — musooff, Jun 17 '20 at 04:50
@ADM the MaterialCardView with a stroke doesn't solve the issue. Check the detail in my answer. — Gabriele Mariotti, Jun 17 '20 at 09:03

score 4 · Accepted Answer · answered Jun 17 '20 at 09:00

Check this issue on MaterialCardView (but it is the same with the androidx.cardview.widget.CardView)

It is due to Anti aliasing. The background and the stroke are drawn on the same pixels but depending on the color of the stroke the transparent pixels added by the AA can cause the bleed through. That's why you won't see it if you invert the colors here.

You can achieve the same view just using

   <com.google.android.material.card.MaterialCardView
        app:cardBackgroundColor="@color/...."
        app:strokeWidth="3dp"
        app:strokeColor="@color/white />

As you can see:

You have another option.
You can apply the same ShapeAppearanceModel (provided by default by the MaterialCardView) to a simple View (or Layout) inverting the colors and applying the margin to the inner view.

   <com.google.android.material.card.MaterialCardView
        app:cardCornerRadius="@dimen/corner_radius_16"
        app:cardBackgroundColor="@color/white">

        <View
            android:layout_margin="3dp"   
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/view_rounded"/>

    </com.google.android.material.card.MaterialCardView>

And then:

float size = getResources().getDimension(R.dimen.cutout_size);

View viewRounded = findViewById(R.id.view_rounded);
ShapeAppearanceModel shapeAppearanceModelView = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius16)
        .build();
MaterialShapeDrawable shapeDrawableView = new MaterialShapeDrawable(shapeAppearanceModelView);
shapeDrawableView.setFillColor(ContextCompat.getColorStateList(this,R.color.xxx));
ViewCompat.setBackground(viewRounded,shapeDrawableView);

CardView Radius and Drawable Shape Radius are not same

1 Answers1