Imagine that you want to create a tutorial in your app or just want to make the filling of a simple and boring form a much more entertaining experience. Using a “step by step” is the ideal way of keeping the user engaged but also making them follow a very streamlined process while at the same time achieving a sense of completion when the steps are over.
In this article, I’m going to show you how to achieve that by creating a custom step progress bar in Xamarin Forms.
Let’s do it step by step
1-Create the control
The control is really simple, as you can see here we have 3 properties:
- StepColor: To set the color of the Items
- Steps: Quantity of Steps we will have
- StepSelected: The actual step selected
For the UI items, I’m using Buttons and BoxViews. Updating the style of the Button according to the element that is selected.
2-Use the control
In the Android platform, there’s an issue with Buttons, the border radius doesn’t get applied,. To get around this you just have to create an empty Button Renderer.
And that’s all, you can check the full source code here: