CODEWITHSUNDEEP
androidandroid-layoutcustom-view
vyshnav vyshu
vyshnav vyshu

Reputation: 36

How do I create a TicketView with a cutout on the top in Android?

I'm working on an Android app and I want to create a custom TicketView with a distinct cutout on the top. I'm using the com.vipulasri:ticketview library, and I have successfully created a basic TicketView. However, I'm struggling to figure out how to add a cutout on the top to give it a unique appearance.

Here's an example of what I'm trying to achieve:

enter image description here

I've checked the library's documentation, but I couldn't find any specific information on how to create a cutout like this.

Could someone guide me on how to achieve this effect? Do I need to create a custom background drawable, or is there a way to modify the TicketView properties to add this cutout?

I would appreciate any code examples or step-by-step instructions to help me implement this in my Android app. Thanks in advance!

What i have tried:

<com.vipulasri.ticketview.TicketView
android:id="@+id/ticketView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tv_backgroundColor="#FF5733"
app:tv_cornerRadius="4dp"
app:tv_dashHeight="10dp"
app:tv_dashGap="4dp"
app:tv_text="Sample Ticket"
app:tv_textColor="#FFFFFF"
app:tv_textSize="16sp" />

Upvotes: 0

Views: 243

Answers (1)

C.F.G
C.F.G

Reputation: 1463

You can use Android TicketView library instead. it has a nice property app:ticketPunchLocation that you can cutout a half circle from any side you want. For example app:ticketPunchLocation="top|bottom" will cutout a half circle from top and bottom. For cutting corners use app:ticketPunchRadius.

So in your case use the following (change it according to your goal. play with all feature to reach what you are trying to achieve):

<com.passid.android.ticketview.TicketView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="40dp"
        app:ticketBackgroundColor="@color/white"
        app:ticketCornerType="rounded"
        app:ticketElevation="20dp"
        app:ticketOrientation="vertical"
        app:ticketPunchLocation="top"
        app:ticketPunchRadius="24dp"
        app:ticketShowBorder="false"
        app:ticketShowDivider="true">

<!-- your views  -->

</com.passid.android.ticketview.TicketView>

enter image description here

Update: If the above doesn't worked try to add the main classes and its attributes into your project like other classes.

Update 2: You can also use similar TicketView library that is working fine. See this example: (controll top and bottom circles using boundary_topItemQuantity and boundary_bottomItemQuantity

    <com.lilincpp.ticketview.support.view.TicketView
        android:id="@+id/ticketview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:boundary_bottomItemQuantity="1"
        app:boundary_bottomRadius="24dp"
        app:boundary_hasStroke="true"
        app:boundary_roundCorner="4dp"
        app:boundary_shadowPx="8dp"
        app:boundary_show="left|right|top|bottom"
        app:boundary_strokeWidth="1dp"
        app:boundary_topItemQuantity="1"
        app:boundary_topDrawWeight="0.21"
        app:boundary_topRadius="24dp">
   .... 

   </com.lilincpp.ticketview.support.view.TicketView>

Upvotes: 0

Related Questions