material-components/material-components-android

[MaterialCardView] Stroke not correctly overlapping corners

Open

#881 opened on Jan 7, 2020

View on GitHub
 (7 comments) (13 reactions) (0 assignees)Java (15,910 stars) (3,023 forks)batch import
Good First IssueWidget: Cardbug

Description

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.)

Contributor guide

Tech stack
javaandroid
Domain
mobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic Android developmentfamiliarity with MaterialCardView
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The issue is a visual bug where the stroke on MaterialCardView does not overlap corners correctly. To fix, examine the drawing code in MaterialCardView.java, likely the onDraw method or shape appearance. Look for how the stroke is drawn relative to the corner radius. The fix may involve adjusting clip paths or stroke draw order. Check the MaterialCardView source at https://github.com/material components/material components android/blob/master/lib/java/com/google/android/material/card/MaterialCardView.java and its base class.