Écrans de démarrage

À partir d'Android 12, les applications se lancent avec un écran de démarrage système qui inclut une animation d'entrée dans l'application au lancement, un écran de démarrage affichant l'icône de votre application et une transition vers l'application elle-même. L'écran de démarrage est un Window et couvre donc une Activity.

Figure 1. Un écran de démarrage.

L'expérience de l'écran de démarrage apporte des éléments de conception standards à chaque lancement d'application, mais elle est également personnalisable afin que votre application puisse conserver son branding unique.

Pour personnaliser l'écran de démarrage de votre application, utilisez la bibliothèque de compatibilité Jetpack SplashScreen. Il encapsule l'API SplashScreen de la plate-forme et fonctionne avec n'importe quel ComponentActivity, y compris les activités qui définissent leur UI avec Compose à l'aide de setContent.

Fonctionnement de l'écran de démarrage

Lorsqu'un utilisateur lance une application alors que le processus de l'application n'est pas en cours d'exécution (démarrage à froid) ou que l'Activity n'est pas créé (démarrage tiède), les événements suivants se produisent :

  1. Le système affiche l'écran de démarrage à l'aide des thèmes et des animations que vous définissez.

  2. Lorsque l'application est prête, l'écran de démarrage disparaît et l'application s'affiche.

L'écran de démarrage ne s'affiche jamais lors d'un démarrage à chaud.

Éléments et mécanismes de l'écran de démarrage

Les éléments de l'écran de démarrage sont définis par des fichiers de ressources XML dans le fichier manifeste Android. Il existe des versions de thème clair et sombre pour chaque élément.

Les éléments personnalisables d'un écran de démarrage sont l'icône d'application, l'arrière-plan de l'icône et l'arrière-plan de la fenêtre :

Écran de démarrage avec des accroches numérotées pour ses éléments personnalisables
Figure 2 : Éléments personnalisables d'un écran de démarrage.

Tenez compte des éléments suivants, illustrés dans la figure 2 :

1 L'icône d'application doit être un drawable vectoriel. Il peut être statique ou animé. Bien que les animations puissent avoir une durée illimitée, nous vous recommandons de ne pas dépasser 1 000 millisecondes. L'icône de lanceur est l'icône par défaut.

2 L'arrière-plan de l'icône est facultatif et utile si vous avez besoin de plus de contraste entre l'icône et l'arrière-plan de la fenêtre. Si vous utilisez une icône adaptative, son arrière-plan s'affiche s'il est suffisamment contrasté par rapport à l'arrière-plan de la fenêtre.

3 Comme pour les icônes adaptatives, un tiers du premier plan est masqué.

4 L'arrière-plan de la fenêtre est constitué d'une seule couleur opaque. Si l'arrière-plan de la fenêtre est défini et qu'il s'agit d'une couleur unie, il est utilisé par défaut si l'attribut n'est pas défini.

Dimensions de l'écran de démarrage

L'icône de l'écran de démarrage utilise les mêmes caractéristiques que les icônes adaptatives, comme suit :

  • Image de marque : elle doit mesurer 200 x 80 dp.
  • Icône d'application avec un arrière-plan d'icône : elle doit mesurer 240 x 240 dp et tenir dans un cercle de 160 dp de diamètre.
  • Icône d'application sans arrière-plan : elle doit mesurer 288 x 288 dp et s'insérer dans un cercle de 192 dp de diamètre.

Par exemple, si la taille totale d'une image est de 300 x 300 dp, l'icône doit tenir dans un cercle d'un diamètre de 200 dp. Tout ce qui se trouve en dehors du cercle devient invisible (masqué).

Dimensions de l'icône de l'écran de démarrage avec des arrière-plans d'icône opaques et transparents
Figure 3 : Dimensions de l'icône de l'écran de démarrage pour les arrière-plans opaques et transparents, respectivement.

Animations de l'écran de démarrage et séquence de lancement

Une latence supplémentaire est souvent associée au lancement d'une application lors d'un démarrage à froid. L'ajout d'une icône animée à votre écran de démarrage présente un intérêt esthétique évident et offre une expérience plus haut de gamme. Les recherches sur l'expérience utilisateur montrent que le temps de démarrage perçu est plus court lors de l'affichage d'une animation.

Une animation d'écran de démarrage est intégrée aux composants de la séquence de lancement, comme illustré dans la figure 4.

Séquence de lancement en 12 images consécutives, commençant par l'appui sur l'icône de lanceur et remplissant l'écran à mesure qu'elle s'agrandit
Figure 4 : Séquence de lancement.

  1. Animation d'entrée : elle consiste en la vue système de l'écran de démarrage. Il est contrôlé par le système et n'est pas personnalisable.

  2. Écran de démarrage (affiché pendant la partie "attente" de la séquence) : l'écran de démarrage peut être personnalisé, ce qui vous permet de fournir votre propre animation de logo et votre propre branding. Il doit respecter les exigences décrites sur cette page pour fonctionner correctement.

  3. Animation de sortie : il s'agit de l'animation qui masque l'écran de démarrage. Si vous souhaitez le personnaliser, utilisez la vue SplashScreenViewProvider et son icône. Vous pouvez exécuter n'importe quelle animation sur ces éléments, avec des paramètres de transformation, d'opacité et de couleur. Dans ce cas, supprimez manuellement l'écran de démarrage une fois l'animation terminée.

Lors de l'exécution de l'animation de l'icône, le lancement de l'application vous permet d'ignorer la séquence si l'application est prête plus tôt. L'application déclenche onResume() ou l'écran de démarrage expire automatiquement. Assurez-vous donc que le mouvement peut être ignoré facilement. L'écran de démarrage ne doit être fermé avec onResume() que lorsque l'application est stable d'un point de vue visuel. Aucun indicateur de chargement supplémentaire n'est donc nécessaire. L'introduction d'une interface incomplète peut être déroutante pour les utilisateurs et donner une impression d'imprévisibilité ou de manque de finition.

Exigences concernant l'animation de l'écran de démarrage

Votre écran de démarrage doit respecter les spécifications suivantes :

  • Définissez une couleur d'arrière-plan de fenêtre unique sans transparence. Les modes Jour et Nuit sont compatibles avec la bibliothèque de compatibilité SplashScreen.

  • Assurez-vous que l'icône animée respecte les spécifications suivantes :

    • Format : l'icône doit être un fichier XML AnimatedVectorDrawable (AVD).
    • Dimensions : une icône d'AVD doit être quatre fois plus grande qu'une icône adaptative, comme suit :
      • La zone de l'icône doit être de 432 dp, soit quatre fois la zone de 108 dp d'une icône adaptative non masquée.
      • Les deux tiers intérieurs de l'image sont visibles sur l'icône de lanceur et doivent mesurer 288 dp, soit quatre fois les 72 dp qui constituent la zone masquée intérieure d'une icône adaptative.
    • Durée : nous vous recommandons de ne pas dépasser 1 000 ms sur les téléphones. Vous pouvez utiliser un démarrage différé, mais celui-ci ne doit pas dépasser 166 ms. Si le temps de démarrage de l'application est supérieur à 1 000 ms, envisagez une animation en boucle.

  • Définissez un délai approprié pour fermer l'écran de démarrage, qui s'affiche lorsque votre application dessine sa première frame. Vous pouvez personnaliser davantage cet écran, comme décrit dans la section Garder l'écran de démarrage à l'écran plus longtemps.

Ressources pour l'écran de démarrage

Figure 5. Exemple d'AVD.

Téléchargez l'exemple de kit de démarrage, qui montre comment créer, formater et exporter une animation dans un AVD. Il comprend les éléments suivants :

  • Fichier de projet Adobe After Effects de l'animation.
  • Fichier XML AVD final exporté.
  • Exemple de GIF de l'animation.

En téléchargeant ces fichiers, vous acceptez les Conditions d'utilisation de Google.

Les Règles de confidentialité de Google décrivent la manière dont les données sont traitées dans ce service.

Personnaliser l'écran de démarrage de votre application

Par défaut, SplashScreen utilise la windowBackground de votre thème si windowBackground est une couleur unie. Pour personnaliser l'écran de démarrage, ajoutez des attributs au thème de l'application.

Vous pouvez personnaliser l'écran de démarrage de votre application de l'une des manières suivantes :

  • Définissez des attributs de thème pour modifier son apparence.

  • Laissez-le à l'écran plus longtemps.

  • Personnaliser l'animation de fermeture de l'écran de démarrage

Commencer

La bibliothèque principale SplashScreen intègre l'écran de démarrage Android 12 sur tous les appareils de l'API 23. Pour l'ajouter à votre projet, ajoutez l'extrait suivant à votre fichier build.gradle :

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.2.0")
}

Créez ensuite un thème d'écran de démarrage qui hérite de Theme.SplashScreen, définissez postSplashScreenTheme sur le thème utilisé par l'activité, appliquez le thème d'écran de démarrage dans votre fichier manifeste (consultez Migrer votre implémentation d'écran de démarrage existante vers Android 12) et appelez installSplashScreen() dans votre activité de démarrage avant d'appeler super.onCreate(), comme illustré dans les exemples des sections suivantes.

Définir un thème pour l'écran de démarrage afin de modifier son apparence

Vous pouvez spécifier les attributs suivants dans votre thème Activity pour personnaliser l'écran de démarrage de votre application. Si vous disposez déjà d'une ancienne implémentation d'écran de démarrage qui utilise des attributs tels que android:windowBackground, envisagez de fournir un autre fichier de ressources pour Android 12 ou version ultérieure.

  1. Utilisez windowSplashScreenBackground pour remplir l'arrière-plan avec une couleur unie spécifique :

    <item name="android:windowSplashScreenBackground">@color/...</item>

  2. Utilisez windowSplashScreenAnimatedIcon pour remplacer l'icône au centre de la fenêtre de démarrage.

    Pour les applications ciblant Android 12 (niveau d'API 32) uniquement, procédez comme suit :

    Si l'objet peut être animé et dessiné via AnimationDrawable et AnimatedVectorDrawable, définissez windowSplashScreenAnimationDuration pour lire l'animation tout en affichant la fenêtre de démarrage. Cela n'est pas nécessaire pour Android 13, car la durée est directement déduite de AnimatedVectorDrawable.

    <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>

  3. Utilisez windowSplashScreenAnimationDuration pour indiquer la durée de l'animation de l'icône de l'écran de démarrage. La définition de cette option n'a aucun effet sur la durée réelle d'affichage de l'écran de démarrage, mais vous pouvez la récupérer lors de la personnalisation de l'animation de sortie de l'écran de démarrage à l'aide de SplashScreenViewProvider.iconAnimationDurationMillis. Pour en savoir plus, consultez la section suivante sur la conservation de l'écran de démarrage à l'écran pendant de plus longues périodes.

    <item name="android:windowSplashScreenAnimationDuration">1000</item>

  4. Utilisez windowSplashScreenIconBackgroundColor pour définir un arrière-plan derrière l'icône de l'écran de démarrage. Cela est utile si le contraste entre l'arrière-plan de la fenêtre et l'icône n'est pas suffisant.

    <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>

  5. Vous pouvez utiliser windowSplashScreenBrandingImage pour définir une image à afficher en bas de l'écran de démarrage. Toutefois, les consignes de conception déconseillent d'utiliser une image de marque.

    <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>

  6. Vous pouvez utiliser windowSplashScreenBehavior pour spécifier si votre application affiche toujours l'icône sur l'écran de démarrage sous Android 13 ou version ultérieure. La valeur par défaut est 0, ce qui affiche l'icône sur l'écran de démarrage si l'activité de lancement définit splashScreenStyle sur SPLASH_SCREEN_STYLE_ICON, ou suit le comportement du système si l'activité de lancement ne spécifie pas de style. Si vous préférez ne jamais afficher d'écran de démarrage vide et que vous souhaitez toujours afficher l'icône animée, définissez cette valeur sur icon_preferred.

    <item name="android:windowSplashScreenBehavior">icon_preferred</item>

Laisser l'écran de démarrage affiché plus longtemps

L'écran de démarrage disparaît dès que votre application affiche sa première image. Si vous devez charger une petite quantité de données, par exemple pour charger des paramètres intégrés à l'application à partir d'un disque local de manière asynchrone, utilisez setKeepOnScreenCondition pour que l'écran de démarrage reste affiché jusqu'à ce que les données soient prêtes. La condition est évaluée avant le dessin de chaque frame. Veillez donc à ce qu'elle soit rapide pour éviter de bloquer l'interface utilisateur.

Si votre activité de démarrage se termine avant le dessin (par exemple, en ne définissant pas la vue de contenu et en se terminant avant onResume), vous n'avez pas besoin de définir de condition.

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}

Personnaliser l'animation de fermeture de l'écran de démarrage

Vous pouvez personnaliser davantage l'animation de l'écran de démarrage avec setOnExitAnimationListener. L'écouteur reçoit un SplashScreenViewProvider qui vous donne la vue de l'écran de démarrage à animer. Appelez remove() dessus lorsque votre animation se termine.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}

Au début de ce rappel, le drawable vectoriel animé de l'écran de démarrage se lance. Selon la durée de lancement de l'application, l'élément drawable peut se trouver au milieu de son animation. Utilisez SplashScreenViewProvider.iconAnimationStartMillis pour savoir quand l'animation a commencé. Vous pouvez calculer la durée restante de l'animation de l'icône comme suit :

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)

Ressources supplémentaires