Schermate iniziali

A partire da Android 12, l'API SplashScreen consente di avviare le app con animazioni, ad esempio un movimento nell'app all'avvio, una schermata iniziale che mostra l'icona dell'app e una transizione all'app stessa. Un SplashScreen è un Window e pertanto copre un Activity.

L'esperienza della schermata iniziale aggiunge elementi di design standard a ogni lancio dell'app, ma è anche personalizzabile, per mantenere il branding unico dell'app.

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

Come funziona la schermata iniziale

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

1. Il sistema mostra la schermata iniziale utilizzando temi ed eventuali animazioni da te definite.

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

La schermata iniziale non viene mai visualizzata durante l'avvio rapido.

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:

Considera i seguenti elementi, mostrati nella Figura 2:

1 L'icona dell'app deve essere disegnabile vettoriale. Può essere statica o animata. Anche se le animazioni possono avere una durata illimitata, 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 è sufficiente con lo sfondo della finestra.

3 Come per le icone adattive, un terzo di tutto il primo è mascherato.

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

Dimensioni schermata iniziale

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

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

Ad esempio, se la grandezza originale di un'immagine è 300 × 300 dp, l'icona deve rientrare in un cerchio con un diametro di 200 dp. Tutto ciò che fuori dal cerchio diventa invisibile (mascherato).

Animazioni nelle schermate iniziali e sequenza di avvio

Una latenza aggiuntiva è spesso associata all'avvio di un'app all'avvio a freddo. L'aggiunta di un'icona animata alla schermata iniziale ha un aspetto estetico evidente e offre un'esperienza più premium. Gli utenti dimostrano che il tempo di avvio percepito è inferiore quando si visualizza un'animazione.

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

1. Inserisci l'animazione: si tratta della visualizzazione del sistema sulla schermata iniziale. È controllata dal sistema e non è personalizzabile.

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

3. Esci dall'animazione: consiste nell'animazione che nasconde la schermata iniziale. Se vuoi personalizzarla, utilizza SplashScreenView e la relativa icona. Puoi eseguire qualsiasi animazione su questi pod, con le impostazioni per trasformazione, opacità e colore. In questo caso, rimuovi manualmente la schermata iniziale al termine dell'animazione.

Quando esegui l'animazione dell'icona, l'avvio dell'app consente di saltare la sequenza nei casi in cui l'app fosse già pronta. L'app attiva onResume() o la schermata iniziale si disattiva automaticamente, quindi assicurati che il movimento possa essere ignorato senza problemi. La schermata iniziale può essere chiusa con onResume() solo quando l'app è stabile dal punto di vista visivo, quindi non sono necessarie ulteriori rotelline. Un'interfaccia incompleta può essere scioccante per gli utenti e potrebbe dare l'impressione di imprevedibilità o mancanza di raffinatezza.

Requisiti per l'animazione delle schermate iniziali

La schermata iniziale deve rispettare le seguenti specifiche:

• Imposta un colore di sfondo per una singola finestra senza trasparenza. Le modalità Giorno e Notte sono supportate dalla libreria degli elementi compatibili di SplashScreen.

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

  • Formato: l'icona deve essere in formato XML AnimatedVectorDrawable (AVD).
  • Dimensioni. Un'icona di visualizzazione della durata media deve essere quattro volte superiore a un'icona adattiva, come indicato di seguito:
    • 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 sull'icona in Avvio applicazioni e devono avere una dimensione di 288 dp, ovvero quattro volte i 72 dp che compongono l'area mascherata interna di un'icona adattiva.
  • Durata: consigliamo di non superare i 1000 ms sui telefoni. Puoi utilizzare un avvio ritardato, ma non può superare i 166 ms. Se il tempo di avvio dell'app è superiore a 1000 ms, prendi in considerazione un'animazione in loop.

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

Risorse sulle schermate iniziali

Scarica lo starter kit di esempio, che mostra come creare, formattare ed esportare un'animazione in una durata di visualizzazione media. tra cui:

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

Scaricando questi file, accetti i Termini di servizio di Google.

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

Personalizza la schermata iniziale nell'app

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

Puoi personalizzare la schermata iniziale dell'app in uno dei seguenti modi:

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

• Tienilo sullo schermo per un periodo più lungo.

• Personalizza l'animazione per chiudere la schermata iniziale.

Inizia

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

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

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 per la tua app. Se hai già un'implementazione precedente della schermata iniziale 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 singolo colore specifico:

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

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

   Per le app destinate solo ad Android 12 (livello API 32):

   Se l'oggetto è animabile e disegnabile tramite AnimationDrawable e AnimatedVectorDrawable, imposta windowSplashScreenAnimationDuration per riprodurre l'animazione mentre viene mostrata la finestra iniziale. Ciò 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 questa opzione non influisce sul tempo effettivo durante il quale viene visualizzata la schermata iniziale, ma puoi recuperarla quando personalizzi l'animazione di uscita della schermata iniziale utilizzando SplashScreenView.getIconAnimationDuration. Per maggiori 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 windowSplashScreenBrandingImage per impostare un'immagine da mostrare nella parte inferiore della schermata iniziale. Tuttavia, le linee guida sulla 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 deve sempre mostrare l'icona nella schermata iniziale in Android 13 e versioni successive. Il valore predefinito è 0, che mostra l'icona sulla 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 sempre che venga visualizzata l'icona animata, imposta questo valore sul valore icon_preferred.

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

Tieni la schermata iniziale sullo schermo per periodi più lunghi

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

Se l'attività iniziale termina prima di tracciare, ad esempio non impostando la visualizzazione del contenuto e terminando prima del giorno onResume, l'ascoltatore prima del disegno non è necessario.

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

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

Personalizza l'animazione per chiudere la schermata iniziale

Puoi personalizzare ulteriormente l'animazione della schermata iniziale tramite Activity.getSplashScreen().

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

@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, viene avviato il Drawable Vector animato sulla schermata iniziale. A seconda della durata dell'avvio dell'app, il file disegnabile potrebbe trovarsi nel mezzo dell'animazione. Utilizza SplashScreenView.getIconAnimationStart per sapere quando è stata avviata l'animazione. Puoi calcolare la durata rimanente dell'animazione dell'icona come segue:

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

// 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

• Esegui la migrazione dell'implementazione esistente della schermata iniziale ad Android 12 e versioni successive
• Ora nell'app per Android, che mostra l'implementazione reale di una schermata iniziale