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.
Top comments (0)