Splash screen iOS/Android: implementazione
Lo splash screen e la schermata che appare nei primi millisecondi di avvio dell'app. Su iOS si chiama Launch Screen ed e quasi obbligatorio; su Android l'API SplashScreen di Android 12+ ha standardizzato il comportamento. Una buona implementazione e veloce, brandizzata e coerente.
Launch Screen iOS
Apple richiede un Launch Screen storyboard come default. Deve essere statico (no animazioni) e mostrare il layout di base dell'app. Da iOS 18 supporta variante dark e tinted. Niente codice eseguito qui: serve solo a evitare schermo nero in startup.
Android SplashScreen API
Da Android 12 esiste l'API SplashScreen nativa con icona, sfondo e animazione opzionale. Configurabile via theme. Per Android <12 servono workaround custom (theme con drawable). La libreria androidx.core:core-splashscreen unifica le due API.
Splash custom
Per esperienze brandizzate (animazioni di logo, registrazione utente) si usa una schermata custom dopo lo splash di sistema. Mantienila breve (<2 secondi) e mai bloccante: in caso di errore di rete deve esserci un fallback.
Cold start vs warm start
Lo splash appare in cold start (app non in memoria). In warm start (app già in background), il sistema mostra l'ultimo snapshot. Non includere logica nello splash: più rapido e migliore. Su Android 12+, l'icona del Splash API anima dall'icona di launch alla schermata principale.
Animazioni e branding
Se vuoi un'animazione di brand (logo che si compone, transizione), implementala dopo lo splash di sistema, su una schermata custom controllata dalla tua app. Mantienila sotto 1.5 secondi e skippabile dopo il primo lancio. Mai bloccare il primo render della UI utile aspettando l'animazione.
Adaptive splash screen iOS
Su iOS supporta dark/light mode tramite Asset Catalog Image Set con varianti per appearance. Se la tua app supporta dark mode, anche lo splash deve farlo. Configura nel storyboard la connection a immagini con Any/Dark appearance set. Test su simulatore con appearance override.
Splashscreen API e versioning
androidx.core:core-splashscreen fornisce backport completo dell'API splash a tutti i livelli Android. Configurazione via theme XML. Window.installSplashScreen() in onCreate. setKeepOnScreenCondition permette di trattenere lo splash mentre carichi dati iniziali. Usa con cautela: lunghi splash sono UX negativa.
Splash con immagine ad alta risoluzione
Su iOS, configura LaunchScreen.storyboard come una vera storyboard con auto-layout. Usa Asset Catalog per logo, sfondo. Niente font sistema custom (LaunchScreen non carica font app). Mantieni il design coerente con la prima schermata vera per fluidita visiva.
Cold start optimization
Riduci il tempo di splash ottimizzando cold start. Defer init di SDK pesanti (Firebase, Analytics) finché dopo il primo frame. Lazy load di view controller secondari. Usa Background Fetch per pre-popolare cache. Obiettivo: meno di 1.5s da launch a interaction su device medi.
Procedura passo-passo
- iOS: crea LaunchScreen.storyboard con il logo e i colori del brand.
- Aggiungi varianti dark se serve.
- Android: includi androidx.core:core-splashscreen.
- Definisci il tema Theme.App.Starting con icon, background e brand color.
- Imposta postSplashScreenTheme per la transizione.
- Se serve splash custom, gestisci con un ViewModel/AppDelegate.
- Testa cold start e warm start su dispositivi reali.
Performance budget per splash
Splash totale (sistema + custom): <2s su device medio, <1s su flagship. Misura con first-meaningful-paint, non con app launch event. Profile cold start con Xcode Instruments App Launch e Android Macrobenchmark startup test. Performance budget integrato in CI previene regressioni gradiali invisibili manualmente.
Splash personalizzato avanzato
Se hai brand strong (Disney, Nike), splash con animazione di logo e parte dell'identità. Implementa con Lottie per animation vector-based, leggere, performant. Mantieni breve (<2s), skippabile dopo primo lancio. Combina con onboarding personalizzato per nuovi utenti, splash standard per ritorno. Equilibrio tra branding e funzionalita.
Errori comuni e come risolverli
- Splash con codice: rallenta avvio, viola linee guida.
- Splash troppo lungo: gli utenti pensano sia un crash.
- Logo non centrato: usa constraint, non posizioni fisse.
- Animazione bloccante: niente sleep o richieste sincrone.
- Mismatch icona-app: usa lo stesso asset dell'icona di lancio.
Domande frequenti
D: Posso saltare lo splash su iOS?
R: No, e richiesto da App Store. Anche se trasparente, deve esistere.
D: Lo splash personalizzato e ancora utile?
R: Si, per onboarding o feature flag fetch, ma deve essere veloce.
D: La nuova API Android funziona su versioni vecchie?
R: Si tramite androidx.core:core-splashscreen, con fallback grafico.
D: Posso saltare lo splash custom?
R: Si, ma considera il valore di branding. Per app B2B utilitarie, splash minimo e accettabile.
Best practice ricapitolative
Splash semplice, brandizzato, breve. Niente logica complessa. Performance budget rigoroso. Test su device più lenti del target. Coordina con animation team per transizione fluida da splash a home screen. UX coerente da launch a interazione e differenziatore di qualità percepita.
Considerazioni finali
Il primo impatto visivo conta enormemente. Investe tempo nel curare splash screen anche se sembra dettaglio minore. Combinato con icona ben progettata e onboarding curato, crea esperienza di lancio premium che differenzia da competitor.
Misurare cold start time accurato richiede tooling specifico. Su Android, baseline profiles ridurranno tempo di startup del 30-40% per app comuni. Su iOS, Launch Screen storyboard non e codice eseguito ma immagine renderizzata: ottimizza grafica per essere veloce a load. Combinazione di queste tecniche puo dimezzare startup time percepito.
Splash personalizzato deve sempre essere skippabile dopo primo lancio. Force splash a ogni lancio frustra utenti frequenti. Differenzia: prima sessione full branding, sessioni successive splash minimo o nessun splash custom.
Hai bisogno di aiuto?
Se vuoi sviluppare la tua app con G Tech Group, scrivici tramite il modulo di contatto.