Implementing a Splash Screen in Android: Full Guide

Splash screen is one of the most vital screens in the application. It's the user's first experience with the application. Android 12 introduced splash screens as default behaviour along with the SplashScreen API. With these changes, it’s a good time to take a deep dive into splash screen implementation on Android.

In this talk, we'll take a deep dive into the new SplashScreen API and explore it using practical examples. We’ll start from the basics, like what is a splash screen and why it is important. After that we’ll learn how to customise the default splash screen in Android 12 and how to migrate legacy splash screen implementations. At the end, we’ll have a working splash screen implementation with a consistent experience across Android versions.

At the end of this talk, you should have a better understanding of splash screens in general, SplashScreen API and its capabilities and limitations, and how you can use that knowledge to make app startup a more consistent and delightful experience.

Splash screens can seem trivial at first, but are often misused and with multiple possible approaches of adding a splash screen in the past, they were often done wrong. Luckily, with the SplashScreen API introduced, there’s now a single solution to ensure consistency across codebases. If you’re an Android developer, odds are you’ll work with splash screens sooner or later, so join me in this journey and learn how to do it the right way!

Transcript

1. Implementing a Splash Screen in Android: Full Guide October 6th, 2022
3. First Impressions Matter With any introduction – to people, places, or products – first impressions are critical It only takes 50ms for users to form a first impression It’s vital that your first impression is always your best one
4. 1 What is a Splash Screen?
5. “The launch screen is a user’s first experience of your app.” Material Design
7. What is a Splash Screen? The very first screen the user sees when they open up an app on a mobile device It appears while the app is loading when the user has just opened up the app Splash screen is often called a launch screen Mostly has a logo, brand name, or slogan related to the product and it is minimalistic in nature
8. 1.1 App Startup
9. ⏳
10. System Process time Load & Launch Application Application Process Display start window <other stuff> MainThread Application onCreate Activity init Activity onCreate Initial composition, etc. Swap start window for app
11. App startup states App launch can take place in one of three states Each state affects how long it takes for your app to become visible to the user Startup states: • Cold start • Warm start • Hot start
12. Cold Start App is starting from scratch Happens when your app’s being launched for the first time Perfect for showing a splash screen that gives the impression of a shorter delay 3 Warm Start The system does not need to initialize everything but has lost some information and needs to reload it Doesn’t take as long as a cold start, but it’s often long enough to warrant a splash screen 2 Hot Start All the system does is bring your activity to the foreground It’s quick, leaving no time for a splash screen 1
13. 1.2 A History of Splash Screens
14. Splash Screens Over the Years Once viewed as an anti-pattern Often misused as a way to embed branding into apps Intentionally delaying users from reaching the content for a few seconds As Android evolved and app requirements grew, the time taken to launch apps began to increase The Material Design guidelines started recommending a splash screen Lack of documentation → multiple approaches of adding a splash screen No APIs or libraries existed to ensure consistency across codebases
15. Android 12 (API level 31) Brought a new SplashScreen API All apps show a default splash screen Backwards compatible (to a certain extent)
16. Idea behind a new SplashScreen API Opinionated implementation Standard and consistent implementation across all devices and operating systems No boilerplate code Provide branding and animation support
17. 2 Let's make a splash! 🌊
18. API 31+ (Android 12+) Prior API 31
19. Platform API vs Compat Library Provides control over the splash screen once the application is started On API 31+ (Android 12+) this class calls the platform methods Prior API 31, the platform behavior is replicated SplashScreen compat library - wraps the SplashScreen API SplashScreen Impl Impl31
20. Add Dependency
21. Customizable elements of a splash screen Customizing the animation for dismissing the splash screen Keeping it on-screen for a longer period Appearance
22. Appearance Icon Background Branding logo Icon Background
23. 2.1 Icon
24. Icon Icon can be any vector drawable or PNG By default, SplashScreen uses the launcher icon Icon
25. Icon Rules Needs to follow the same rules as the Adaptive Icon - needs to fit within a circle whose diameter is 2/3 the size of the icon
26. Icon Mask Icon is masked using system mask Don’t use adaptive icon - adaptive icon is already masked (cropped two times) Use just the foreground part and set the background separately
27. Icon Size With an icon background: 240×240 dp Without an icon background: 288×288 dp The actual values don't really matter if you use a vector icon 192dp 288dp 240dp 160dp
28. Theme.SplashScreen Defines Splash Screen attributes common to all versions Theme.SplashScreen.IconBackground Should be used if you wish to display a background under your icon Themes
29. Define splash screen style This style will define your splash screen Define splash icon Set the icon for the Splash screen Define post splash screen theme Defines which theme to apply to the Activity once the splash screen is dismissed Installing the splash screen Set the splash style Set the `theme` attribute to splash screen style that you’ve defined 05 01 02 03 04
30. Define splash screen style Setting style attributes changes splash screen appearance Attributes that start with “android:<name>” are only for API31+
31. Define splash icon windowSplashScreenAnimatedIcon attribute sets the icon for the Splash screen Despite the name, it doesn’t need to be animated On API31+, this can be an animated icon
32. Define post splash screen theme postSplashScreenTheme attribute defines which theme to apply to the Activity once the splash screen is dismissed
33. Setting the splash style In manifest file, set the `theme` attribute of the whole <application> or just the starting <activity> to splash screen style that you’ve defined
34. Installing the splash screen In the `onCreate` method of the starting activity, call installSplashScreen to install the splash screen installSplashScreen method creates a SplashScreen instance associated with that Activity and handles setting the theme to [R.attr.postSplashScreenTheme] Needs to be called before Activity.setContentView or other view operations on the root view (e.g setting flags)
35. Installing the splash screen SplashScreen reference is assigned to a val to use later for extra customization
36. API 31+ (Android 12+) Prior API 31
39. API 31+ (Android 12+) Prior API 31
40. Debug group
41. App Launch - Known Issue* SplashScreen API on Android 12 shows blank screen when launched via third-party-launchers, app-info, and from IDE By default splash screen isn’t shown - launcher sets a special flag that shows the splash screen Splash screen not displayed if you open an app from deeplink Android Studio runs app using adb which is considered as a launch from another app, not a launcher
42. 2.2 Background
43. Splash background Background color of the splash screen windowSplashScreenBackground attribute Defaults to the theme's windowBackground Single opaque color Background
44. Adding splash background
45. 2.3 Icon Background
46. Icon background Optional color displayed below the icon Useful if you need more contrast between the icon and the window background Icon Background
47. Change theme To enable the icon background, splash theme needs a different parent Ensures that the scale and masking of the icon are similar to the Android 12 Splash Screen
48. Adding an Icon background windowSplashScreenIconBackgroundColor attribute sets a background behind the splash screen icon
49. API 31+ (Android 12+) Prior API 31
50. 2.4 Branding Image
51. Branding image Optionally, you can set an image to be shown at the bottom of the splash screen The design guidelines recommend against using a branding image Only supported on API 31+ Should have the size of 200×80 dp Use vector asset to prevent loss of quality when the image is scaled Branding logo
52. Creating a New Style for Android 12 Create a new resource directory with the API 31 qualifier Add a copy of the theme you declared for your splash screen android:windowSplashScreenBrandingImage attribute places a drawable image in the bottom of the starting window
53. API 31+ (Android 12+) Prior API 31
54. Keep aspect ratio Centering vector drawable in a layer-list preserves aspect ratio
55. API 31+ (Android 12+) Prior API 31
56. 3 Animate Splash Screen
57. 1. Enter animation Consists of the system view to the splash screen This is controlled by the system and is not customizable Splash screen Allows you to supply your own logo animation 2. Exit animation Animation run that hides the splash screen Can be customized 3. Splash Screen animation launch sequence
58. 3.1 Animated Icon
59. Animated Icon Has aesthetic appeal Provides a more premium experience User research shows that perceived startup time is less when viewing an animation Only supported on API 31+
60. Adding animated icon windowSplashScreenAnimatedIcon attribute will play the animation while showing the starting window, if you supply an animated vector drawable
61. Adding animated icon windowSplashScreenAnimationDuration attribute sets the duration, in milliseconds, of the window splash screen icon. Recommend not to exceed 1,000 ms on phones It does not actually affect the duration of an animation of the icon as this is set by an AnimatedVectorDrawable
62. API 31+ (Android 12+) Prior API 31
63. 3.2 Exit Animation
64. Exit Animation You can customize the exit animation of the splash screen that is run once the app has loaded To customize it, you'll have access to the SplashScreenView and its icon and can run any animation on them The splash screen needs to be manually removed when the animation is done Backwards compatible
65. OnExitAnimationListener onSplashScreenExit SplashScreenViewProvider The listener will be called once the splash screen is ready to be removed Callback called when the splash screen is ready to be dismissed The caller must remove the splash screen once it's done with it An object holding a reference to the displayed splash screen Contains time information about the animated icon Provides references to the splash screen view and icon view
66. Adding Exit Animation Get references to the splash screen view and icon view splashScreenView is used to create custom animation from the splash screen to the application iconView contains the splash screen icon as defined by windowSplashScreenAnimatedIcon attribute
67. Define and Play Exit Animation Define and play animation for splash screen view and icon Once the animation is finished, remove the splash screen from view hierarchy SplashScreenViewProvider.remove() always needs to be called when an OnExitAnimationListener is set
68. API 31+ (Android 12+) Prior API 31
69. 3.3 Common Requirements
70. Lottie animation Not possible to use directly with the Splash Screen API - there’s a workaround
71. Take the first frame of the animation and convert it to an SVG Import and convert the SVG into a vector drawable using the Resource Manager tool Add lottie animation to the initial Activity and ensure that LottieAnimationView is aligned with splash icon Synchronize the end of the splash screen animation with the start of the lottie animation and manually dismiss the system splash screen to seamlessly transition from it to the initial activity
72. Shared element transition animation Not possible to use directly with the splash screen Workaround is similar to lottie animation Add element to the initial Activity and ensure that the element is aligned with element on splash icon Synchronize the end of the splash screen with the start of the element animation and manually dismiss the system splash screen to seamlessly transition from it to the initial activity
73. The disclaimer Don't do that. It's bad Letting users wait on a fancy but useless animation is against good UX Application start should be as fast as possible and the splash screen should be dismissed as soon as you have some content to display
74. 4 Legacy Methods
75. Launcher theme During the cold start, the window manager tries to draw a placeholder UI using attributes from the app theme Default windowBackground can be changed Splash screen only shows when needed - no intentional delays Inflexible - no animations Splash Activity Dedicated splash screen Activity that shows up for fixed amount of seconds More flexibility Introducing additional delay Your app has two splash screens on Android 12 and above
76. ⏳ Launcher System Splash Screen Custom Splash Screen Initial Screen ⏳ Splash Activity
77. Splash Activity If targetSdk is 31 or above, Android Studio issues a warning if you have custom splash screen implementation Migrate your app to the SplashScreen API
78. 5 Summary
79. Summary Splash screen is a critical aspect of the user experience How to use the SplashScreen API to provide a smooth experience for users Test your existing projects to ensure they’re compatible with Android 12
80. Show me the code https://github.com/dean95/splash-screen-sample
81. Thank You! Dean Djermanović Android Engineer dean_95_ deandjermanovic