The Thunkable team has done a great job by adding the option to change the colour of the title bar. I am sure it is one of the first of many steps in enabling us to fully customise the title bar. Until then, you can use this workaround.
I will show you how to make one for yourself. Let’s get started!
For those of you who would like to know the logic behind it, scroll to the bottom of the post.
Here’s the final result:
Step 1: Getting the framework ready.
This step is going to be more like making the chassis of a vehicle. I will be dealing with the three main components required: two horizontal arrangements and a web viewer.
title visible to false in the designer menu.
Then, place a
horizontal arrangement on the screen. Place another
horizontal arrangement under it. Below that, place a
Set the width of all three components to
Let’s name them H1, H2 and W respectively.
Set the height of H1 to 5px. For H2, you can choose any height you want. I suggest you use 10%. Let W be 30px in height.
Uncheck “Follow Links”, “Prompt for Permission” and “Zoom Display” on the web viewer properties.
In the properties panel of H2, set align horizontal to left and align vertical to centre.
Step 2: Making it look good
Now that we have our components ready, let’s make them more pleasing to the eye. Set the background colour of H1 and H2 to anything you like. Note that H1 and H2 should be of the same colour.
If you are using Taifun’s Tools extension, you can as well as set the colour of the status bar to a darker shade of H1’s colour.
Paste the following code into a text editor and save it as an HTML file. Next, upload it to Thunkable and set it as the web viewer’s home URL. (Taifun provides an in-depth approach on loading HTML assets here)
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body style="background-color:*BACKGROUND COLOUR OF SCREEN AS HEX*;margin:0px;"> <div style="background-color:*COLOUR OF YOUR TITLE BAR AS HEX VALUE* ;width:100%;height:5px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"></div> </body> </html>
You can now place components in H2 as per your choice. Buttons, labels, spinners… the list goes on!
Hope this helps!
Here is an AIA file for you to tinker around with!
titleBar.aia (79.1 KB)
How it works
The second horizontal arrangement is at the heart of the title bar. It is where all the components are placed.
The web viewer provides a shadow effect to the title bar.
Since we have a
<div> element that is 5px in height, it is necessary to place H1 on top of H2 to keep everything centred. The shadow effect extends up to 30px, hence the height of the web viewer.
A simple workaround to have material design in all your apps. Hope this helps!