Guidelines for splash screens

Applies to Windows and Windows Phone

Follow these guidelines to customize the splash screen and create an extended splash screen, to help ensure a good launch experience for your users.

See this feature in action as part of our App features, start to finish series:  Windows Store app UI, start to finish

Dos and don'ts

  • Customize the splash screen to differentiate your app. Your splash screen consists of an image and a background color, both of which you can customize. A well-designed splash screen can make your app more inviting.

    Putting an image and background color together to form the splash screen helps the splash screen look good regardless of the form factor of the device your app is installed on. When the splash screen is displayed, only the size of the background changes to compensate for a variety of screen sizes. Your image always remains intact.

    To learn how to add and customize this splash screen, see Quickstart: Adding a splash screen.

  • Create an extended splash screen so that you can complete additional tasks before showing your app's landing page. You can further control the loading experience of your app by creating an extended splash screen that imitates the splash screen displayed by Windows. By imitating the splash screen displayed by the system, you can construct a smooth and informative loading experience for your users. If your app needs more time to prepare its UI or load network data, you can use your extended splash screen to display a message for the user as your app completes those tasks.

    The extended splash screen for the Windows Store is shown below. Note that this screen is identical to the initial splash screen except it adds an "indeterminate ring" progress control to let users know the app is loading.Screen shot of the Windows Store's extended splash screen

    To learn how to use the SplashScreen class to create an extended splash screen, see How to extend the splash screen (Windows Store apps using JavaScript and HTML) or How to extend a splash screen (Windows Store apps using C#/VB/C++ and XAML).

    For an overview of progress controls, like the indeterminate ring, see Guidelines for progress controls.

    Tip  If you use fragment loading to load your extended splash screen, you may notice a flicker between the time when the Windows splash screen is dismissed and when your extended splash screen is displayed. You see this flicker because fragment loading begins to load your extended splash screen asynchronously, before the activated event handler finishes executing. You can avoid this unsightly flicker entirely by using the design pattern demonstrated by the Splash screen sample. Instead of loading the extended splash screen as fragments, it is simply painted on top of the app’s UI. When your additional loading tasks are complete you can then stop displaying your extended splash screen to reveal your app’s landing page. Alternatively, if you wish to continue loading your extended splash screen as a fragment, you can also prevent the flicker by getting an activation deferral and responding to activated events asynchronously. Get a deferral for an activated event by calling the activatedOperation.getDeferral method.

  • Don't use the splash screen or your extended splash screen to display advertisements. The purpose of the splash screen is to let users know, while the app is loading, that the app they wanted to start is starting. Introducing foreign elements into the splash screen reduces the user's confidence that they launched the correct app and makes the app harder to identify at a glance.

  • Don't use your extended splash screen as a mechanism to display multiple, different splash screen images. The purpose of the splash screen and extended splash screen is to provide a smooth, polished loading experience for your users. Using your extended splash screen to display multiple, different splash screen images distracts from this purpose and could be jarring or confusing to your users. Instead, your extended splash screen should only continue the current loading experience while other tasks are completed.

  • Don't use the splash screen or your extended splash screen to display an "about" page. The splash screen should not show version information or other app metadata. Display this information in your app's Windows Store description or within the app itself.

User experience

  • Use an image that clearly identifies your app. Use an image and color scheme that clearly identify your app, so that users are confident that they launched the correct app. Making a unique screen also helps reinforce your brand.

  • Use a transparent PNG as your splash screen image for best visual results. Using a transparent PNG lets the background color you chose show through your splash screen image. Otherwise, if the image has a different background color, your splash screen may look disjointed and unappealing.

  • Provide a version of your splash screen image that is sized for all three scale factors. All apps must have a splash screen image that is 620 x 300 pixels, for when the device uses 1x scaling. We also recommend that you include additional splash screen images for 1.4x and 1.8x scaling. Providing images for all three scale factors helps you create a clean and consistent launch experience across different devices.

    Use the following table to determine the required size the splash screen image for each scale factor:

    ScaleImage size (pixels)
    1x620 x 300
    1.4x868 x 420
    1.8x1116 x 540

     

  • Choose an image that uses the area allotted by the system for the splash screen image. When you choose a splash screen image, try to take advantage of the space allotted at each scale factor. Refer to the scale and image size table to determine the size of the splash screen image for each scale factor.

    This helps you produce a high-quality splash screen, by ensuring the quality of the image.

  • Show system and event-related UI after the splash screen is dismissed. You can determine when it is safe to show system or event-related UI by listening for the splash screen dismissed event. Otherwise, the associated UI (like the search pane, a message dialog, or web authentication broker) might show while the splash screen is displayed. This might cause unwanted visual effects.

  • Start entrance animations after the splash screen is dismissed. Many apps wish to show content entrance animations each time the app’s landing page is loaded. You can determine when to start your animations by listening for the splash screen dismissed event.

Extended splash screens

  • Make sure your extended splash screen looks like the splash screen that is displayed by Windows. Your extended splash screen should use the same background color and image as the Windows splash screen. Using a consistent image and background color helps ensure that the transition from the Windows splash screen to your app's extended splash screen looks professional and is not jarring for your users.

  • Position your extended splash screen image at the coordinates where Windows displayed the splash screen image. To learn how to position your extended splash screen image using the SplashScreen class, see How to extend the splash screen.

  • Adjust the position of your extended splash screen to respond to resize events like rotation. Your extended splash screen should adjust the coordinates of its splash screen image, if the app is scaled or the device is rotated, by listening for the onresize event. This helps ensure that your app's loading experience looks smooth and professional, regardless of how users manipulate their devices or change the layout of apps on their screens.

  • If you show your extended splash screen for more than a few seconds, add a progress ring so users know your app is still loading. Use the indeterminate progress ring control to let users know that your app hasn’t crashed and will be ready soon. Consider displaying a single line of text alongside the progress ring to briefly explain what your app is doing to your users. For example, your extended splash screen could feature a progress ring and a "Loading" message.

    Making your app seem more responsive and keeping your users informed is a great way to create a positive loading experience for users. You can learn how to add an indeterminate progress ring and text in Quickstart: adding progress controls.

Additional usage guidance

Every Windows Store app must have a splash screen, which consists of a splash screen image and a background color. You can customize both of these features.

Windows displays this splash screen immediately when the user launches an app. This provides immediate feedback to users while app resources are initialized. As soon as your app is ready for interaction, Windows dismisses the splash screen.

A well-designed splash screen can make your app more inviting. The Windows Store uses the simple, understated splash screen shown below: A 75% scaled screen capture of the splash screen from the Splash screen sample.

This splash screen is created by combining a green background color with a transparent PNG.

You can use the SplashScreen class to customize your app's launch experience by extending the splash screen and triggering entrance animations.

Security considerations

The following articles provide guidance for writing secure C++ code.

Troubleshooting

JavaScript: Avoiding a flicker during the transition to your extended splash screen

How to extend the splash screen includes advice to help you avoid seeing a flicker: If you notice a flicker during the transition to your extended splash screen, add onload="" on your <img> tag like this: <img id="extendedSplashImage" src="/images/splash-sdk.png" alt="Splash screen image" onload="" />. This helps prevent flickering by making the system wait until your image has been rendered before it switches to your extended splash screen.

C#: Avoiding a flicker during the transition to your extended splash screen

If you followed the instructions in How to extend the splash screen you may notice a flicker during the transition to your extended splash screen. This flicker occurs if you activate the current window (by calling Window.Current.Activate) before the content of the page finishes rendering. You can reduce the likelihood of seeing a flicker by making sure your extended splash screen image has been read before you activate the current window. Additionally, you should use a timer to try to avoid the flicker by making your application wait briefly, 50ms for example, before you activate the current window. Unfortunately, there is no guaranteed way to prevent the flicker because XAML renders content asynchronously and there is no guaranteed way to predict when rendering will be complete.

If you have followed the instructions in How to extend the splash screen and you notice a flicker during the transition to your extended splash screen, follow these steps to make sure your extended splash screen image been read and that your app waits briefly before the current window is activated:

  1. In ExtendedSplash.xaml, update the markup for your extended splash screen image to notify you when your extended splash screen image has been read.

    
    <Image x:Name="extendedSplashImage" Source="Assets/SplashScreen.png" ImageOpened="extendedSplashImage_ImageOpened"/>
    
    

    The ImageOpened event fires after the image has been read. As shown in the example, you should register for the ImageOpened event by adding the ImageOpened attribute and specifying the name of the event handler (extendedSplashImage_ImageOpened).

  2. In ExtendedSplash.xaml, add code in your ExtendedSplash class that activates the current window based on a timer and after your extended splash screen image has been read.

    
            private DispatcherTimer showWindowTimer;
            private void OnShowWindowTimer(object sender, object e)
            {
                showWindowTimer.Stop();
     
                // Activate/show the window, now that the splash image has rendered
                Window.Current.Activate();
            }
     
            private void extendedSplashImage_ImageOpened(object sender, RoutedEventArgs e)
            {
                // ImageOpened means the file has been read, but the image hasn't been painted yet.
                // Start a short timer to give the image a chance to render, before showing the window
                // and starting the animation.
                showWindowTimer = new DispatcherTimer();
                showWindowTimer.Interval = TimeSpan.FromMilliseconds(50);
                showWindowTimer.Tick += OnShowWindowTimer;
                showWindowTimer.Start();
            }
    
    

    This example shows both how to respond to an ImageOpened event and how to use a timer to make your application wait briefly before you activate the current window.

  3. Revise your OnLaunched method like this:

    
    protected override void OnLaunched(LaunchActivatedEventArgs args)
    {
        if (args.PreviousExecutionState != ApplicationExecutionState.Running)
        {
            bool loadState = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);
            ExtendedSplash extendedSplash = new ExtendedSplash(args.SplashScreen, loadState);
            Window.Current.Content = extendedSplash;
        }
    
        // ExtendedSplash will activate the window when its initial content has been painted.
    }
    
    

    In the example, we have removed the call to Activate the current window. Instead that activation is performed by the ExtendedSplash object after the ImageOpened event fires to indicate that the extended splash screen image has been read.

  4. Test your code on as many different devices and in as under as many difference circumstances as you can to make sure your code avoids the flicker effectively!

Related topics

For designers
How to extend the splash screen
Quickstart: Adding a splash screen
Splash screen sample
For developers (Windows Runtime apps using JavaScript and HTML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
Quickstart: adding progress controls
For developers (Windows Runtime apps using C#/VB/C++ and XAML)
Windows.ApplicationModel.Activation.SplashScreen class
Windows.ApplicationModel.Activation.SplashScreen.Dismissed event
ImageOpened
OnLaunched
Activate

 

 

Show:
© 2014 Microsoft. All rights reserved.