Schermate iniziali

A partire da Android 12, le app vengono avviate con una schermata iniziale di sistema che include un'animazione di apertura dell'app, una schermata iniziale che mostra l'icona dell'app e una transizione all'app stessa. La schermata iniziale è un Window e pertanto copre un Activity.

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

Per personalizzare la schermata iniziale dalla tua app, utilizza la libreria di compatibilità Jetpack SplashScreen. Esegue il wrapping dell'API SplashScreen della piattaforma e funziona con qualsiasi ComponentActivity, incluse le attività che impostano la propria UI con Compose utilizzando setContent.

Come funziona la schermata iniziale

Quando un utente avvia un'app mentre il processo dell'app non è in esecuzione (un avvio a freddo) o l'Activity non è stato creato (un avvio tiepido), si verificano i seguenti eventi:

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

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

La schermata iniziale 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 Android. Esistono versioni con tema chiaro e scuro per ogni elemento.

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

Considera i seguenti elementi, mostrati nella figura 2:

1 L'icona dell'app deve essere un drawable vettoriale. Può essere statico o animato. Sebbene le animazioni possano avere una durata illimitata, ti consigliamo di non superare i 1000 millisecondi. L'icona in Avvio applicazioni è quella 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'icona adattiva, lo sfondo viene visualizzato se il contrasto con lo sfondo della finestra è sufficiente.

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

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

Dimensioni della schermata iniziale

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

• Immagine di brand: deve essere di 200 x 80 dp.
• Icona dell'app con uno sfondo: deve essere di 240 x 240 dp e rientrare in un cerchio di 160 dp di diametro.
• Icona dell'app senza sfondo: deve essere di 288 x 288 dp e rientrare in un cerchio di 192 dp di diametro.

Ad esempio, se le dimensioni complete di un'immagine sono 300 x 300 dp, l'icona deve rientrare in un cerchio con un diametro di 200 dp. Tutto ciò che si trova all'esterno del cerchio diventa invisibile (mascherato).

Animazioni della schermata iniziale e sequenza di lancio

La latenza aggiuntiva è spesso associata all'avvio di un'app con un avvio completo. L'aggiunta di un'icona animata alla schermata iniziale ha un evidente appeal estetico e offre un'esperienza più premium. La ricerca con gli utenti mostra che il tempo di avvio percepito è inferiore quando viene visualizzata un'animazione.

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

1. Animazione di apertura: è costituita dalla visualizzazione di sistema alla schermata iniziale. È controllato dal sistema e non è personalizzabile.

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

3. Animazione di uscita: l'animazione che nasconde la schermata iniziale. Se vuoi personalizzarlo, utilizza la visualizzazione SplashScreenViewProvider e la relativa icona. Puoi eseguire qualsiasi animazione su questi elementi, con impostazioni per la trasformazione, l'opacità e il colore. In questo caso, rimuovi manualmente la schermata iniziale al termine dell'animazione.

Durante l'esecuzione dell'animazione dell'icona, l'avvio dell'app ti offre la possibilità di saltare la sequenza se l'app è pronta prima. L'app attiva onResume() o la schermata iniziale scade automaticamente, quindi assicurati che il movimento possa essere saltato facilmente. La schermata iniziale deve essere chiusa con onResume() solo quando l'app è stabile dal punto di vista visivo, in modo che non siano necessari altri indicatori di caricamento. L'introduzione di un'interfaccia incompleta può essere sconcertante per gli utenti e potrebbe dare un'impressione di imprevedibilità o mancanza di rifinitura.

Requisiti per l'animazione della schermata iniziale

La schermata iniziale deve rispettare le seguenti specifiche:

• Imposta un colore di sfondo della finestra unico senza trasparenza. Le modalità Giorno e Notte sono supportate con la libreria di compatibilità SplashScreen.

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

  • Formato: l'icona deve essere un file XML AnimatedVectorDrawable (AVD).
  • Dimensioni: un'icona AVD deve essere quattro volte più grande di un'icona adattiva, come segue:
    • L'area dell'icona deve essere di 432 dp, ovvero quattro volte l'area di 108 dp di un'icona adattiva non mascherata.
    • I due terzi interni dell'immagine sono visibili nell'icona di Avvio applicazioni e devono essere di 288 dp, ovvero quattro volte i 72 dp che costituiscono l'area mascherata interna di un'icona adattiva.
  • Durata: ti consigliamo di non superare i 1000 ms sugli smartphone. Puoi utilizzare un avvio ritardato, ma non può essere superiore a 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 l'app disegna il primo frame. Puoi personalizzarla ulteriormente come descritto nella sezione relativa alla conservazione della schermata iniziale sullo schermo per periodi più lunghi.

Risorse per la schermata iniziale

Scarica lo starter kit di esempio, che mostra come creare, formattare ed esportare un'animazione in un AVD. Include i seguenti contenuti:

• 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.

Personalizza la schermata iniziale nell'app

Per impostazione predefinita, SplashScreen utilizza il windowBackground del tuo tema se windowBackground è un colore singolo. 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.

• Tienilo sullo schermo per un periodo di tempo più lungo.

• Personalizza l'animazione per la chiusura della schermata iniziale.

Inizia

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

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

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

Poi crea un tema per la schermata iniziale che eredita da Theme.SplashScreen, imposta postSplashScreenTheme sul tema utilizzato dall'attività in un secondo momento, applica il tema della schermata iniziale nel manifest (consulta Esegui la migrazione dell'implementazione della schermata iniziale esistente ad Android 12) e chiama installSplashScreen() nell'attività iniziale prima di chiamare super.onCreate(), come mostrato negli esempi nelle sezioni seguenti.

Imposta 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 legacy che utilizza attributi come android:windowBackground, valuta la possibilità di fornire un file di risorse alternativo per Android 12 e versioni successive.

1. Utilizza windowSplashScreenBackground per riempire lo sfondo con un colore singolo specifico:

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

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

   Per le app che hanno come target solo Android 12 (livello API 32), segui questi passaggi:

   Se l'oggetto è animabile e disegnabile tramite AnimationDrawable e AnimatedVectorDrawable, imposta windowSplashScreenAnimationDuration per riprodurre l'animazione mentre viene mostrata la finestra di avvio. Questo non è obbligatorio per Android 13, perché la durata viene dedotta direttamente da AnimatedVectorDrawable.

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

3. Utilizza windowSplashScreenAnimationDuration per indicare la durata dell'animazione dell'icona della schermata iniziale. L'impostazione di questo valore non ha alcun effetto sul tempo effettivo di visualizzazione della schermata iniziale, ma puoi recuperarlo quando personalizzi l'animazione di uscita della schermata iniziale utilizzando SplashScreenViewProvider.iconAnimationDurationMillis. 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 non c'è abbastanza contrasto tra lo sfondo della finestra e l'icona.

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

5. Puoi utilizzare windowSplashScreenBrandingImage per impostare un'immagine da mostrare nella parte inferiore della schermata iniziale. Tuttavia, le linee guida per il design sconsigliano l'uso 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 in Android 13 e versioni successive. Il valore predefinito è 0, che mostra l'icona nella 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 uno stile. Se preferisci non visualizzare mai una schermata iniziale vuota e vuoi che l'icona animata venga sempre visualizzata, 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 chiusa non appena l'app disegna il primo frame. Se devi caricare una piccola quantità di dati, ad esempio le impostazioni in-app da un disco locale in modo asincrono, utilizza setKeepOnScreenCondition per mantenere la schermata iniziale sullo schermo finché i dati non sono pronti. La condizione viene valutata prima di disegnare ogni frame, quindi mantienila rapida per evitare di bloccare la UI.

Se l'attività iniziale termina prima del disegno, ad esempio non impostando la visualizzazione dei contenuti e terminando prima di onResume, non è necessario impostare una condizione.

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()
    }
}
SplashScreenSnippets.kt

Personalizza l'animazione per la chiusura della schermata iniziale

Puoi personalizzare ulteriormente l'animazione della schermata iniziale con setOnExitAnimationListener. Il listener riceve un SplashScreenViewProvider che ti fornisce la visualizzazione della schermata iniziale da animare. Chiama remove() al termine dell'animazione.

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()
    }
}
SplashScreenSnippets.kt

All'inizio di questo callback, viene avviato il drawable vettoriale animato nella schermata iniziale. A seconda della durata dell'avvio dell'app, l'elemento drawable potrebbe essere nel mezzo della sua animazione. Utilizza SplashScreenViewProvider.iconAnimationStartMillis per sapere quando è iniziata l'animazione. Puoi calcolare la durata rimanente dell'animazione dell'icona nel seguente modo:

// 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)
SplashScreenSnippets.kt

Risorse aggiuntive

• Esegui la migrazione dell'implementazione della schermata iniziale esistente ad Android 12 e versioni successive
• Now in Android, che mostra un'implementazione reale di una schermata iniziale