Featured in AndroidWeekly 555

Storytime: Blank screens and suboptimal UX

Here's a common scenario: A user turns on the Fire TV device and immediately launches your app. Unfortunately for everyone, your app has not fully-loaded into memory, which is known by developers as "cold start". Cold starts cause delays between the start of your app and when the launcher activity’s onCreate() function is called.

While your app is executing the onCreate() function, memory-intensive operations may further delay the launch of the main activity. Delays will cause your users to see a blank/black screen while this activity inflates the screen’s UI. Often this suboptimal user experience leads to a common risk: users perceive your app as non-responsive and will exit the app.

The solution: Define splash screens

An efficient way to overcome this ambiguous first launch user experience is by creating a custom theme that overrides the android:windowBackground property. As part of the custom theme, applications can specify their branded splash screen image. Android will display the splash screen specified as part of windowBackground while launching the application, thus improving the user experience. Assign this to an Activity responsible to display the splash screen and launch the main activity.

Step 1: Create your custom splash screen

Create a file named splashscreen.xml in the drawable directory. This file will contain all the graphic elements and layers of your splash screen. This file should have the following markup:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

    <item android:drawable="@drawable/splashscreen_logo" android:gravity="center"/>

</layer-list>

Note: The SVG (Scalable Vector Graphics) image format load faster compared to other image formats when testing on FireTV devices.

Step 2: Create the splash screen theme

Define a new style in the file styles.xml of your project then add an android:windowBackground item set as the @drawable/splashscreen splash screen you created in the prior step:

<style name="SplashScreenTheme" parent="Theme.SplashScreenTV.NoActionBar">
    <item name="android:windowBackground">@drawable/splashscreen</item>
</style>

Step 3: Create the splash screen activity

Create a new activity responsible for displaying the splash screen, launch the main activity, then terminate:

Kotlin

class SplashScreenActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        startActivity(Intent(this, MainActivity::class.java))
        finish()
    }
}

Java

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        startActivity(new Intent(this, MainActivity.class));
        finish();
    }
}

Step 4: Apply the splash screen theme to the splash screen activity

In AndroidManifest.xml, set the theme attribute of the SplashScreenActivity to the theme you setup in step 2. The SplashScreenActivity will be the first activity called by the launcher, so remember to move the intent filter with the action android.intent.action.MAIN and category android.intent.category.LEANBACK_LAUNCHER from the Main Activity to the SplashScreenActivity:

<activity
    android:name=".SplashScreenActivity"
    android:exported="true"
    android:label="@string/title_activity_splash_screen"
    android:theme="@style/SplashScreenTheme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
        </intent-filter>
</activity>

Success: Your custom splash screen is now complete!

You have now implemented a custom splash screen and optimized the starting time of your Fire TV app displaying your branding image. To test this for yourself, use the Android Debug Bridge and follow our docs on installing your app on Fire TV.

Source code
You can find the complete project source code on this Github repo

Special thanks to Kostas and Joe

Stay updated

For the latest Amazon Appstore developer news, product releases, tutorials, and more:

📣 Follow @AmazonAppDev and our team on Twitter

📺 Subscribe to our Youtube channel

📧 Sign up for the Developer Newsletter

About the author

Giovanni ("Gio") Laquidara is a Senior Dev Advocate at Amazon, where he works on supporting developers around the world using the Amazon Appstore across many devices.

Previously, Gio worked as a software engineer building mobile apps, real-time defence systems, and VR/AR experiences. For fun, Gio enjoys low level programming, IoT hacking, and command line apps ⌨️✨.

You can connect with Gio on Twitter, Linkedin, and giolaq.dev.