How to achieve the different corner radius for the CardView which is bottom right corner should have more radius than the other corners

enter image description here

I have tried using https://github.com/captain-miao/OptionRoundCardview this repo but it didn't help the cause as it was giving edged corners.

Upvotes: 4

Views: 713

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364928

You can use the standard MaterialCard included in the official Material Components library.

Use in your layout:

<com.google.android.material.card.MaterialCardView
        style="@style/MyCardView"
        ...>

In your style use the new shapeAppearanceOverlay attribute to customize the shape (It requires the version 1.1.0.)

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_only_on_top</item>
  </style>

Something like:

  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeTopLeft">4dp</item>
    <item name="cornerSizeBottomRight">16dp</item>
    <item name="cornerSizeBottomLeft">4dp</item>
  </style>

enter image description here

Upvotes: 3

Related Questions