# Building a Segmented Progress Bar in Android DevFeed: [Building a Segmented Progress Bar in Android]() Original publisher: [Read original article]() Author: Stephen Vinouze Published: 2021-11-30T15:24:34Z Content type: tutorial Language: en Sources: [betclic-tech - Medium]() Topics: [Android](), [Canvas](), [User Interfaces]() Tags: [android](), [android-app-development](), [building](), [canvas](), [kotlin](), [mobile-app-development](), [programming](), [ui](), [user-experience](), [user-interfaces]() ## AI overview A tutorial on building a segmented progress bar in Android by creating a custom View and drawing the interface with Canvas, Paint, and Path objects. It introduces the progress bar's segmented shapes and animation, then begins with a simpler one-segment implementation and discusses avoiding object allocation inside onDraw(). ## Source excerpt Leverage the power of custom drawing.Photo by Daniel Cheung on Unsplash At Betclic, we've proudly released our first in-app metagaming experience. And believe me, it's a huge step forward in the sportsbook industry. Challenging our users on different betting situations and rewarding them instantly was unheard of amongst our competitors. To achieve this, we wanted to bring the best user experience possible to engage our users. Amongst many topics, we've worked on the progression experience. We decided to build an exciting progress bar to reward our users for their progression. When it comes to building user interfaces (UI), you'll often rely on available tools provided by the SDK. However, there are times when your UI requirements prevent you from using them. You may try to tweak your tools, but it just won't fit the bill. To give the wanted look and feel of this progress bar, we decided to draw it ourselves. It turns out it's not as complicated as one may think. Creating Your Custom View Imagine a painter in front of a whiteboard. He'll need a set of brushes along with paint buckets. In Android, the whiteboard would be the Canvas. To draw on it, you'll need Paint objects instead of brushes and paint buckets. Finally, you'll use Path objects to direct the painter's arm onto the Canvas. We can manipulate all of the objects above directly inside a View. More specifically, all the magic happens in the onDraw() callback. https://medium.com/media/edb134052a28bb1bdf476877ee1cd965/href Coming back to the progress bar, let's start by breaking it down. We have a set of quadrilaterals displaying different angles. They're spaced from each other and have a filled state without space. Finally, we have a wavy animation synchronized with its filling progress. Before trying to match all these requirements, we can start with a simpler version. Don't worry, though. We'll get to the bottom of it! Drawing a One-Segment Progress Bar The first step would be to draw its most basic version: