question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[MaterialCardView] Stroke not correctly overlapping corners

See original GitHub issue

Description: When using MaterialCardView with a StrokeColor and StrokeWidth set, the rendered stroke does not fully overlap rounded corners. Bildschirmfoto 2020-01-07 um 18 29 48 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.)

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:11
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
ymariancommented, Jan 7, 2020

@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. https://github.com/material-components/material-components-android/commit/0f8fa7e6c9f7e44407c4bde0a6e800c17c2781e6#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.

0reactions
ALXKAYcommented, Jun 5, 2021

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Get Rounded Corners In MaterialCardView - android
I want the image to become rounded itself within the cardview (not appear square inside a rounded cardview). – user3560827. May 16, 2021...
Read more >
MaterialCardView | Android Developers
Without a strokeColor , the card will not render a stroked border, regardless of the strokeWidth value. Cards implement Checkable , a default ......
Read more >
Cards - Material Design
Elevated card with a light grey overlay; secondary title and Action 1 and Action 2. Cards have an app:state_dragged that has foreground and...
Read more >
Checkable CardView
Note: The actual view hierarchy present under MaterialCardView is NOT ... to your outer CardView and remove its corner radius ("cornerRadios = 0dp")....
Read more >
Shapeableimageview'S Stroke Is Getting Cut By Borders
Description: By default when a ShapeableImageView has rounded corners as the stroke would push the borders so the image is not getting overlapped....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found