How I made Ticket View — a Custom View for android

Vipul Asri
AndroidPub
Published in
4 min readJan 9, 2018

--

In today’s scenario where everything already exists. I came across a situation to develop a Ticket View as per UI designs. My first thought was to search on Android Arsenal and GitHub to see if someone has already developed this kind of view that will ease my work. But luckily I didn’t find one 🤩, I was like “Well Jarvis, we are back to hardware mode” (not literally 😜).

I will talk about two things here:

  • Creating Ticket View
  • Adding elevation/shadow (Thanks to Nick Butcher 🙌)

Ticket View

It took me two approaches to finally get it right.

  1. Initial Approach

My first approach was to erase the concave shape corners from the custom view and it worked but problem with this approach was no transparent corners were shown when view is above a certain background or color. As it showed concave corners with white background or I had to explicitly provide the corner’s background color. Even adding elevation to this view was a difficult to imagine. So, I had to think for a different approach.

Initial Ticket View

2. Better Approach

In order to get the transparent concave corners, I thought of creating a arc rather than erasing the corners which finally worked for me. So, I had to create 4 concave corners and 2 concave corners at center of width to show dividers.

DrawArc Diagram

In android arc is drawn clockwise rather than anti-clockwise according to coordinate system. The direction of drawing the arc can be reversed by providing negative angles.

Example

Start Angle = 0 degrees
Sweep Angle = 90 degrees

Shaded portion is the rendered arc portion. As you can see, It starts from 0 degrees as depicted in the coordinate system, and it sweeps 90 degrees in clockwise direction.

Above example can be implemented in code like this and it will help create bottom right concave corner.

canvas.drawArc(rect, 0, 90, false, paint);

You can learn more about ‘drawArc’ method in this detailed blog: https://robots.thoughtbot.com/android-canvas-drawarc-method-a-visual-guide

I also added the feature to have different kinds of corners: Scallop(Concave), Rounded and Normal corners. Ticket View has various customization available:

  1. Orientation: sets orientation of divider and center scallop
  2. Background Color: sets background color of the ticket
  3. Scallop Radius: sets scallop radius(concave)
  4. Scallop Position Percent: sets position of scallop and divider

and border color, divider color, divider type and elevation.

Ticket View Sample (without elevation/shadow)

Elevation/Shadow

To add elevation or shadow to my view, I was using linear gradient but as soon as I started implementing, it was becoming too complex to handle and I had to keep in mind each shape it may turn into.

So, I called out for help and guidance from most awesome person (creator of Plaid ) -Nick Butcher

He suggested me to use Blur instead of Linear Gradient for my view. I was in need of his guidance instead he sent me a pull request. That was the most amazing moment for me as I got to learn from him.

Nick Butcher’s Pull Request

Not only he sent me a pull request for adding elevations but also a better way to draw my views. For elevation what he did was, as soon as my view was laid out he created a bitmap of view’s height and width and then applied paint with black color and alpha of 20% to the canvas. After that blurred the bitmap resulting in a shadow/elevation.

Ticket View Sample (With Elevation)

P.S: Currently elevation/shadow is supported on API 17+. I tried adding support for API 15+ but unfortunately it increased the size of library from ~12KBs to 2.2Mb, so had discard the idea of lower minimum SDK for library.

If you enjoyed this story, please click the 👏 button and share to help others find it! Also feel free to leave a comment below.

--

--

Vipul Asri
AndroidPub

Google Certified Android Developer | Open-sourced Timeline-View and Ticket View 🎟 .