Ladebildschirme

Ab Android 12 werden Apps mit einem System-Ladebildschirm gestartet, der eine Animation beim Starten der App, einen Ladebildschirm mit Ihrem App-Symbol und einen Übergang zur eigentlichen App enthält. Der Splash Screen ist ein Window und deckt daher ein Activity ab.

Abbildung 1. Ein Ladebildschirm.

Der Splash Screen bietet bei jedem App-Start Standard-Designelemente, kann aber auch angepasst werden, damit deine App ihr einzigartiges Branding beibehält.

Wenn du den Splash Screen deiner App anpassen möchtest, verwende die Jetpack-Kompatibilitätsbibliothek SplashScreen. Sie umschließt die Plattform-API SplashScreen und funktioniert mit allen ComponentActivity, einschließlich Aktivitäten, die ihre UI mit Compose über setContent festlegen.

So funktioniert der Splash Screen

Wenn ein Nutzer eine App startet, während der Prozess der App nicht ausgeführt wird (Kaltstart) oder die Activity nicht erstellt wird (Warmstart), treten die folgenden Ereignisse auf:

  1. Das System zeigt den Splash Screen mit den von dir definierten Designs und Animationen an.

  2. Wenn die App bereit ist, wird der Splash Screen ausgeblendet und die App angezeigt.

Der Splash Screen wird bei einem Warmstart nie angezeigt.

Elemente und Mechanik des Splash Screens

Die Elemente des Splash Screens werden durch XML-Ressourcendateien in der Android-Manifestdatei definiert. Für jedes Element gibt es eine Version für das helle und das dunkle Design.

Die anpassbaren Elemente eines Splash Screens sind das App-Symbol, der Symbolhintergrund und der Fensterhintergrund:

Ladebildschirm mit nummerierten Zusatzinformationen für die anpassbaren Elemente
Abbildung 2. Anpassbare Elemente eines Splash Screens.

Betrachten Sie die folgenden Elemente, die in Abbildung 2 dargestellt sind:

1 Das App-Symbol muss ein Vektor-Drawable sein. Sie kann statisch oder animiert sein. Animationen können zwar unbegrenzt lang sein, wir empfehlen jedoch,1.000 Millisekunden nicht zu überschreiten. Das Launcher-Symbol ist die Standardeinstellung.

2 Der Symbolhintergrund ist optional und nützlich, wenn Sie mehr Kontrast zwischen dem Symbol und dem Fensterhintergrund benötigen. Wenn Sie ein adaptives Symbol verwenden, wird der Hintergrund angezeigt, sofern der Kontrast zum Fensterhintergrund ausreichend ist.

3 Wie bei adaptiven Symbolen wird ein Drittel des Vordergrunds maskiert.

4 Der Fensterhintergrund besteht aus einer einzelnen deckenden Farbe. Wenn der Fensterhintergrund festgelegt ist und eine einfarbige Farbe hat, wird er standardmäßig verwendet, wenn das Attribut nicht festgelegt ist.

Abmessungen des Splash Screens

Für das Symbol auf dem Ladebildschirm gelten dieselben Spezifikationen wie für adaptive Symbole:

  • Markenbild: Dieses muss 200 × 80 dp groß sein.
  • App-Symbol mit Symbolhintergrund: Das Symbol muss 240 × 240 dp groß sein und in einen Kreis mit einem Durchmesser von 160 dp passen.
  • App-Symbol ohne Symbolhintergrund: Dieses muss 288 × 288 dp groß sein und in einen Kreis mit einem Durchmesser von 192 dp passen.

Wenn die Gesamtgröße eines Bildes beispielsweise 300 × 300 dp beträgt, muss das Symbol in einen Kreis mit einem Durchmesser von 200 dp passen. Alles außerhalb des Kreises wird unsichtbar (maskiert).

Abmessungen des Ladebildschirmsymbols mit einfarbigem und transparentem Symbolhintergrund
Abbildung 3. Abmessungen des Ladebildschirmsymbols für einfarbige und transparente Hintergründe.

Ladebildschirmanimationen und die Startsequenz

Das Starten einer App per Kaltstart ist oft mit zusätzlicher Latenz verbunden. Das Hinzufügen eines animierten Symbols zu Ihrem Splash Screen hat einen offensichtlichen ästhetischen Reiz und sorgt für ein hochwertigeres Erlebnis. Nutzerstudien zeigen, dass die wahrgenommene Startzeit kürzer ist, wenn eine Animation angezeigt wird.

Eine Ladebildschirm-Animation ist in die Komponenten der Startsequenz eingebettet, wie in Abbildung 4 dargestellt.

Startsequenz in zwölf aufeinanderfolgenden Frames, beginnend mit dem Tippen auf das Launcher-Symbol, das sich vergrößert und den Bildschirm füllt
Abbildung 4. Startsequenz

  1. Eingangs-Animation: Diese besteht aus der Systemansicht und dem Splash Screen. Sie wird vom System gesteuert und kann nicht angepasst werden.

  2. Splash Screen (wird während des „Warte“-Teils der Sequenz angezeigt): Der Splash Screen kann angepasst werden, sodass Sie Ihre eigene Logoanimation und Ihr eigenes Branding verwenden können. Sie muss die auf dieser Seite beschriebenen Anforderungen erfüllen, um ordnungsgemäß zu funktionieren.

  3. Ausgangsanimation: Dies ist die Animation, die den Splash Screen ausblendet. Wenn Sie die Ansicht anpassen möchten, verwenden Sie die Ansicht SplashScreenViewProvider und das entsprechende Symbol. Sie können jede beliebige Animation darauf ausführen und Einstellungen für Transformation, Deckkraft und Farbe festlegen. In diesem Fall musst du den Splash Screen manuell entfernen, wenn die Animation abgeschlossen ist.

Wenn die Symbolanimation ausgeführt wird, können Sie die Sequenz beim App-Start überspringen, falls die App früher bereit ist. Die App löst onResume() aus oder der Splash Screen wird automatisch beendet. Achte daher darauf, dass die Bewegung problemlos übersprungen werden kann. Der Ladebildschirm darf nur mit onResume() geschlossen werden, wenn die App visuell stabil ist, sodass keine zusätzlichen Ladeanzeigen erforderlich sind. Die Einführung einer unvollständigen Benutzeroberfläche kann für Nutzer irritierend sein und den Eindruck von Unvorhersehbarkeit oder mangelnder Sorgfalt erwecken.

Anforderungen an die Ladebildschirmanimation

Der Splash Screen muss die folgenden Spezifikationen erfüllen:

  • Legen Sie eine einfarbige Hintergrundfarbe für das Fenster ohne Transparenz fest. Der Tag- und Nachtmodus wird mit der SplashScreen-Kompatibilitätsbibliothek unterstützt.

  • Das animierte Symbol muss die folgenden Spezifikationen erfüllen:

    • Format: Das Symbol muss eine AnimatedVectorDrawable (AVD)-XML-Datei sein.
    • Abmessungen: Ein AVD-Symbol muss viermal so groß sein wie ein adaptives Symbol:
      • Der Symbolbereich muss 432 dp betragen, also das Vierfache des 108-dp-Bereichs eines nicht maskierten adaptiven Symbols.
      • Die inneren zwei Drittel des Bildes sind auf dem Launcher-Symbol sichtbar und müssen 288 dp groß sein, also viermal so groß wie die 72 dp, die den inneren maskierten Bereich eines adaptiven Symbols ausmachen.
    • Dauer: Wir empfehlen,auf Smartphones 1.000 ms nicht zu überschreiten. Sie können einen verzögerten Start verwenden, der jedoch nicht länger als 166 ms sein darf. Wenn die Startzeit der App länger als 1.000 ms ist, sollten Sie eine Schleifenanimation in Betracht ziehen.

  • Lege einen geeigneten Zeitpunkt für das Schließen des Splash Screens fest. Dies geschieht, wenn deine App den ersten Frame zeichnet. Sie können dies weiter anpassen, wie im Abschnitt Splash Screen länger auf dem Bildschirm anzeigen beschrieben.

Ressourcen für den Ladebildschirm

Abbildung 5. Beispiel für AVD.

Lade das Beispiel-Starter-Kit herunter, in dem gezeigt wird, wie du eine Animation erstellst, formatierst und in ein AVD exportierst. Folgende Angaben sind enthalten:

  • Adobe After Effects-Projektdatei der Animation.
  • Endgültige exportierte AVD-XML-Datei.
  • Beispiel-GIF der Animation.

Wenn du diese Dateien herunterlädst, stimmst du den Google-Nutzungsbedingungen zu.

In der Datenschutzerklärung von Google wird erläutert, wie Google bei diesem Dienst mit Daten umgeht.

Splash Screen in Ihrer App anpassen

Standardmäßig verwendet SplashScreen die windowBackground Ihres Designs, wenn windowBackground eine einzelne Farbe ist. Wenn du den Splash Screen anpassen möchtest, füge dem App-Design Attribute hinzu.

Sie können den Splash Screen Ihrer App so anpassen:

  • Legen Sie Designattribute fest, um das Erscheinungsbild zu ändern.

  • Lassen Sie es länger auf dem Bildschirm.

  • Passen Sie die Animation zum Schließen des Splash Screens an.

Jetzt starten

Die Core-Bibliothek SplashScreen stellt den Android 12-Splash-Screen für alle Geräte ab API 23 bereit. Fügen Sie Ihrer build.gradle-Datei das folgende Snippet hinzu, um es in Ihr Projekt einzubinden:

Groovy

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

Kotlin

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

Erstelle dann ein Splash Screen-Design, das von Theme.SplashScreen erbt, lege postSplashScreenTheme auf das Design fest, das die Aktivität danach verwendet, wende das Splash Screen-Design in deinem Manifest an (siehe Bestehende Splash Screen-Implementierung zu Android 12 migrieren) und rufe installSplashScreen() in deiner Startaktivität auf, bevor du super.onCreate() aufrufst, wie in den Beispielen in den folgenden Abschnitten gezeigt.

Design für den Splash Screen festlegen, um sein Aussehen zu ändern

Sie können die folgenden Attribute in Ihrem Activity-Design angeben, um den Splash Screen für Ihre App anzupassen. Wenn Sie bereits eine ältere Splash Screen-Implementierung haben, die Attribute wie android:windowBackground verwendet, sollten Sie eine alternative Ressourcendatei für Android 12 und höher bereitstellen.

  1. Mit windowSplashScreenBackground können Sie den Hintergrund mit einer bestimmten Farbe füllen:

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

  2. Verwenden Sie windowSplashScreenAnimatedIcon, um das Symbol in der Mitte des Startfensters zu ersetzen.

    Für Apps, die nur auf Android 12 (API-Level 32) ausgerichtet sind, gehen Sie so vor:

    Wenn das Objekt über AnimationDrawable und AnimatedVectorDrawable animiert und gezeichnet werden kann, legen Sie windowSplashScreenAnimationDuration fest, um die Animation abzuspielen, während das Startfenster angezeigt wird. Für Android 13 ist dies nicht erforderlich, da die Dauer direkt aus dem AnimatedVectorDrawable abgeleitet wird.

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

  3. Verwende windowSplashScreenAnimationDuration, um die Dauer der Animation des Ladebildschirm-Symbols anzugeben. Das Festlegen dieses Werts hat keine Auswirkungen auf die tatsächliche Zeit, während der der Splash Screen angezeigt wird. Sie können ihn jedoch abrufen, wenn Sie die Animation zum Beenden des Splash Screens mit SplashScreenViewProvider.iconAnimationDurationMillis anpassen. Weitere Informationen finden Sie im folgenden Abschnitt zum längeren Anzeigen des Splash Screens.

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

  4. Verwende windowSplashScreenIconBackgroundColor, um einen Hintergrund hinter dem Symbol des Splash Screens festzulegen. Das ist hilfreich, wenn der Kontrast zwischen dem Fensterhintergrund und dem Symbol nicht ausreicht.

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

  5. Mit windowSplashScreenBrandingImage können Sie ein Bild festlegen, das unten auf dem Splash Screen angezeigt werden soll. In den Designrichtlinien wird jedoch davon abgeraten, ein Branding-Bild zu verwenden.

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

  6. Mit windowSplashScreenBehavior kannst du festlegen, ob deine App das Symbol auf dem Splash Screen unter Android 13 und höher immer anzeigt. Der Standardwert ist 0. Dadurch wird das Symbol auf dem Splash Screen angezeigt, wenn die Startaktivität splashScreenStyle auf SPLASH_SCREEN_STYLE_ICON setzt, oder es wird das Systemverhalten verwendet, wenn die Startaktivität keinen Stil angibt. Wenn Sie nie einen leeren Splash Screen und immer das animierte Symbol anzeigen möchten, legen Sie den Wert icon_preferred fest.

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

Splash Screen länger auf dem Bildschirm anzeigen

Der Splash Screen wird geschlossen, sobald die App den ersten Frame darstellt. Wenn du eine kleine Datenmenge laden musst, z. B. In-App-Einstellungen asynchron von einem lokalen Laufwerk, verwende setKeepOnScreenCondition, um den Splash Screen auf dem Bildschirm zu lassen, bis die Daten bereit sind. Die Bedingung wird vor dem Zeichnen jedes Frames ausgewertet. Sie sollte daher schnell sein, um ein Blockieren der Benutzeroberfläche zu vermeiden.

Wenn die Startaktivität vor dem Zeichnen abgeschlossen wird, z. B. weil die Inhaltsansicht nicht festgelegt und die Aktivität vor onResume beendet wird, müssen Sie keine Bedingung festlegen.

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

Animation zum Schließen des Splash Screens anpassen

Mit setOnExitAnimationListener können Sie die Animation des Splash Screens weiter anpassen. Der Listener empfängt ein SplashScreenViewProvider, das die zu animierende Splash Screen-Ansicht enthält. Rufen Sie remove() auf, wenn die Animation endet.

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

Zu Beginn dieses Callbacks wird das animierte Vektor-Drawable auf dem Splash Screen gestartet. Je nach Dauer des App-Starts befindet sich das Drawable möglicherweise mitten in der Animation. Verwenden Sie SplashScreenViewProvider.iconAnimationStartMillis, um zu erfahren, wann die Animation gestartet wurde. Die verbleibende Dauer der Symbolanimation lässt sich so berechnen:

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

Zusätzliche Ressourcen