CardView with different corner radius

Question

I have the following CardView and I want to set different radius for each corner in the card. Is it possible to change them by XML or programmaticaly? Thanks in advance.

<android.support.v7.widget.CardView      xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_marginRight="16dp"     android:layout_marginLeft="16dp"     android:layout_marginTop="5dp"     android:layout_marginBottom="5dp"     app:cardCornerRadius="0dp"     app:cardElevation="0dp"> </android.support.v7.widget.CardView> 

EDIT As Avinash suggest, I am looking for the behaviour of this lib github.com/captain-miao/OptionRoundCardview but using the default CardView item. If it is not possible to change it individually, this lib is a good approach.

Answer 1

It requires the official MaterialCardView (which extends the androidx.cardview.widget.CardView) and at least the version 1.1.0 of the Material components library.

Add to your layout the MaterialCardView:

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

Define a custom style inheriting a material card style (for example Widget.MaterialComponents.CardView) and use the shapeAppearanceOverlay attribute:

  <style name="CustomCardViewStyle" parent="@style/Widget.MaterialComponents.CardView">      <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>   </style>     <style name="ShapeAppearanceOverlay_card_custom_corners" parent="">     <item name="cornerFamily">rounded</item>     <item name="cornerSizeTopRight">4dp</item>     <item name="cornerSizeTopLeft">8dp</item>     <item name="cornerSizeBottomRight">16dp</item>     <item name="cornerSizeBottomLeft">0dp</item>   </style> 

You can also achieve it programmatically.
Just apply a custom ShapeAppearanceModel to the corners of the card.
Something like:

float radius = getResources().getDimension(R.dimen.my_corner_radius); cardView.setShapeAppearanceModel(   cardView.getShapeAppearanceModel()       .toBuilder()       .setTopLeftCorner(CornerFamily.ROUNDED,..)       .setTopRightCorner(CornerFamily.ROUNDED,..)       .setBottomRightCorner(CornerFamily.ROUNDED,radius)       .setBottomLeftCornerSize(0)       .build()); 

Note: it requires the version 1.1.0 of the library.

---

With Jetpack compose you can use the shape parameter in the Card.

Something like:

    Card(         shape = RoundedCornerShape(            4.dp,            8.dp,            16.dp,            2.dp)     ){         Text("Content Card")     }