how to create triangle gap on cardview?

Question

how can I create a triangle gap on the bottom of a cardview like this in android studio?

a cardview like this

https://www.journaldev.com/10024/android-recyclerview-android-cardview-example-tutorial refer this site — Kabilan, Jul 09 '20 at 13:49
the link that you preferred is just about simple cardviews. the cardview that I want to create has a gap on the bottom of it. — Mohammad Mirdar, Jul 09 '20 at 13:59

score 2 · Accepted Answer · answered Jul 09 '20 at 14:37

2

You can use the TriangleEdgeTreatment included in the Material Components Library.

Just use a simple layout like:

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card"
        .../>

then apply the TriangleEdgeTreatment on the bottom edge:

    MaterialCardView cardView = findViewById(R.id.card);
    cardView.setShapeAppearanceModel(cardView.getShapeAppearanceModel().toBuilder()
            .setBottomEdge(new TriangleEdgeTreatment(40.f, true))
            .build());

answered Jul 09 '20 at 14:37

Gabriele Mariotti

320,139
94
887
841

thank you for your perfect answer. when I set shape appearance to cardview, it has invisibled. – Mohammad Mirdar Jul 09 '20 at 15:55
@MohammadMirdar which version of material components are you using? – Gabriele Mariotti Jul 09 '20 at 16:39
yes. I changed my material components version to the latest alpha version and it worked fine. thank you so much – Mohammad Mirdar Jul 09 '20 at 17:01
@GabrieleMariotti Currently setBottomEdge is positioning the triangle at the bottom center of the cardview. Is it possible to set the triangle position, i mean put the triangle at the start or end of the cardview or add some custom margin? – Kostadin Georgiev Mar 15 '22 at 12:29
@Balflear Check this [answer](https://stackoverflow.com/a/62020063/2016562) and use the OffsetEdgeTreatment together with TriangleEdgeTreatment – Gabriele Mariotti Mar 15 '22 at 13:38

how to create triangle gap on cardview?

1 Answers1