Making a material title bar

design
material

#1

Hello everyone!
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.
First, set 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 web viewer.
Set the width of all three components to fill parent.
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!
Cheers


Buttons on Title Bar
Custom Menu button
Title Bar Menus
Why don’t thunkers use Material Design?
Android 7 Top Bar
Problems with Floating Action Buttons (FAB) and content interference
[Free] ActionBar Extension
SQL Internals Quiz Demo
Material Design Concepts in Thunkable
Can i design a seperate title bar?
How can i edit About this Application Button?
Issue with spinner component
How to hide the spinner
UI and design for an app
Removal of three dots and thunkable image from the title bar
Is There Any Limitation to the Amount of Files We Can Upload to Thunkable?
#2

Awesome as expected!


Thunkable classic not show title bar after export to apk
#3

Thanks! Good to know you liked it. I’ll add a few more to supplement your post soon!


#4

Just to simplify the task:

data:text/html,<body style="background-color:[Your App's Background Colour];margin:0px"><div style="background-color:[Your Title Bar Hex Code];width:100%;height:2px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.3);"></div></body>

Paste this in WebViewer’s Home URL field from property editor. So, no need to upload html file and edit it everytime you want to change something.


#5

I really like this! Great idea!! :+1:


#6

It just looks nice now


split this topic #7

A post was split to a new topic: Issue with spinner component


Is There Any Limitation to the Amount of Files We Can Upload to Thunkable?
#8

very nice example! :slight_smile:

I f somebody only wants a shadow effect below the title bar
than you can use this image:

Set the weidth to 100% and the height to automatic

:slight_smile:


#9

Nice idea @Mika but the reason why I’ve used a web viewer is because the image stretches unevenly on some devices, resulting in an elongated shadow. But this approach works fine on most phones and tablets.


#10

Excellent, thank you.

Just a little note for anyone doing the tutorial from scratch: don’t forget to set the screen sizing to Responsive or it wont work correctly.


#11

I appears that clicking the first element in the spinner doesn’t fire the after selecting event unless another element has been clicked first. Is there a solution to this?


#12

This has already been discussed:


#13

When I change of screen the web view start in white ther is a way to fix this problem?


#14

Could you please elaborate?


split this topic #15

A post was split to a new topic: How to use .ttf


#17

data:text/html,

How can I rotate it 90 degrees? Modifying your code please


#18

how You created that three dots spinner?


#19

Nice explanation But when I select Help for the first time then noting happens but If i select anything else and select help then it shows selected

http://prntscr.com/i9yhbg1st time Selecting Help

http://prntscr.com/i9yhqfSelecting Feedback

http://prntscr.com/i9yi6sAgaing Selecting Help

Can any body help


#20

Yes, the problem is that spinner remembers the last selection.

What I did in a similar situation, I’ve added an extra selection such as “--------” and when you select something from spinner, get selection to do what you want and set the spinner.selection to this extra “--------”


#21

Its a good idea but in my case I’m unable to select 1st item in first selection I have to choose 2nd or 3rd item in first selection and then select 1st Item