Ladebildschirme

Wichtig: Wenn du in Android 11 oder niedriger einen benutzerdefinierten Splash Screen implementiert hast, migriere deine App zur SplashScreen API, damit sie in Android 12 und höher korrekt angezeigt wird. Eine Anleitung dazu finden Sie unter Vorhandene Splash Screen-Implementierung zu Android 12 migrieren.

Ab Android 12 können Apps mit der SplashScreen API mit einer Animation gestartet werden, einschließlich einer Bewegung in die App beim Start, einem Ladebildschirm mit Ihrem App-Symbol und einem Übergang zur App selbst. Eine SplashScreen ist ein Window und deckt daher eine 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.

Zusätzlich zur SplashScreen-Plattform-API können Sie auch die Kompatibilitätsbibliothek SplashScreen verwenden, die die SplashScreen-API umschließt.

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 Versionen für den hellen und den dunklen Modus.

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

Abbildung 2. Anpassbare Elemente eines Ladebildschirms.

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

1 Das App-Symbol muss ein Vektor-Drawable sein. Sie können 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 dessen Hintergrund angezeigt, wenn 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 Ladebildschirms

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

Abbildung 3. Abmessungen des Splash-Screen-Symbols für einfarbige und transparente Hintergründe.

Ladebildschirm-Animationen und die Startsequenz

Das Starten einer App per Kaltstart ist oft mit zusätzlicher Latenz verbunden. Das Hinzufügen eines animierten Symbols zu deinem 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.

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. Es muss die auf dieser Seite beschriebenen Anforderungen erfüllen, um ordnungsgemäß zu funktionieren.

3. Ausgangsanimation: Diese Animation blendet den Splash Screen aus. Wenn Sie die Anzeige anpassen möchten, verwenden Sie die SplashScreenView 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 ü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 aus visueller Sicht 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 einzelne Fensterhintergrundfarbe 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 viermal so groß wie der Bereich von 108 dp eines unmaskierten 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 Ladebildschirms fest. Dies geschieht, wenn deine App den ersten Frame zeichnet. Du kannst dies weiter anpassen, wie im Abschnitt Splash Screen länger auf dem Bildschirm anzeigen beschrieben.

Ressourcen für den Ladebildschirm

Abbildung 5. Beispiel-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.

• Animation zum Schließen des Splash Screens anpassen

Jetzt starten

Die Core-SplashScreen-Bibliothek stellt den Android 12-Splash-Screen für alle Geräte ab API 23 bereit. Wenn Sie es Ihrem Projekt hinzufügen möchten, fügen Sie Ihrer build.gradle-Datei das folgende Snippet hinzu:

Groovy

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

Kotlin

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

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

Du kannst die folgenden Attribute in deinem Activity-Design angeben, um den Splash Screen für deine App anzupassen. Wenn du bereits eine alte Splash Screen-Implementierung hast, die Attribute wie android:windowBackground verwendet, solltest 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. 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 Ladebildschirmsymbols 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 SplashScreenView.getIconAnimationDuration 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 nützlich, 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 können Sie festlegen, ob Ihre 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 anzeigen und immer das animierte Symbol anzeigen möchten, setzen Sie diesen Wert auf icon_preferred.

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

Ladebildschirm länger auf dem Bildschirm anzeigen

Der Splash Screen wird geschlossen, sobald die App den ersten Frame darstellt. Wenn Sie eine kleine Datenmenge laden müssen, z. B. In-App-Einstellungen von einem lokalen Laufwerk asynchron laden, können Sie ViewTreeObserver.OnPreDrawListener verwenden, um die App zu sperren, damit sie den ersten Frame zeichnet.

Wenn die Startaktivität vor dem Zeichnen abgeschlossen wird, z. B. weil die Inhaltsansicht nicht festgelegt und die Aktivität vor onResume beendet wird, ist der Pre-Draw-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 Splash Screens anpassen

Sie können die Animation des Splash Screens über Activity.getSplashScreen() 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 Splash Screen gestartet. Je nach Dauer des App-Starts befindet sich das Drawable möglicherweise mitten in der Animation. Verwenden Sie SplashScreenView.getIconAnimationStart, um zu erfahren, 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

• Vorhandene Splash Screen-Implementierung zu Android 12 und höher migrieren
• Now in Android-App, die eine reale Implementierung eines Ladebildschirms zeigt