[MaterialCardView] Stroke not correctly overlapping corners
See original GitHub issueDescription: 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.)
Issue Analytics
- State:
- Created 4 years ago
- Reactions:11
- Comments:7 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.
@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