Hi Thunkers!
I saw many Thunkers asking for "How to set StatusBar Color". So, I made a quick tutorial on it - Let’s begin!
Preface
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 screen
Firstly, we would require to set-up our screen
.
We would only need to change the verticalAllignment
property of the screen
. The default value is center
, we will change it to top
.
Step #2 : Collecting required components
Next, lets get our required components. We would just need a label
.
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 label
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 fillParent
.
Step #4 : Making adjustments to label
Looking at Adjustments, we would just need to set it’s margin.
We would require the label’s margin to -35px
.
Step #5 : Completing our screen
Now, our StatusBar is ready. You can now complete your screen accordingly below the label
.
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.
Footnotes
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!
Happy Thunking!