Startbildschirme

Ab Android 12 können Apps mit der SplashScreen API mit Animationen gestartet werden, darunter eine Bewegung zum Starten der App, ein Ladebildschirm mit dem App-Symbol und ein Übergang zur App selbst. Ein SplashScreen ist ein Window und deckt daher ein Activity ab.

Abbildung 1. Ein Ladebildschirm

Mit dem Ladebildschirm werden bei jedem App-Start Standard-Designelemente verwendet, der Bildschirm ist aber auch anpassbar, sodass Ihre App ihr unverwechselbares Branding bewahren kann.

Neben der API der SplashScreen-Plattform können Sie auch die kompatible SplashScreen-Bibliothek verwenden, die die SplashScreen API umschließt.

So funktioniert der Ladebildschirm

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

  1. Das System zeigt den Ladebildschirm mit Designs und von Ihnen definierten Animationen an.

  2. Wenn die App bereit ist, wird der Ladebildschirm geschlossen und die App angezeigt.

Der Ladebildschirm wird während eines Heißstarts nie angezeigt.

Elemente und Mechanismen des Ladebildschirms

Die Elemente des Ladebildschirms werden durch XML-Ressourcendateien in der Android-Manifestdatei definiert. Für jedes Element gibt es einen hellen und einen dunklen Modus.

Die anpassbaren Elemente eines Ladebildschirms bestehen aus dem App-Symbol, dem Symbolhintergrund und dem Fensterhintergrund:

Ein Bild, das die Elemente auf einem Begrüßungsbildschirm zeigt
Abbildung 2. Anpassbare Elemente eines Begrüßungsbildschirms

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. Obwohl Animationen eine unbegrenzte Dauer haben können, empfehlen wir,1.000 Millisekunden nicht zu überschreiten. Das Launcher-Symbol ist das Standardsymbol.

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, wenn ausreichend Kontrast zum Fensterhintergrund vorhanden ist.

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

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

Abmessungen des Ladebildschirms

Für das Ladebildschirmsymbol gelten die gleichen Spezifikationen wie für adaptive Symbole:

  • Markenbild: muss 200 × 80 dp groß sein.
  • App-Symbol mit Symbolhintergrund: Dieses 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 ein Bild beispielsweise 300 × 300 dp groß ist, muss das Symbol in einen Kreis mit einem Durchmesser von 200 dp passen. Alles außerhalb des Kreises wird unsichtbar (maskiert).

Ein Bild mit unterschiedlichen Symbolabmessungen für einen einfarbigen und transparenten Hintergrund
Abbildung 3: Abmessungen des Ladebildschirmsymbols für einfarbige bzw. transparente Hintergründe.

Animationen auf dem Ladebildschirm und Startsequenz

Zusätzliche Latenz ist häufig mit dem Starten einer App bei einem Kaltstart verbunden. Das Hinzufügen eines animierten Symbols zu Ihrem Ladebildschirm wirkt optisch ansprechend und bietet ein Premium-Erlebnis. Nutzerstudien zeigen, dass die wahrgenommene Startzeit beim Ansehen einer Animation kürzer ist.

Eine Ladebildschirmanimation ist in die Startsequenzkomponenten eingebettet, wie in Abbildung 4 gezeigt.

Ein Bild, das die Startreihenfolge in zwölf aufeinanderfolgenden Frames zeigt, beginnend mit dem Tippen auf das Launcher-Symbol, das beim Vergrößern den Bildschirm füllt
Abbildung 4: Startsequenz

  1. Animation starten: Diese besteht aus der Systemansicht zum Ladebildschirm. Es wird vom System gesteuert und ist nicht anpassbar.

  2. Ladebildschirm (wird im Abschnitt „Warten“ der Sequenz angezeigt): Der Ladebildschirm kann angepasst werden, sodass du deine eigene Logoanimation und dein eigenes Branding bereitstellen kannst. Es muss die auf dieser Seite beschriebenen Anforderungen erfüllen, um ordnungsgemäß zu funktionieren.

  3. Animation beenden: Hierbei handelt es sich um die Animation, durch die der Ladebildschirm ausgeblendet wird. Wenn Sie es anpassen möchten, verwenden Sie SplashScreenView und das zugehörige Symbol. Sie können jede beliebige Animation mit Einstellungen für Umwandlung, Deckkraft und Farbe ausführen. Entfernen Sie in diesem Fall den Ladebildschirm manuell, nachdem die Animation abgeschlossen ist.

Beim Ausführen der Symbolanimation haben Sie beim App-Start die Möglichkeit, die Sequenz zu überspringen, falls die App früher bereit ist. Die App löst onResume() aus oder der Ladebildschirm wird automatisch beendet. Achte also darauf, dass die Bewegung problemlos übersprungen werden kann. Der Ladebildschirm darf nur dann mit onResume() geschlossen werden, wenn die App optisch stabil ist. Es werden also keine zusätzlichen Kreiselsymbole benötigt. Eine unvollständige Oberfläche kann für Nutzer verwirrend sein und den Eindruck von Unvorhersehbarkeit oder Mangel an Optik vermitteln.

Anforderungen an Animationen auf dem Ladebildschirm

Der Ladebildschirm muss die folgenden Spezifikationen erfüllen:

  • Legen Sie eine Hintergrundfarbe für ein einzelnes Fenster ohne Transparenz fest. Der Tag- und Nachtmodus wird mit der SplashScreen-kompatiblen Bibliothek unterstützt.

  • Achten Sie darauf, dass das animierte Symbol die folgenden Spezifikationen erfüllt:

    • Format:Das Symbol muss im XML-Format animateVectorDrawable (AVD) vorliegen.
    • Abmessungen:Ein AVD-Symbol muss viermal so groß wie ein adaptives Symbol sein:
      • Der Symbolbereich muss 432 dp groß sein, also viermal so groß wie der 108 dp-Bereich 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 viele 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, dieser darf jedoch nicht länger als 166 ms sein. Wenn die Startzeit der Anwendung länger als 1.000 ms ist, sollten Sie eine Animationsschleife verwenden.

  • Legen Sie einen geeigneten Zeitpunkt fest, um den Ladebildschirm zu schließen, wenn Ihre App den ersten Frame zieht. Sie können dies wie im Abschnitt Ladebildschirm länger anzeigen beschrieben weiter anpassen.

Ressourcen für den Ladebildschirm

Abbildung 5. Beispiel-AVD.

Laden Sie das Beispiel-Starterkit herunter, in dem gezeigt wird, wie Sie eine Animation erstellen, formatieren und in eine AVD exportieren. Sie umfasst Folgendes:

  • Adobe After Effects-Projektdatei der Animation.
  • Finale exportierte AVD-XML-Datei.
  • Beispiel-GIF der Animation.

Wenn Sie diese Dateien herunterladen, stimmen Sie den Google-Nutzungsbedingungen zu.

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

Ladebildschirm in deiner App anpassen

Wenn windowBackground eine einzelne Farbe ist, verwendet SplashScreen standardmäßig die windowBackground Ihres Designs. Fügen Sie dem App-Design Attribute hinzu, um den Ladebildschirm anzupassen.

Sie haben folgende Möglichkeiten, den Ladebildschirm Ihrer App anzupassen:

  • Sie können Designattribute festlegen, um deren Darstellung zu ändern.

  • Lass es für einen längeren Zeitraum sichtbar.

  • Passen Sie die Animation für das Schließen des Ladebildschirms an.

Jetzt starten

Die zentrale SplashScreen-Bibliothek sorgt dafür, dass der Android 12-Ladebildschirm ab API 23 auf allen Geräten verfügbar ist. Fügen Sie das folgende Snippet in die Datei build.gradle ein, um es Ihrem Projekt hinzuzufügen:

Cool

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

Kotlin

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

Design für den Ladebildschirm festlegen, um dessen Darstellung zu ändern

Du kannst die folgenden Attribute im Activity-Design angeben, um den Ladebildschirm für deine App anzupassen. Wenn du bereits eine Legacy-Ladebildschirmimplementierung hast, die Attribute wie android:windowBackground verwendet, kannst du eine alternative Ressourcendatei für Android 12 und höher bereitstellen.

  1. Verwenden Sie windowSplashScreenBackground, um den Hintergrund mit einer bestimmten Farbe zu füllen:

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

  2. Mit windowSplashScreenAnimatedIcon können Sie das Symbol in der Mitte des Startfensters ersetzen.

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

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

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

  3. Mit windowSplashScreenAnimationDuration können Sie die Dauer der Animation des Ladebildschirmsymbols angeben. Diese Einstellung hat keine Auswirkungen auf die tatsächliche Zeit, in der der Ladebildschirm angezeigt wird. Sie können ihn aber abrufen, wenn Sie die Animation zum Beenden des Ladebildschirms mit SplashScreenView.getIconAnimationDuration anpassen. Weitere Informationen finden Sie im folgenden Abschnitt zum Behalten des Ladebildschirms über einen längeren Zeitraum.

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

  4. Mit windowSplashScreenIconBackgroundColor können Sie einen Hintergrund hinter dem Ladebildschirmsymbol festlegen. Dies ist nützlich, wenn der Kontrast zwischen dem Fensterhintergrund und dem Symbol nicht ausreicht.

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

  5. Mit windowSplashScreenBrandingImage kannst du festlegen, dass ein Bild unten auf dem Ladebildschirm angezeigt wird. In den Designrichtlinien wird jedoch davon abgeraten, ein Markenbild zu verwenden.

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

  6. Mit windowSplashScreenBehavior kannst du festlegen, ob in deiner App unter Android 13 und höher das Symbol immer auf dem Ladebildschirm angezeigt werden soll. Der Standardwert ist 0. Dadurch wird das Symbol auf dem Ladebildschirm angezeigt, wenn splashScreenStyle durch die Startaktivität auf SPLASH_SCREEN_STYLE_ICON gesetzt wird, oder folgt dem Systemverhalten, wenn in der Startaktivität kein Stil angegeben ist. Wenn nie ein leerer Ladebildschirm und immer das animierte Symbol angezeigt werden soll, legen Sie diesen Wert auf icon_preferred fest.

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

Ladebildschirm über einen längeren Zeitraum anzeigen lassen

Der Ladebildschirm wird geschlossen, sobald Ihre App den ersten Frame gezeichnet hat. Wenn Sie eine geringe Datenmenge laden müssen, z. B. das asynchrone Laden der App-Einstellungen von einem lokalen Laufwerk, können Sie ViewTreeObserver.OnPreDrawListener verwenden, um die App zum Zeichnen des ersten Frames zu beenden.

Wenn Ihre Startaktivität vor dem Zeichnen beendet wird, z. B. weil die Inhaltsansicht nicht festgelegt und vor onResume abgeschlossen wird, wird der Pre-Draw-Listener nicht benötigt.

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

Animation zum Schließen des Ladebildschirms anpassen

Mit Activity.getSplashScreen() können Sie die Animation des Ladebildschirms weiter anpassen.

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

Zu Beginn dieses Callbacks wird das animierte Vektor-Drawable auf dem Begrüßungsbildschirm gestartet. Je nach Dauer des App-Starts kann sich die Zeichnung in der Mitte der Animation befinden. Mit SplashScreenView.getIconAnimationStart sehen Sie, wann die Animation gestartet wurde. Die verbleibende Dauer der Symbolanimation lässt sich so berechnen:

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

Zusätzliche Ressourcen