material-components / material-components/material-components-android

[Material Card View] It is not possible to apply a gradient background to a material card view with rounded corners applied only to the top.

Open
#3,430 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Widget: Card
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

**Description:**
The material card view with the material style applied only on the top does not have the gradient background applied. The gradient background is only applied when the roundness is applied in all directions.

In the XML, you may see the desired design where the gradient background is applied with rounded corners. However, when you run the code, you are experiencing an issue where the roundness is not being applied to the gradient background.

**Expected behavior:**
* What i expected and the android studio preview shows to me :
스크린샷 2023-05-31 오후 3 09 08

* what i actually got :
![20230531_151518](https://github.com/material-components/material-components-android/assets/24997444/bd90391a-a17a-44c3-87fc-01936cab12ae)

**Source code:** The code snippet which is causing this issue
```xml


```

```xml
@style/RoundTop20

<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">20dp</item>
<item name="cornerSizeTopRight">20dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>

```

**Android API version:** : 33

**Material Library version:** : 1.6.0(also tested on 1.9.0)

**Device:** galaxy fold2

To help us triage faster, please check to make sure you are using the [latest version](https://github.com/material-components/material-components-android/releases) of the library.

We also happily accept [pull requests](https://github.com/material-components/material-components-android/pulls).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the provided MaterialCardView XML and the RoundTop20 style, focusing on how the card's shape and the nested ConstraintLayout background interact. Reproduce the issue using the supplied gradient drawable and top-only corner settings; done means the gradient renders with rounded top corners and square bottom corners.

Written by the indexing model from the issue text.

Assessment

Tech stack
android
Domain
design, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.