How I made Ticket View — a Custom View for android
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.
- 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.
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.
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.
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:
- Orientation: sets orientation of divider and center scallop
- Background Color: sets background color of the ticket
- Scallop Radius: sets scallop radius(concave)
- Scallop Position Percent: sets position of scallop and divider
and border color, divider color, divider type and elevation.
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.
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.
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.