Overview
At the end of this tutorial you will be able to create a custom progress bar for your apps, just like the thin yellow bar that you can see scrolling across the bottom of the screen here.
Remix this app
If you want jump straight in and get a copy of this project yourself then just click on this remix link
1. Increment and Show Percent
For this example the CounterLabel.Text starts at 0 and increases with each button press.
To set the width of the ProgressLabel we first calculate the percentage progress made so far. For something like a quiz this would be:
currentQuestion ÷ totalQuestions × 100
The result of this calculation is then rounded, and joined with the % symbol so that it can be used as the percentage progress.
Note: It would probably be a better idea to use a separate variable for the counter value, rather than the CounterLabel that I have opted for above.
2. Repeat?
In some cases, such as a carousel app, your user might want to move backwards as well as forwards. This is really easy to do - simply subtract 1 rather and adding one on and then perform the exact same steps to calculate and display the percentage progress.
Note: The PreviousButton Blocks are almost identical to the NextButton blocks. We can do better!
3. Don’t Repeat Yourself
We’ve mentioned this a few times in other tutorials and videos already, but it’s worth …eh… pointing out again; Don’t repeat yourself. Did you notice how these blocks in the previous step are identical?
Here are a couple of reasons why you shouldn’t repeat yourself:
- You code will be less efficient
- Your code will be harder to read
- Your code will be harder to maintain and update in the future
- You code will be less efficient
- Your code will be harder to read
- Your code will be harder to maintain and update in the future
Let’s replace the bulky, repetitive calculation with a streamlined, efficient function:
4. Creating your function
You could contain everything in a function without an output too - I’ve just chosen this approach because it suited my needs here.
A variable called percent is created to store the output of the calculation, then this updated value of this variable is returned by the function every time it is called.
5. BONUS FEATURE: “Developer Mode”
When testing this with larger numbers it was hard to see what progress - if any - was being made. To deal with the we can create a “developer mode” for our app, by creating one last variable called debugging. If debugging is true then the percentage will also be displayed in the label while testing.
Once we’re happy with the values we can set it back to false and out end users will just see a nice clean progress bar.
NOTE: In the animation at the top of this tutorial the numbers can be seen because this debugging mode is turned on
Try it yourself
Click on this remix link to get a copy of this app that you can edit and use for yourself.
Hope you find this useful!
