How to make a 3 second branding splash screen when your app opens

When I make an app, I want users to see my brand and my logo for a moment before they go into my app. To do this I will do the following:

  1. Make a full screen image that will be my branding screen
  2. Set the Background Image property of Screen1 to this image
  3. Add a Clock (from the Sensors section of the Palette) to the app
  4. Make sure the Timer Enabled property is checked
  5. Set the timer to however long I want the branding screen to show (usually 3000 ms)
  6. Add the following blocks

Screen1 will be my branding screen and Screen2 will be the first screen users will see after they see the branding screen. If you want to see this in action, Tanaya’s Table shows this off well.

23 Likes

Thanks. Though it would be better to preload the second screen while showing the splash screen.

1 Like

Reading this topic, I got a doubt: Which size of the image do you often use to put as a splash screen?

2 Likes

I think the best size of a image for that ist 512x1024 or 1024x2048.
You can also try to take a other size.

3 Likes

Thanks Mika!!! I’ll try your suggestion!!!

Hi @arun (and All),

I like the simplicity of the method that you use. However, doesn’t it end up leaving Screen1 open? Shouldn’t it close Screen1 in order to minimize the load on resources (although the load isn’t much in this case)? Something like:

BTW, credit to Tribblehunter, I think, for the “if-true-then” construct, which allows “end” blocks to be used in non-end block positions:

http://puravidaapps.com/tribblehunter.php

Thanks Tribblehunter and @Taifun!

BillG

3 Likes

Your method doesn’t open anything. You disable Clock.Timer function after first tick :slight_smile: and close the main screen.

2 Likes

The example from @arun uses the recommended manager screen method. Screen1 stays open and is used as manager screen in this case.

Note from the Colored Dots tutorial:
You can have many screens in an App Inventor app, but a screen always returns to the screen that opened it. On the other hand, you can get the effect of screens switching to arbitrary other screen by setting up a “manager screen” that is used for opening all the other screens. When a screen wants to switch, it returns to the manager with a value saying which screen to open next.

Alternatively you also can use Tribblehunter’s method to keep only one screen open at any time.

well, it opens Screen2 and at the same time closes the current screen…
how this works is described here: Tribblehunter’s method

Taifun

2 Likes

Easiest method… :slight_smile:

Hi @ILoveThunkable,

Actually, the Clock1.Timer gets called after 3 seconds (3000 mS), due to the Designer settings:

@arun wrote:
“4. Make sure the Timer Enabled property is checked
5. Set the timer to however long I want the branding screen to show (usually 3000 ms)”

It actually seems to work as written.

Thanks!
BillG

1 Like

Hi @Taifun,

Okay, so it seems that the calling screen, the “manager screen” (Screen1 in this case) is to always remain open, even though it never returns to Screen1 from Screen2.

Thanks!
BillG

Hi All,

[A little OT] Just an FYI: Note that presently the NearField sensor only works on Screen1 (please see NearField):

https://thunkable.com/reference/components/sensor_components.html

In which case this implementation would have to be moved off of Screen1 to another screen.

Thanks,
BillG

1 Like

Please uncheck TimerAlwaysFires if you want to keep Screen1 open. This could otherwise cause an error because the “open another screen method” gets constantly triggered. I learned that the hard way.

how to make splash screen for my mobile

Please checkout this tutorial for creating spalsh screen in your app.

1 Like

Check out mine. I didn’t use different screens, simply 2 arrangements that appear after screen 1 initializing - leading you to the menu.

I have created its video Tutorial, hope this may help you step by step on splash-screen

3 Likes

I am using the webView I want the splash to last long enough for the site to load then it can expose the site to the user.

i did exacly same, background image not loading. only blank screen comes

Thank you so much! Solve a huge problem with screen2.