How do I add a splash screen to my Android app

There is not a built in method for adding a splash screen to your Android app. This lesson with describe two possible methods to add a splash screen.

Method 1: The splash screen as a card

The first method is to make the first card of your stack the splash screen. The splash screen will show for a specified time and then the app will automatically move to the next card.

  • Create a new stack
  • Set the name of the stack
  • Set the name of card 1 to "Splash"
  • Add an image to the card
  • Name the image "logo"
  • Create a new card
  • Set the name of card 2 to "Menu"

 

Open the Script Editor for card "Splash" and add a preOpenCard handler.

on preOpenCard
   set the filename of image "logo" to (specialFolderPath("resources") & "/splashLogo.png")
   send "goMenu" to me in 2 seconds
end preOpenCard
  • Load in the splash image
  • Send the goMenu command in 2 seconds

Now add the goMenu command

command goMenu
   go to card "menu"
end goMenu

When the goMenu message is received, after 2 seconds, the app will automatically move to card "Menu".

Note: remember to include your splash image in the Copy Files pane of the Standalone Application Settings

Method 2: The splash screen as a stack

The second method is very similar but you use a launcher stack as the splash screen and then open your main stack. This allows you to separate out your splash screen from the main part of your app.

  • Create a new stack
  • Set the name of the stack
  • Set the name of card 1 to "Splash"
  • Add an image to the card
  • Name the image "logo"
  • Create another new stack
  • Set the name of  the stack to "MyMainStack"
  • Add some controls to the stack, just so you can see it is open.

Open the Script Editor for card "Splash" and add a preOpenCard handler.

on preOpenCard
   set the filename of image "logo" to (specialFolderPath("resources") & "/splashLogo.png")
   send "goMenu" to me in 2 seconds
end preOpenCard
  • Load in the splash image
  • Send the goMenu command in 2 seconds

Now add the goMenu command

command goMenu
   open stack (specialFolderPath("resources") & "/MyMainStack.livecode")
end goMenu

When the goMenu message is received, after 2 seconds, the app will automatically open the stack "MyMainStack".

Setting up the standalone

With this method you build the Standalone from the "Splash" stack.

  • Add the splash image file to the Copy Files pane of the Standalone Application Settings
  • Add the "MyMainStack" stack  to the Copy Files pane of the Standalone Application Settings
  • Select any Inclusions you main stack will need , these must be included in the "Splash" standalone to make them available to the main stack.
  • Test by deploying the "Splash" stack

Adding functionality to your splash

In this simple example we just show the splash screen for a certain amount of time.

You could use your splash screen to prepare your app before opening, you could download files, set the state of the app etc. When these tasks are complete you would move on from the splash screen.

0 Comments

Add your comment

E-Mail me when someone replies to this comment