CODEWITHSUNDEEP
androidandroid-layoutandroid-cardviewmaterial-componentsmaterial-components-android
Tudor S.
Tudor S.

Reputation: 819

Different corner radius values for a MaterialCardView

Is is possible to have different values for each corner radius of a MaterialCardView? And if so how?

I tried something like the code below but it doesn't seem to have any effect

    float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
    ShapePathModel leftShapePathModel = new ShapePathModel();
    leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
    leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
    MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
    container.setBackground(bg);

where container is 

@BindView(R.id.container) MaterialCardView container;

Upvotes: 14

Views: 12600

Answers (4)

Mujahid Khan
Mujahid Khan

Reputation: 1834

Try This Also

     <style name="TopCornerCardview" parent="Widget.MaterialComponents.CardView">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">@dimen/dp25</item>
        <item name="cornerSizeTopLeft">@dimen/dp25</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="contentPadding">0dp</item>
    </style>

    <com.google.android.material.card.MaterialCardView
            style="@style/TopCornerCardview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TopCornerCardview"
            app:cardBackgroundColor="@color/colorAccent"
            app:cardUseCompatPadding="true">

>
<!--views here-->
</com.google.android.material.card.MaterialCardView>

Upvotes: 5

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364868

You can use a custom style and the shapeAppearanceOverlay attribute.

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


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

or you can apply a custom ShapeAppearanceModel to the corner of the card using something like:

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

enter image description here

Upvotes: 24

Tudor S.
Tudor S.

Reputation: 819

My initial solution was correct but it was missing one line:

float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
ShapePathModel leftShapePathModel = new ShapePathModel();
leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
container.setBackground(bg);

If you add 

container.invalidate()

as suggested by Cameron above it seems to work.

Upvotes: 3

Cameron Ketcham
Cameron Ketcham

Reputation: 8006

I think you should be able to call ShapeAppearanceModel shape = ((MaterialShapeDrawable)container.getBackground()).getShapeAppearanceModel() on your MaterialCardView. From there you could call setTopLeftCorner() or the other methods to set corner treatments with different values. You may need to call container.invalidate() after you set the corners.

Upvotes: 2

Related Questions