Écrans de démarrage

À partir d'Android 12, L'API SplashScreen permet aux applications de se lancer comportant une animation, y compris un mouvement dans l'application lors du lancement, un écran de démarrage affichant l'icône de votre application et une transition vers l'application elle-même. Un SplashScreen est un Window et couvre donc une Activity

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Figure 1. Écran de démarrage

L'écran de démarrage apporte des éléments de conception standards à chaque application mais vous pouvez aussi le personnaliser afin de conserver son branding unique.

En plus d'utiliser l'API de plate-forme SplashScreen, vous pouvez également utiliser SplashScreen compat, qui encapsule l'API SplashScreen.

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 (un start) ou Activity n'est pas (un démarrage tiède), la événements suivants se produisent:

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

  2. Lorsque l'application est prête, l'écran de démarrage se ferme et l'application s'affiche.

L'écran de démarrage ne s'affiche jamais pendant une 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 Fichier manifeste Android. Il existe des modes clair et sombre pour chaque élément.

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

Image montrant les éléments contenus dans un écran de démarrage
Figure 2 : Une éclaboussure personnalisables l'écran.

Examinez les éléments suivants, illustrés dans la figure 2:

1 L'icône d'application doit être un drawable vectoriel. Il peuvent être statiques ou animées. 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 un icône adaptative, son l'arrière-plan s'affiche si le contraste avec l'arrière-plan de la fenêtre est suffisant.

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

4 L'arrière-plan de la fenêtre se compose d'un seul couleur opaque. Si l'arrière-plan de la fenêtre est de 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 a les mêmes caractéristiques que icônes adaptatives, comme suit:

  • Image associée à la marque: 200 × 80 dp.
  • Icône d'application avec un arrière-plan d'icône: elle doit mesurer 240 × 240 dp et tenir dans un de 160 dp de diamètre.
  • Icône de l'application sans arrière-plan d'icône: elle doit mesurer 288 × 288 dp et tenir dans un cercle de 192 dp de diamètre.

Par exemple, si la taille réelle d'une image est de 300 × 300 dp, l'icône doit s'adapter dans un cercle d'un diamètre de 200 dp. Tout ce qui se trouve en dehors du cercle tourne invisibles (masquées).

Image montrant différentes dimensions d&#39;icône pour les arrière-plans unis et transparents
Figure 3 : Dimensions de l'icône de l'écran de démarrage pour des arrière-plans unis 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 à froid. L'ajout d'une icône animée à votre écran de démarrage a un attrait esthétique évident et offre une expérience plus premium. Des études sur l'expérience utilisateur montrent que les start-up est plus court lors du visionnage d'une animation.

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

Image montrant la séquence de lancement dans douze images consécutives, la première fois que l&#39;utilisateur appuie sur l&#39;icône du lanceur et remplit l&#39;écran à mesure qu&#39;il s&#39;agrandit
Figure 4 : Séquence de lancement.

  1. Accéder à l'animation: elle comprend la vue système et 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 "attendre" de la séquence): l'écran d'accueil Vous pouvez personnaliser l'écran, ce qui vous permet de créer votre propre animation de logo votre image de marque. Il doit répondre aux exigences. décrites dans cette page pour fonctionner correctement.

  3. Animation de sortie: animation qui masque l'écran de démarrage. Si vous souhaitez le personnaliser, utilisez le SplashScreenView et ses . Vous pouvez y exécuter n'importe quelle animation, avec les paramètres de transformation, l'opacité et la couleur. Dans ce cas, retirez manuellement l'écran de démarrage lorsque l'animation est terminée.

Lors de l'exécution de l'animation d'icône, le lancement de l'application vous donne la possibilité d'ignorer dans les cas où l'application serait prête plus tôt. L'application déclenche onResume() ou l'écran de démarrage expire automatiquement. Veillez donc à ce que le mouvement soit passer sans difficulté. L'écran de démarrage ne doit être fermé qu'avec onResume() Lorsque l'application est stable d'un point de vue visuel et qu'aucune icône de chargement n'est affichée. nécessaires. L'introduction d'une interface incomplète peut être déconcertante pour les utilisateurs et peut donnent une impression d'imprévisibilité ou de manque de raffinement.

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

Votre écran de démarrage doit respecter les caractéristiques suivantes:

  • Définissez une couleur d'arrière-plan pour une seule fenêtre sans transparence. Jour et nuit sont compatibles avec Bibliothèque de compatibilité SplashScreen.

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

    • Format:l'icône doit être un format AnimatedVectorDrawable (AVD) XML.
    • Dimensions:une icône AVD doit être quatre fois plus grande qu'une icône adaptative. comme suit: <ph type="x-smartling-placeholder">
        </ph>
      • La zone de l'icône doit être de 432 dp, soit quatre fois Zone de 108 dp d'une icône adaptative non masquée
      • Les deux tiers internes de l'image sont visibles sur l'icône du lanceur, et doit être de 288 dp, soit quatre fois la valeur de 72 dp constitue la zone masquée interne 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é, sans dépasser 166 ms. Si l'application temps de démarrage supérieur à 1 000 ms, utilisez une animation en boucle.

  • Déterminez le moment approprié pour fermer l'écran de démarrage, qui se produit comme suit : votre application dessine son premier cadre. Vous pouvez personnaliser ce paramètre dans la section sur l'écran de démarrage à l'écran plus longtemps ;

Ressources de l'écran de démarrage

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Figure 5. Exemple d'appareil virtuel Android

Téléchargez le exemple de kit de démarrage, qui montre comment créer, mettre en forme 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 expliquent comment les données sont gérées dans ce service.

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

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

Vous pouvez personnaliser l'écran de démarrage de votre application en effectuant l'une des opérations suivantes:

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

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

  • Personnalisez l'animation pour fermer l'écran de démarrage.

Premiers pas

La bibliothèque SplashScreen principale met l'écran de démarrage Android 12 à disposition de tous appareils de l'API 23. Pour l'ajouter à votre projet, insérez l'extrait suivant dans votre fichier build.gradle:

Groovy

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

Kotlin

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

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 le personnaliser l'écran de démarrage de votre application. Si vous disposez déjà d'un ancien écran de démarrage qui utilise des attributs comme android:windowBackground, pensez à en fournissant 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 drawable via AnimationDrawable et AnimatedVectorDrawable, définissez windowSplashScreenAnimationDuration sur lancer l'animation tout en affichant la fenêtre de démarrage. Ce n'est pas obligatoire pour Android 13, car la durée est directement déduite 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. Définir ce n'a aucune incidence sur la durée réelle pendant laquelle l'écran de démarrage affiché, mais vous pouvez le récupérer lors de la personnalisation de la sortie de l'écran de démarrage à l'aide de SplashScreenView.getIconAnimationDuration Consultez la section suivante pour en savoir plus l'écran de démarrage à l'écran plus longtemps pour en savoir plus.

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

  4. Utiliser windowSplashScreenIconBackgroundColor pour définir un arrière-plan derrière l'icône de l'écran de démarrage. Ceci est utile s'il y a le contraste entre l'arrière-plan de la fenêtre et l'icône est insuffisant.

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

  5. Vous pouvez utiliser windowSplashScreenBrandingImage pour afficher une image au bas de l'écran de démarrage. Toutefois, les directives de conception déconseillent l'utilisation d'une image de marque.

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

  6. Vous pouvez utiliser windowSplashScreenBehavior pour indiquer si votre application doit toujours afficher l'icône sur l'écran de démarrage dans 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 du style. Si vous préférez ne jamais afficher un écran de démarrage vide et que vous souhaitez toujours l'icône animée à afficher, définissez cette valeur sur la valeur icon_preferred.

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

Conserver l'écran de démarrage à l'écran plus longtemps

L'écran de démarrage se ferme dès que votre application dessine son premier frame. Si vous peuvent charger une petite quantité de données, comme les paramètres intégrés à une application à partir d'un sur le disque local de manière asynchrone, vous pouvez utiliser ViewTreeObserver.OnPreDrawListener suspendre l'application pour dessiner son premier frame.

Si l'activité de démarrage se termine avant le dessin (par exemple, définir l'affichage du contenu et terminer avant le onResume (pré-dessin) ; n'est pas nécessaire.

Kotlin

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

Java

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

Personnaliser l'animation pour fermer l'écran de démarrage

Vous pouvez personnaliser davantage l'animation de l'écran de démarrage via Activity.getSplashScreen()

Kotlin

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

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

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

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

Java

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

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

Au début de ce rappel, drawable vectoriel animé sur l'écran de démarrage démarre. En fonction de la durée de lancement de l'application, Le drawable peut se trouver au milieu de son animation. Utilisez SplashScreenView.getIconAnimationStart pour savoir quand l'animation a commencé. Vous pouvez calculer la durée restante l'animation de l'icône comme suit:

Kotlin

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

Java

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Ressources supplémentaires