CardView - Adding cuts on left and right side with shadow

Question

I have to get this type of card design with semi-circle on both side of cardview along with shadows on both card view and semi-circles.

Thanks in advance.

@MRX I tried putting imageview with semi-circle drawable on left and right side and place them center_vertical and start of card view. but not able to remove shadow on these circle shown by card view. — Anukool srivastav, Jul 10 '17 at 06:25
can you please post your current code and logs, so as to understand the problem deeply. — Lazycoder-007, Jul 10 '17 at 06:51
@KamlakarKate I didn't went with image as their might be issue with resizing and all on different screen resolutions. — Anukool srivastav, Jul 10 '17 at 06:52

score 4 · Answer 1 · answered Jan 10 '18 at 07:12

I found a solution here that create a custom view called TicketView. It provide various option to set the radius of the arc and divider options.

You can use it as custom view.

<com.vipulasri.ticketview.TicketView
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:layout_marginTop="60dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:id="@+id/ticketView"
    app:orientation="vertical"
    app:scallopRadius="10dp"
    app:showBorder="false"
    app:scallopPositionPercent="50"
    app:showDivider="true"
    app:dividerType="dash"
    app:ticketElevation="14dp"/>

score 1 · Answer 2 · answered Jul 11 '17 at 16:33

It's not possible using Elevation API. A shadow is generated using view's ViewOutlineProvider with a convex path outlining the view. Your view is not convex, so you cannot make a proper ViewOutlineProvider, so you cannot get a nice, generated shadow that way.

The easiest way is to use a 9-patch with these cutouts drawn on it.

CardView - Adding cuts on left and right side with shadow

2 Answers2