This post will describe how to display a native custom splash screen on an Android device that will be displayed between the point in time that the AIR runtime launches, and the point in time that the SWF takes control of the screen. While iOS provides out of the box tools to define a custom splash/loading screen, officially there’s no support for this on Android, so this is a workaround for this problem. No actionscript (as3 or as2) is needed for this. This will only affect how the AIR runtime launches, before the SWF takes over. Coupled with an SWF loader this should provide a smoother user experience.

This has been tested with the Flash IDE (version CS6, 12.0.0.481), and the AIR SDK (version 16.0.0.292), Android 4.4.2, using a Windows 7 PC.

Tools and resources you’ll need:

  • A text editor.
  • The AIR SDK.
  • A bitmap in PNG format that you want to use as a splash screen.

Step by step directions:

  • Locate the air SDK on your computer. I’m gonna call this location $AIR_ROOT. (Mine is at c:\Program Files\Adobe\AIR 16\)
  • Go to $AIR_ROOT\lib\android\lib\resources\app_entry\res\values\
  • Make a backup copy of the file styles.xml, just in case, and move the backup copy into another folder.
  • Open the file styles.xml in a text editor. (Launch the editor as admin if you don’t have the rights to write the folder $AIR ROOT.)
  • There should be a line similar to this:
<item name="android:windowContentOverlay">@null</item>
  • Replace the line above with this:
<item name="android:background">@drawable/my_splash</item>

Don’t use caps or any exotic characters.

The string my_splash is the name of the file you want to use as a splash screen, without the extension.

  • Save the file styles.xml.
  • Go to $AIR_ROOT\lib\android\lib\resources\captive_runtime\res\drawable\
  • Save the PNG you want to use as your splash screen into this folder, and rename it to my_splash.png. This time include the extension.
  • Build your APK, using captive runtime.
  • Install APK on android device.
  • Sit back, have a beer, and enjoy your native splash screen 🙂

Notes:

  • I didn’t look further into this, but as far as I know the main intent that AIR launches is always in portrait (vertical) mode. If your app is landscape (horizontal), the view will rotate over to horizontal when the SWF gains control, and thus your splash screen will get stretched for the last few milliseconds. I’m not sure if there’s a way around this.
  • Also I don’t think there’s any way to take into account the screen aspect ratio of different devices. So for example if you optimize your bitmap to fit a 16:9 screen, it will get stretched a bit when run on a 4:3 screen, and vice versa. Maybe one workaround is to settle for a ratio somewhere inbetween, and avoid using circles and boxes on the loading screen that help give away the stretching.
  • This splash screen will be included in every APK you build so you’ll need to edit styles.xml on a per-project basis.
  • To go back to the black screen, just replace styles.xml with the backup you made and erase my_splash.png.
  • The custom splash will be displayed behind your SWF for the entirety of your app’s running time. So this only works if your app uses some kind of a background and is not transparent.
  • Also because of the image being present the whole time, the app’s size in the phone’s memory will increase by the amount that the image takes up. Consider if you want to sacrifice memory this way.

Let me know if this works for you.