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:

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.

image

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.

image

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.

image

Next, set it’s height to 35px, and width to fillParent.

image
image

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.

image

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.

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

3 Likes

Clarify,not all. :slightly_smiling_face: