Startbildschirme

Ab Android 12 können Sie mit der SplashScreen API Apps mit einer Animation starten. Dazu gehören eine In-App-Bewegung beim Start, ein Splash Screen mit Ihrem App-Symbol und ein Übergang zur eigentlichen App. Ein SplashScreen ist ein Window und deckt daher einen Activity ab.

Abbildung 1. Ein Ladebildschirm.

Der Begrüßungsbildschirm enthält Standarddesignelemente, die bei jedem App-Start angezeigt werden. Er kann jedoch auch angepasst werden, damit Ihre App ihr individuelles Branding beibehält.

Neben der SplashScreen-Plattform-API können Sie auch die SplashScreen-Kompatibilitätsbibliothek verwenden, die die SplashScreen-API umschließt.

So funktioniert der Startbildschirm

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

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

  2. Sobald die App bereit ist, wird der Begrüßungsbildschirm geschlossen und die App wird angezeigt.

Der Startbildschirm wird bei einem Hotstart nie angezeigt.

Elemente und Funktionen des Startbildschirms

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

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

Ein Bild, das die Elemente eines Splash-Screens zeigt
Abbildung 2. Anpassbare Elemente eines Ladebildschirms.

Sehen Sie sich die folgenden Elemente in Abbildung 2 an:

1 Das App-Symbol muss ein Vektor-Drawable sein. Sie kann statisch oder animiert sein. Animationsdauern können zwar unbegrenzt 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 einen stärkeren Kontrast zwischen dem Symbol und dem Fensterhintergrund benötigen. Wenn Sie ein adaptives Symbol verwenden, wird der Hintergrund angezeigt, wenn er einen ausreichenden Kontrast zum Fensterhintergrund aufweist.

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

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

Abmessungen des Startbildschirms

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

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

Wenn die volle Größ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 ausgeblendet (maskiert).

Ein Bild mit verschiedenen Symbolabmessungen für Vollton- und transparenten Hintergrund
Abbildung 3. Abmessungen des Ladebildschirmsymbols für Vollton- und transparente Hintergründe.

Ladebildschirmanimationen und Startsequenz

Beim Starten einer App nach einem Kaltstart kommt es oft zu zusätzlicher Latenz. Ein animiertes Symbol auf dem Begrüßungsbildschirm wirkt ansprechend und sorgt für ein hochwertigeres Erscheinungsbild. Nutzerstudien zeigen, dass die wahrgenommene Startzeit beim Ansehen einer Animation kürzer ist.

Eine Ladebildschirmanimation ist in die Komponenten der Startsequenz eingebettet, wie in Abbildung 4 dargestellt.

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

  1. Einblendungsanimation: Diese besteht aus der Systemansicht bis zum Startbildschirm. Sie wird vom System gesteuert und kann nicht angepasst werden.

  2. Startbildschirm (wird während des Warteteils der Sequenz angezeigt): Der Startbildschirm kann angepasst werden, sodass Sie Ihre eigene Logoanimation und Ihr eigenes Branding einfügen können. 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 ihn anpassen möchten, verwenden Sie das Symbol SplashScreenView. Sie können jede beliebige Animation mit Einstellungen für Umwandlung, Deckkraft und Farbe ausführen. Entfernen Sie in diesem Fall den Splashscreen manuell, wenn die Animation beendet ist.

Wenn Sie die Symbolanimation ausführen, können Sie beim App-Start die Sequenz überspringen, wenn die App früher bereit ist. Die App löst onResume() aus oder der Begrüßungsbildschirm läuft automatisch ab. Achten Sie also darauf, dass die Animation bequem übersprungen werden kann. Der Ladebildschirm darf nur mit onResume() geschlossen werden, wenn die App visuell stabil ist. Es sind also keine zusätzlichen Ladesymbole erforderlich. Eine unvollständige Benutzeroberfläche kann für Nutzer irritierend sein und den Eindruck von Unvorhersehbarkeit oder mangelnder Perfektion erwecken.

Anforderungen an die Ladebildschirmanimation

Ihr Splashscreen muss den folgenden Spezifikationen entsprechen:

  • Legen Sie eine Hintergrundfarbe für ein einzelnes 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 ein AnimatedVectorDrawable (AVD)-XML-Objekt sein.
    • Abmessungen:Ein AVD-Symbol muss viermal so groß wie ein adaptives Symbol sein:
      • Der Symbolbereich muss 432 dp betragen, also viermal so groß wie der Bereich von 108 dp eines nicht maskierten adaptiven Symbols.
      • Die inneren zwei Drittel des Bildes sind im Launcher-Symbol sichtbar und müssen 288 dp groß sein, also viermal so groß wie die 72 dp, aus denen der innere maskierte Bereich eines adaptiven Symbols besteht.
    • 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, zu dem der Ladebildschirm geschlossen werden soll. Dies geschieht, wenn Ihre App den ersten Frame zeichnet. Sie können dies wie im Abschnitt Startbildschirm länger auf dem Bildschirm anzeigen lassen beschrieben anpassen.

Ressourcen für den Ladebildschirm

Abbildung 5 Beispiel-AVD.

Lade das Beispiel-Starterkit herunter. Darin wird gezeigt, wie du eine Animation erstellst, formatierst und in eine AVD exportierst. Dazu gehören:

  • Adobe After Effects-Projektdatei der Animation.
  • Die endgültig 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.

Begrüßungsbildschirm in Ihrer App anpassen

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

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

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

  • Lassen Sie das Bild länger auf dem Bildschirm.

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

Erste Schritte

Die SplashScreen-Kernbibliothek bietet den Android 12-Startbildschirm auf allen Geräten ab API 23. Fügen Sie der Datei build.gradle das folgende Snippet hinzu, um die Funktion Ihrem Projekt hinzuzufügen:

Groovy

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

Sie können die folgenden Attribute in Ihrem Activity-Design festlegen, um den Ladebildschirm für Ihre App anzupassen. Wenn Sie bereits eine ältere Ladebildschirmimplementierung 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.

    Gehen Sie so vor, wenn Ihre App nur auf Android 12 (API-Level 32) ausgerichtet ist:

    Wenn das Objekt animiert und über AnimationDrawable und AnimatedVectorDrawable gezeichnet werden kann, legen Sie mit windowSplashScreenAnimationDuration fest, dass die Animation abgespielt wird, während das Startfenster angezeigt wird. Unter Android 13 ist das nicht erforderlich, da die Dauer direkt aus der AnimatedVectorDrawable abgeleitet wird.

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

  3. Verwenden Sie windowSplashScreenAnimationDuration, um die Dauer der Ladebildschirmsymbolanimation anzugeben. 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 längeren Einblenden des Begrüßungsbildschirms.

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

  4. Verwenden Sie windowSplashScreenIconBackgroundColor, um einen Hintergrund hinter dem Symbol für den Startbildschirm 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 Begrüßungsbildschirm angezeigt werden soll. Gemäß den Designrichtlinien wird jedoch davon abgeraten, ein Branding-Bild zu verwenden.

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

  6. Mit windowSplashScreenBehavior können Sie angeben, ob das Symbol Ihrer App unter Android 13 und höher immer auf dem Ladebildschirm angezeigt werden soll. Der Standardwert ist „0“. In diesem Fall wird das Symbol auf dem Begrüßungsbildschirm angezeigt, wenn die splashScreenStyle in der Aktivität zum Starten auf SPLASH_SCREEN_STYLE_ICON festgelegt ist. Andernfalls wird das Systemverhalten verwendet, wenn in der Aktivität zum Starten kein Stil angegeben ist. Wenn Sie nie einen leeren Splashscreen anzeigen und immer das animierte Symbol sehen möchten, legen Sie hier den Wert icon_preferred fest.

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

Startbildschirm länger auf dem Display anzeigen

Der Ladebildschirm wird geschlossen, sobald Ihre App den ersten Frame anzeigt. Wenn Sie eine kleine Menge an Daten laden müssen, z. B. In-App-Einstellungen asynchron von einem lokalen Laufwerk, können Sie die App mit ViewTreeObserver.OnPreDrawListener pausieren, um den ersten Frame zu zeichnen.

Wenn die Startaktivität vor dem Zeichnen beendet wird, z. B. weil die Inhaltsansicht nicht festgelegt wurde und die Aktivität vor onResume beendet wird, ist der PreDraw-Listener nicht erforderlich.

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 Begrüßungsbildschirms anpassen

Mit Activity.getSplashScreen() können Sie die Animation des Startbildschirms 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-Zeichnen auf dem Startbildschirm gestartet. Je nach Dauer des App-Starts befindet sich das drawable möglicherweise in der Mitte der Animation. Mit SplashScreenView.getIconAnimationStart können Sie ermitteln, wann die Animation gestartet wurde. Sie können die verbleibende Dauer der Symbolanimation 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;
}

Weitere Informationen