Tweet
Tweet

Slide 1

Slide 1 text

Implementing a Splash Screen in Android: Full Guide October 6th, 2022

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

1 What is a Splash Screen?

Slide 5

Slide 5 text

“The launch screen is a user’s first experience of your app.” Material Design

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

1.1 App Startup

Slide 9

Slide 9 text

⏳

Slide 10

Slide 10 text

System Process time Load & Launch Application Application Process Display start window MainThread Application onCreate Activity init Activity onCreate Initial composition, etc. Swap start window for app

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

1.2 A History of Splash Screens

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Android 12 (API level 31) Brought a new SplashScreen API All apps show a default splash screen Backwards compatible (to a certain extent)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

2 Let's make a splash! 🌊

Slide 18

Slide 18 text

API 31+ (Android 12+) Prior API 31

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Add Dependency

Slide 21

Slide 21 text

Customizable elements of a splash screen Customizing the animation for dismissing the splash screen Keeping it on-screen for a longer period Appearance

Slide 22

Slide 22 text

Appearance Icon Background Branding logo Icon Background

Slide 23

Slide 23 text

2.1 Icon

Slide 24

Slide 24 text

Icon Icon can be any vector drawable or PNG By default, SplashScreen uses the launcher icon Icon

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Define splash screen style Setting style attributes changes splash screen appearance Attributes that start with “android:” are only for API31+

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Define post splash screen theme postSplashScreenTheme attribute defines which theme to apply to the Activity once the splash screen is dismissed

Slide 33

Slide 33 text

Setting the splash style In manifest file, set the `theme` attribute of the whole or just the starting to splash screen style that you’ve defined

Slide 34

Slide 34 text

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)

Slide 35

Slide 35 text

Installing the splash screen SplashScreen reference is assigned to a val to use later for extra customization

Slide 36

Slide 36 text

API 31+ (Android 12+) Prior API 31

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

API 31+ (Android 12+) Prior API 31

Slide 40

Slide 40 text

Debug group

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

2.2 Background

Slide 43

Slide 43 text

Splash background Background color of the splash screen windowSplashScreenBackground attribute Defaults to the theme's windowBackground Single opaque color Background

Slide 44

Slide 44 text

Adding splash background

Slide 45

Slide 45 text

2.3 Icon Background

Slide 46

Slide 46 text

Icon background Optional color displayed below the icon Useful if you need more contrast between the icon and the window background Icon Background

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Adding an Icon background windowSplashScreenIconBackgroundColor attribute sets a background behind the splash screen icon

Slide 49

Slide 49 text

API 31+ (Android 12+) Prior API 31

Slide 50

Slide 50 text

2.4 Branding Image

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

API 31+ (Android 12+) Prior API 31

Slide 54

Slide 54 text

Keep aspect ratio Centering vector drawable in a layer-list preserves aspect ratio

Slide 55

Slide 55 text

API 31+ (Android 12+) Prior API 31

Slide 56

Slide 56 text

3 Animate Splash Screen

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

3.1 Animated Icon

Slide 59

Slide 59 text

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+

Slide 60

Slide 60 text

Adding animated icon windowSplashScreenAnimatedIcon attribute will play the animation while showing the starting window, if you supply an animated vector drawable

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

API 31+ (Android 12+) Prior API 31

Slide 63

Slide 63 text

3.2 Exit Animation

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

API 31+ (Android 12+) Prior API 31

Slide 69

Slide 69 text

3.3 Common Requirements

Slide 70

Slide 70 text

Lottie animation Not possible to use directly with the Splash Screen API - there’s a workaround

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

4 Legacy Methods

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

⏳ Launcher System Splash Screen Custom Splash Screen Initial Screen ⏳ Splash Activity

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

5 Summary

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Show me the code https://github.com/dean95/splash-screen-sample

Slide 81

Slide 81 text

Thank You! Dean Djermanović Android Engineer dean_95_ deandjermanovic