[MaterialCardView] Stroke not correctly overlapping corners

[G00fY2]

Description: When using MaterialCardView with a StrokeColor and StrokeWidth set, the rendered stroke does not fully overlap rounded corners.

Expected behavior: The stroke should correctly overlap all corners

Source code:
layout:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/AppCard"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary" />
</com.google.android.material.card.MaterialCardView>

styles:

    <style name="AppCard" parent="Widget.MaterialComponents.CardView">
        <item name="cardCornerRadius">32dp</item>
        <item name="cardBackgroundColor">#ffffff</item>
        <item name="strokeColor">#efefef</item>
        <item name="strokeWidth">1dp</item>
        <item name="cardElevation">0dp</item>
    </style>

Android API version: Reproducible with API 29 to 21.

Material Library version: Reproducible with 1.1.0-rc1 and 1.2.0-alpha03

Device: Emulator and real devices (Pixel 1 e.g.)

[pekingme]

Hey Thomas! Thanks for reporting this. Just for clarification, by saying "correctly overlap all corners", do you mean that the expected appearance of the round corner shown in the picture should not have that thin line zig-zaging on the outer edge of the stroke?

[G00fY2]

Hi @pekingme. Thanks for your quick answer.
Yes exactly. We use MaterialCardViews as ViewHolders and in a gridlayout these "zig-zaging" edges around the corners look very disturbing. As a workaround attempt we added a 1dp margin to the views inside, but depending on the radius you can still see the underlying background. I think this should get fixed.

This is maybe similar to #757

I tried to figure out the reason, and my guess is that it's an issue inside the MaterialShapeDrawable class, since it contains logic to calculate the stroke paths.

[ymarian]

@G00fY2 Hi this 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.

We fixed this in the past by adding another layout inside the card and drawing the stroke outside that layout. We decided this wasn't worth it because it caused many problems. 0f8fa7e#diff-54cfea65201fdba3911acbc81d757c37

We have been talking about moving the stroke to the background of the card instead of the foreground so I think that's the only way we will get this fixed, but it's a complicated change to make.

[G00fY2]

I see, thats makes sense.

Maybe you can come up with a solution. Right now using strokes with MaterialCardView can really look bad depending on the color combination and radius used.

Adding margins to inner views as a workaround looks somehow okay in our case.

[KlassenKonstantin]

Yes sadly this looks really bad, but only on the left side. Any news on this?

[nicusorflorin]

Adding margins to inner views is not a solution for me, as i need to overlay a shadow gradient. Any progress on a proper solution for this?

[ALXKAY]

@G00fY2 @KlassenKonstantin @nicusorflorin
I created the Gist with a workaround to fix this bug. Maybe it will work for someone.
https://gist.github.com/ALXKAY/681ee1e5ad9ad204cfd8896ccdcc2303