How to set Android StatusBar Color - in Thunkable X

Hi Thunkers! :wave:

I saw many Thunkers asking for "How to set StatusBar Color". So, I made a quick tutorial on it - Let’s begin! :tada:


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! :tada: :tada:

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!
Happy Thunking! :tada:


Clarify,not all. :slightly_smiling_face: