I saw many Thunkers asking for "How to set StatusBar Color". So, I made a quick tutorial on it - Let’s begin!
This tutorial’s aim is to help everyone who is looking for how to set-up StatusBar Color from in Thunkable X.
Please Note : As you might know, StatusBar Color only works on Android; iOS doesn’t have the functionality to change StatusBar Color. So, this tutorial only works for Android Smartphones.
Step #1 : Setting the
Firstly, we would require to set-up our
We would only need to change the
verticalAllignment property of the
screen. The default value is
center, we will change it to
Step #2 : Collecting required components
Next, lets get our required components. We would just need a
Drag out a label from the “User Interface” area in the components tray, and set it’s text to blank.
Step #3 : Setting-up the
Now, let’s set it’s
backgroundColor to the color you want as your StatusBar Color for the screen.
Next, set it’s height to
35px, and width to
Step #4 : Making adjustments to
Looking at Adjustments, we would just need to set it’s margin.
We would require the label’s margin to
Step #5 : Completing our
Now, our StatusBar is ready. You can now complete your screen accordingly below the
And we are Done!
What are we doing?
You must be wondering, that we set the height to 35px, and then the margin to -35px. Why?
The answer is, because, when we set any component’s margin to a negative value, it overlaps the above component by the given value in px or %. The height of most Android StatusBars is ~35px. So, just consider that the status bar is the component, and we are overlapping it.
Adding a custom StatusBar color does not mean that the color will appear as it is - instead, android has set a default transperant dark-grey color to the StatusBar. As I said, we are over-writing it, or stacking a color on top of it. So, the final color of the StatusBar would include a touch of dark grey blended into your set color.
Thanks for spending time on my tutorial!