Schermate iniziali

Importante: se hai implementato una schermata iniziale personalizzata in Android 11 o versioni precedenti, eseguire la migrazione dell'app in SplashScreen per garantire una corretta visualizzazione su Android 12 e versioni successive. Per istruzioni, consulta Eseguire la migrazione dell'implementazione della schermata iniziale esistente ad Android 12.

A partire da Android 12, L'API SplashScreen consente l'avvio delle app con animazione, tra cui un'azione in-app al momento del lancio e una schermata iniziale che mostra l'icona dell'app e una transizione all'app stessa. Un SplashScreen è un Window e pertanto copre Activity.

Figura 1. Una schermata iniziale.

L'esperienza della schermata iniziale offre elementi di design standard a ogni avvio dell'app, ma è anche personalizzabile in modo che la tua app possa mantenere il proprio branding unico.

Oltre a utilizzare l'API della piattaforma SplashScreen, puoi anche utilizzare la libreria di compatibilità SplashScreen, che avvolge l'API SplashScreen.

Come funziona la schermata iniziale

Quando un utente avvia un'app mentre il relativo processo non è in esecuzione (un ) oppure Activity non creato (un avvio rapido), si verificano i seguenti eventi:

1. Il sistema mostra la schermata iniziale utilizzando i temi e le animazioni che hai definito.

2. Quando l'app è pronta, la schermata iniziale viene chiusa e l'app viene visualizzata.

La schermata di benvenuto non viene mai visualizzata durante un avvio a caldo.

Elementi e meccanismi della schermata iniziale

Gli elementi della schermata iniziale sono definiti dai file di risorse XML nel file manifest di Android. Esistono versioni in modalità Luce e Buio per ogni elemento.

Gli elementi personalizzabili di una schermata iniziale sono l'icona dell'app, lo sfondo dell'icona e lo sfondo della finestra:

Figura 2. Elementi personalizzabili di una schermata iniziale.

Considera i seguenti elementi, mostrati nella Figura 2:

1 L'icona dell'app deve essere un drawable vettoriale. it può essere statico o animato. Sebbene le animazioni possano avere una durata illimitata, consigliamo di non superare i 1000 millisecondi. L'icona in Avvio applicazioni è l'icona predefinita.

2 Lo sfondo dell'icona è facoltativo e utile se hai bisogno di un maggiore contrasto tra l'icona e lo sfondo della finestra. Se utilizzi un adattiva, le relative lo sfondo viene visualizzato se il contrasto con lo sfondo della finestra è sufficiente.

3 Come per le icone adattive, un terzo del il primo piano è mascherato.

4 Lo sfondo della finestra è costituito da una singola colore opaco. Se lo sfondo della finestra è impostato ed è di un colore a tinta unita, viene utilizzato per impostazione predefinita se l'attributo non è impostato.

Dimensioni schermata iniziale

L'icona della schermata iniziale utilizza le stesse specifiche icone adattive, come segue:

• Immagine del brand: deve avere una dimensione di 200 x 80 dp.
• Icona dell'app con sfondo di un'icona: deve essere di 240 × 240 dp e rientrare in una cerchio con un diametro di 160 dp.
• Icona dell'app senza sfondo icona: deve avere dimensioni di 288 × 288 dp e rientrare un cerchio con un diametro di 192 dp.

Ad esempio, se la dimensione intera di un'immagine è 300 × 300 dp, l'icona deve adattarsi all'interno di un cerchio con un diametro di 200 dp. Tutto ciò che si trova al di fuori del cerchio diventa invisibile (mascherato).

Figura 3. Dimensioni dell'icona della schermata iniziale per sfondi solidi e trasparenti, rispettivamente.

Animazioni della schermata iniziale e sequenza di avvio

Spesso è associata una latenza aggiuntiva al lancio di un'app con un avvio completo. L'aggiunta di un'icona animata alla schermata di benvenuto ha un evidente appeal estetico e offre un'esperienza più premium. La ricerca sugli utenti mostra che il tempo di avvio percepito è inferiore quando si visualizza un'animazione.

Un'animazione della schermata iniziale è incorporata nei componenti della sequenza di avvio, come mostrato nella figura 4.

Figura 4. Avvia sequenza.

1. Animazione di entrata: è composta dalla visualizzazione del sistema alla schermata di benvenuto. it è controllato dal sistema e non è personalizzabile.

2. Schermata iniziale (mostrata durante la parte di attesa della sequenza): la schermata iniziale la schermata può essere personalizzata, consentendoti di fornire l'animazione del tuo logo e branding. Per funzionare correttamente, deve soddisfare i requisiti descritti in questa pagina.

3. Animazione di uscita: consiste nell'animazione che nasconde la schermata iniziale. Se vuoi personalizzarla, utilizza il SplashScreenView e le relative . Puoi applicare qualsiasi animazione, con impostazioni per trasformazione, opacità e colore. In questo caso, rimuovi manualmente la schermata iniziale quando al termine dell'animazione.

Quando viene eseguita l'animazione dell'icona, l'avvio dell'app ti offre la possibilità di saltare la sequenza se l'app è pronta prima. L'app si attiva onResume() o la schermata iniziale scade automaticamente, quindi assicurati che il movimento possa essere tralasciato comodamente. La schermata iniziale deve essere ignorata soltanto con onResume() quando l'app è stabile dal punto di vista visivo, in modo che non vengano necessaria. L'introduzione di un'interfaccia incompleta può essere fastidiosa per gli utenti e potrebbe diano un'impressione di imprevedibilità o mancanza di smalto.

Requisiti per l'animazione della schermata iniziale

La schermata di benvenuto deve rispettare le seguenti specifiche:

• Imposta il colore di sfondo di una singola finestra senza trasparenza. Le modalità Giorno e Notte sono supportate con la SplashScreen libreria compat.

• Assicurati che l'icona animata soddisfi le seguenti specifiche:

  • Formato: l'icona deve essere un file XML AnimatedVectorDrawable (AVD).
  • Dimensioni: un'icona AVD deve avere le dimensioni quattro volte superiori a quelle di un'icona adattabile, come segue:
    • L'area dell'icona deve essere di 432 dp, ovvero quattro volte l'area di 108 dp di un'icona adattabile non mascherata.
    • I due terzi interni dell'immagine sono visibili nell'icona del programma di avvio e devono essere pari a 288 dp, ovvero quattro volte i 72 dp che costituiscono l'area mascherata interna di un'icona adattabile.
  • Durata: consigliamo di non superare i 1000 ms sui telefoni. Puoi utilizzare un inizio ritardato, ma non più lungo di 166 ms. Se il tempo di avvio dell'app è superiore a 1000 ms, valuta la possibilità di utilizzare un'animazione in loop.

• Stabilisci un momento appropriato per chiudere la schermata iniziale, che si verifica quando la tua app disegna il primo frame. Puoi personalizzare ulteriormente questa opzione come descritto nella sezione relativa al mantenimento della schermata iniziale sullo schermo per periodi più lunghi.

Risorse per la schermata iniziale

Figura 5. AVD di esempio.

Scarica starter kit di esempio, che illustra come creare, formattare ed esportare un'animazione in una durata di visualizzazione media. Sono inclusi i seguenti elementi:

• Il file di progetto Adobe After Effects dell'animazione.
• File XML AVD esportato finale.
• GIF di esempio dell'animazione.

Se scarichi questi file, accetti i Termini di servizio di Google.

Le Norme sulla privacy di Google descrivono il modo in cui vengono trattati i dati in questo servizio.

Personalizzare la schermata iniziale nell'app

Per impostazione predefinita, SplashScreen utilizza la windowBackground del tuo tema se windowBackground è un solo colore. Per personalizzare la schermata iniziale, aggiungi attributi al tema dell'app.

Puoi personalizzare la schermata iniziale della tua app in uno dei seguenti modi:

• Imposta gli attributi del tema per modificarne l'aspetto.

• Mantieni il dispositivo sullo schermo per un periodo di tempo più lungo.

• Personalizza l'animazione per chiudere la schermata iniziale.

Inizia

La libreria di base SplashScreen porta la schermata di benvenuto di Android 12 su tutti i dispositivi a partire dall'API 23. Per aggiungerlo al progetto, aggiungi il seguente snippet al tuo file build.gradle:

Groovy

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

Kotlin

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

Impostare un tema per la schermata iniziale per modificarne l'aspetto

Puoi specificare i seguenti attributi nel tema Activity per personalizzare la schermata iniziale della tua app. Se hai già un'implementazione della schermata iniziale precedente che utilizza attributi come android:windowBackground, ti consigliamo di fornire un file di risorse alternativo per Android 12 e versioni successive.

1. Utilizza le funzionalità di windowSplashScreenBackground per riempire lo sfondo con un colore specifico:

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

2. Utilizza windowSplashScreenAnimatedIcon per sostituire l'icona al centro della finestra di avvio.

   Per le app che hanno come target solo Android 12 (livello API 32), svolgi i seguenti passaggi:

   Se l'oggetto è animabile e può essere disegnato tramite AnimationDrawable e AnimatedVectorDrawable, imposta windowSplashScreenAnimationDuration su per riprodurre l'animazione mentre viene mostrata la finestra di avvio. Non è obbligatorio per Android 13, perché la durata viene dedotta direttamente AnimatedVectorDrawable.

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

3. Utilizza windowSplashScreenAnimationDuration per indicare la durata dell'animazione dell'icona della schermata iniziale. L'impostazione non influisce sul tempo effettivo durante il quale viene visualizzata la schermata iniziale ma puoi recuperarla quando personalizzi l'uscita dalla schermata iniziale utilizzando SplashScreenView.getIconAnimationDuration Per ulteriori dettagli, consulta la sezione seguente su come mantenere la schermata iniziale sullo schermo per periodi più lunghi.

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

4. Utilizza windowSplashScreenIconBackgroundColor per impostare uno sfondo dietro l'icona della schermata iniziale. Questa opzione è utile se il contrasto tra lo sfondo della finestra e l'icona non è sufficiente.

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

5. Puoi utilizzare la modalità windowSplashScreenBrandingImage per impostare un'immagine da mostrare nella parte inferiore della schermata iniziale. Tuttavia, le linee guida per la progettazione sconsigliano l'utilizzo di un'immagine di branding.

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

6. Puoi utilizzare windowSplashScreenBehavior per specificare se la tua app mostra sempre l'icona nella schermata iniziale su Android 13 e versioni successive. Il valore predefinito è 0 e viene visualizzata l'icona la schermata iniziale se l'attività di avvio imposta splashScreenStyle su SPLASH_SCREEN_STYLE_ICON, o segue il comportamento del sistema se l'attività di avvio non specifica lo stile del testo. Se preferisci non visualizzare mai una schermata iniziale vuota e vuoi sempre visualizzare l'icona animata, imposta questo valore su icon_preferred.

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

Mantieni la schermata iniziale sullo schermo per periodi più lunghi

La schermata iniziale viene ignorata non appena l'app apre il primo frame. Se devi caricare una piccola quantità di dati, ad esempio il caricamento delle impostazioni in-app da un disco locale in modo asincrono, puoi utilizzare ViewTreeObserver.OnPreDrawListener per sospendere l'app e disegnare il primo frame.

Se l'attività iniziale termina prima di disegnare, ad esempio, non impostare la visualizzazione dei contenuti e terminarla prima del giorno onResume—il pre-disegno non serve.

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;
                    }
                }
            });
}

Personalizzare l'animazione per la chiusura della schermata iniziale

Puoi personalizzare ulteriormente l'animazione della schermata iniziale tramite 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();
    });
}

All'inizio di questo callback, Drawable vettoriale animato nella schermata iniziale. A seconda della durata del lancio dell'app, drawable potrebbe trovarsi al centro dell'animazione. Utilizza le funzionalità di SplashScreenView.getIconAnimationStart per sapere quando è stata avviata l'animazione. Puoi calcolare la durata rimanente l'animazione dell'icona nel seguente modo:

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;
}

Risorse aggiuntive

• Eseguire la migrazione dell'implementazione esistente della schermata iniziale ad Android 12 e versioni successive
• Nell'app Ora su Android, che mostra un'implementazione reale di una schermata iniziale