Ladebildschirme

Ab Android 12 können Apps mit der SplashScreen API mit einer Animation gestartet werden. Dazu gehören eine In-App-Bewegung beim Start, ein Startbildschirm mit Ihrem App-Symbol und ein Übergang zur App selbst. 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 den SplashScreen compat-Bibliothek, die die SplashScreen API umschließt.

So funktioniert der Ladebildschirm

Wenn ein Nutzer eine App startet, während der App-Prozess nicht ausgeführt wird (ein kaltes start) zurück oder Activity ist nicht erstellt wurde (ein Warmstart), der folgende Ereignisse auftreten:

  1. Das System zeigt den Begrüßungsbildschirm mit den von Ihnen definierten Themen und 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 Ladebildschirms werden durch XML-Ressourcendateien in der Android-Manifestdatei Für jedes Element gibt es Versionen für den hellen und den dunklen Modus.

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

Ein Bild, das die Elemente eines Splash-Screens zeigt
Abbildung 2: Anpassbare Elemente für einen Splash Bildschirm.

Sehen Sie sich die folgenden Elemente in Abbildung 2 an:

1 Das App-Symbol muss ein Vektor-Drawable sein. Es statisch oder animiert sein. Animationen können eine unbegrenzte Dauer haben, sollten 1.000 Millisekunden nicht überschritten werden. Das Launcher-Symbol ist die Standardeinstellung.

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

3 Wie bei adaptiven Symbolen wird ein Drittel der Vordergrund wird maskiert.

4 Der Fensterhintergrund besteht aus einem deckende Farbe. Wenn der Fensterhintergrund festgelegt und eine einfarbige Farbe ist, wird er verwendet. wenn das Attribut nicht festgelegt ist.

Abmessungen des Startbildschirms

Für das Ladebildschirmsymbol gelten dieselben Spezifikationen wie für adaptive Symbole, wie folgt:

  • 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: Dieses muss 288 × 288 dp groß sein und in Kreis mit einem Durchmesser von 192 dp.

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 unterschiedlichen Symbolabmessungen für einen einfarbigen 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 Startbildschirm wirkt ansprechend und sorgt für ein hochwertigeres Erscheinungsbild. Nutzerstudien zeigen, dass die wahrgenommene Startzeit kürzer ist, wenn eine Animation zu sehen 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: Startabfolge.

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

  2. Ladebildschirm (wird im Abschnitt „Warten“ der Sequenz angezeigt): der Begrüßungsbildschirm kann angepasst werden, sodass Sie Ihre eigene Logoanimation und Branding. Es muss die auf dieser Seite beschriebenen Anforderungen erfüllen, um ordnungsgemäß zu funktionieren.

  3. Beendigungsanimation: Dies ist die Animation, durch die der Ladebildschirm ausgeblendet wird. Wenn du es anpassen möchtest, verwende das SplashScreenView und die zugehörigen . Sie können jede beliebige Animation darauf ausführen und die Einstellungen Deckkraft und Farbe. Entfernen Sie in diesem Fall den Ladebildschirm manuell, die Animation abgeschlossen ist.

Beim Starten der Symbolanimation haben Sie beim Start der App die Möglichkeit, die 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 Nutzende verwirrend sein einen Eindruck von Unvorhersehbarkeit oder Manipulation zu vermitteln.

Anforderungen an Animationen auf dem Ladebildschirm

Ihr Splashscreen muss den folgenden Spezifikationen entsprechen:

  • Legen Sie eine Hintergrundfarbe für ein einzelnes Fenster ohne Transparenz fest. Tag und Nacht werden vom Typ SplashScreen-kompatible Bibliothek.

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

    • Format:Das Symbol muss ein Animierte VektorDrawable (AVD) XML.
    • Abmessungen:Ein AVD-Symbol muss viermal so groß wie ein adaptives Symbol sein. wie folgt an:
      • 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 einen Wert von 1.000 ms nicht zu überschreiten. Sie können einen verzögerten Start verwenden, der jedoch nicht länger als 166 ms dauern darf. Wenn der App-Start länger als 1.000 ms dauert, sollten Sie eine Loop-Animation verwenden.

  • Legen Sie einen geeigneten Zeitpunkt fest, um den Ladebildschirm zu schließen. wird der erste Frame Ihrer App gezeichnet. Sie können dies wie beschrieben im Abschnitt über den Ladebildschirm über einen längeren Zeitraum angezeigt werden lassen.

Ressourcen für den Ladebildschirm

Abbildung 5: Beispiel-AVD.

Laden Sie die Beispiel-Starterkit Dort wird gezeigt, wie Animationen erstellt, formatiert und in eine AVD exportiert werden. Dazu gehören:

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

Wenn Sie diese Dateien herunterladen, stimmen Sie Folgendem zu: Google-Nutzungsbedingungen:

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

Ladebildschirm in deiner App anpassen

Standardmäßig verwendet SplashScreen den windowBackground Ihres Designs, wenn windowBackground ist einfarbig. Wenn Sie den Begrüßungsbildschirm anpassen möchten, fügen Sie dem App-Design Attribute hinzu.

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

  • Legen Sie Designattribute fest, 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.

Erste Schritte

Die SplashScreen-Hauptbibliothek bringt den Android 12-Ladebildschirm für alle API 23 an. Fügen Sie der Datei build.gradle das folgende Snippet hinzu, um die Funktion Ihrem Projekt hinzuzufügen:

Cool

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

Kotlin

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

Ein Design für den Ladebildschirm festlegen, um sein Erscheinungsbild 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 für Apps, die nur auf Android 12 (API-Level 32) ausgerichtet sind, so vor:

    Wenn das Objekt animiert und über AnimationDrawable und AnimatedVectorDrawable gezeichnet werden kann, legen Sie windowSplashScreenAnimationDuration so 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. Festlegen hat keinen Einfluss auf die tatsächliche Dauer des Ladebildschirms. angezeigt, aber Sie können sie beim Anpassen des Begrüßungsbildschirm-Exits abrufen. Animation mit SplashScreenView.getIconAnimationDuration 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. Sie können windowSplashScreenBrandingImage um ein Bild unten auf dem Ladebildschirm anzuzeigen. 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, d. h., das Symbol wird auf Der Ladebildschirm, wenn die Startaktivität den splashScreenStyle auf SPLASH_SCREEN_STYLE_ICON, oder dem Systemverhalten folgt, wenn bei der Startaktivität keine Stil. Wenn Sie nie einen leeren Ladebildschirm anzeigen möchten, das animierte Symbol, das angezeigt werden soll, auf den Wert icon_preferred.

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

Startbildschirm länger auf dem Display anzeigen

Der Ladebildschirm wird geschlossen, sobald Ihre App den ersten Frame gezeichnet hat. Wenn Sie eine geringe Datenmenge laden müssen, z. B. das Laden von In-App-Einstellungen von einem asynchron lokale Laufwerke speichern, können Sie ViewTreeObserver.OnPreDrawListener um die App anzuhalten und ihren ersten Frame zu zeichnen.

Wenn Ihre Startaktivität vor dem Zeichnen beendet ist, beispielsweise Inhaltsansicht festlegen und vor dem onResume-Vorgang (Pre-draw) abschließen Listener wird 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 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 oder Drawable-Elementen in der Mitte der Animation sein. 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