How to develop custom splash screens on Fire TV
Tags: firetv, splashscreen, android, performance
Published: 2023-01-23 20:53:06

[![AndroidWeekly 555](https://androidweekly.net/issues/issue-555/badge)](https://androidweekly.net/issues/issue-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](https://developer.android.com/topic/performance/vitals/launch-time#cold)". Cold starts cause delays between the start of your app and when the launcher activity’s `onCreate()` function is called. 

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w6r6bk1o96txrytctaq.gif" alt="Black screen at cold start">
  <figcaption>*👆 Loading wait times + blank screens = *low* app satisfaction* </figcaption>
</figure>

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
<?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:

```xml
<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***
```kotlin
class SplashScreenActivity : AppCompatActivity() {

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

        startActivity(Intent(this, MainActivity::class.java))
        finish()
    }
}
```
***Java***
```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`:

```xml
<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](https://developer.amazon.com/docs/fire-tv/installing-and-running-your-app.html?cmp=2022_01_devg-sa&ch=soc&chlast=soc&pub=devto&publast=devto&type=org&typelast=org).

![Splash screen at cold start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3t7btoj06nh3mxy8dxk1.gif)

**Source code**
You can find the complete project source code on this [Github repo](https://github.com/giolaq/splash-screen-fire-tv-demo)

Special thanks to [Kostas](https://www.linkedin.com/in/kostakis-bouzoukas) and [Joe](https://www.linkedin.com/in/thomasjoe)

**Stay updated** 

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

📣 Follow [@AmazonAppDev](https://twitter.com/AmazonAppDev) and [our team](https://twitter.com/i/lists/1580293569897984000/members) on Twitter

📺 Subscribe to our [Youtube channel](https://www.youtube.com/amazonappstoredevelopers)

📧 Sign up for the [Developer Newsletter](https://m.amazonappservices.com/devto-newsletter-subscribe)

### 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](https://twitter.com/giolaq), [Linkedin](https://www.linkedin.com/in/glaquidara/), and [giolaq.dev](https://giolaq.dev)._