Startbildschirme

Ab Android 12 ermöglicht die SplashScreen API den Start von Apps mit Animation, einschließlich einer In-App-Bewegung beim Start, einem Ladebildschirm mit dem App-Symbol und einem Übergang zur App selbst. Ein SplashScreen ist ein Window und deckt somit ein Activity ab.

Abbildung 1. Ladebildschirm

Der Ladebildschirm bringt bei jedem App-Start Standard-Designelemente. Er lässt sich aber auch so anpassen, dass sein unverwechselbares Branding beibehalten wird.

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

So funktioniert der Ladebildschirm

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

  1. Der Ladebildschirm wird mit Designs und Animationen angezeigt, die Sie selbst festlegen.

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

Der Ladebildschirm wird bei einem Heißstart 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 Ladebildschirm zeigt
Abbildung 2. Anpassbare Elemente eines Ladebildschirms.

Betrachten Sie die folgenden Elemente (siehe Abbildung 2):

1 Das App-Symbol muss ein Vektor-Drawable sein. Sie kann statisch oder animiert sein. Animationen können zwar eine unbegrenzte Dauer haben, wir empfehlen jedoch,1.000 Millisekunden nicht zu überschreiten. Das Launcher-Symbol ist das Standardsymbol.

2 Der Symbolhintergrund ist optional und nützlich, wenn Sie einen größeren Kontrast zwischen dem Symbol und dem Fensterhintergrund benötigen. Wenn Sie ein adaptives Symbol verwenden, wird dessen Hintergrund angezeigt, wenn genug 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 einfarbige Farbe ist, wird er standardmäßig verwendet, wenn das Attribut nicht festgelegt ist.

Abmessungen des Ladebildschirms

Für das Ladebildschirmsymbol gelten dieselben 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 Abmessungen des Symbols für einen einfarbigen und transparenten Hintergrund
Abbildung 3: Abmessungen des Ladebildschirms für einen einfarbigen bzw. transparenten Hintergrund

Animationen auf dem Ladebildschirm und Startsequenz

Zusätzliche Latenz ist oft mit dem Starten einer App bei einem Kaltstart verbunden. Das Hinzufügen eines animierten Symbols zu deinem Ladebildschirm wirkt sich ästhetisch auffälliger aus und erhöht das Premium-Erlebnis. Nutzerstudien zeigen, dass die wahrgenommene Startzeit bei Animationen kürzer ist.

In die Komponenten der Startsequenz ist eine Begrüßungsbildschirmanimation eingebettet (siehe Abbildung 4).

Ein Bild, das die Startsequenz in zwölf aufeinanderfolgenden Frames zeigt. Zuerst wird auf das Launcher-Symbol getippt und das Display wird größer dargestellt.
Abbildung 4: Startsequenz.

  1. Geben Sie eine Animation ein: Sie besteht aus der Systemansicht bis zum Ladebildschirm. Sie wird vom System gesteuert und kann nicht angepasst werden.

  2. Ladebildschirm (erscheint während des „Warten“-Teils der Sequenz): Der Ladebildschirm kann angepasst werden, sodass du deine eigene Logoanimation und dein eigenes Branding einfügen 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, die den Ladebildschirm ausblendet. Wenn Sie sie anpassen möchten, verwenden Sie SplashScreenView und das zugehörige Symbol. Sie können darauf beliebige Animationen mit den Einstellungen für Transformation, Deckkraft und Farbe ausführen. Entfernen Sie in diesem Fall den Ladebildschirm manuell, wenn die Animation fertig ist.

Beim Ausführen der Symbolanimation haben Sie beim App-Start die Möglichkeit, die Sequenz zu überspringen, falls die App bereits früher bereit ist. Die App löst onResume() aus oder der Ladebildschirm schaltet automatisch eine Zeitüberschreitung aus. Achte also darauf, dass sich die Bewegung bequem überspringen lässt. Der Ladebildschirm darf nur dann mit onResume() geschlossen werden, wenn die App optisch stabil ist. Es sind also keine zusätzlichen rotierenden Ladebildschirme erforderlich. Eine unvollständige Benutzeroberfläche kann für Nutzer verstörend wirken und den Eindruck von Unvorhersehbarkeit oder mangelndem Design vermitteln.

Anforderungen an Animationen auf dem Ladebildschirm

Ihr Ladebildschirm muss die folgenden Spezifikationen erfüllen:

  • Sie können eine Hintergrundfarbe für ein einzelnes Fenster ohne Transparenz festlegen. Der Tag- und Nachtmodus wird von der SplashScreen-Compat-Bibliothek unterstützt.

  • Vergewissern Sie sich, dass das animierte Symbol die folgenden Anforderungen erfüllt:

    • Format:Das Symbol muss ein animateVectorDrawable (AVD)-XML-Code sein.
    • Abmessungen:Ein AVD-Symbol muss viermal so groß sein wie ein adaptives Symbol:
      • Der Symbolbereich muss 432 dp haben, also viermal so groß wie die Fläche von 108 dp eines nicht maskierten adaptiven Symbols.
      • Die inneren zwei Drittel des Bildes sind auf dem Launcher-Symbol sichtbar und müssen 288 dp groß sein, d. h. das Vierfache der 72 dp, die den inneren maskierten Bereich eines adaptiven Symbols ausmachen.
    • Dauer:Wir empfehlen,auf Smartphones nicht mehr als 1.000 ms zu verwenden. 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 in Betracht ziehen.

  • Legen Sie einen geeigneten Zeitpunkt für das Schließen des Ladebildschirms fest. Dies geschieht, wenn Ihre App den ersten Frame zeichnet. Dieses können Sie weiter anpassen, wie im Abschnitt Ladebildschirm über längere Zeit auf dem Bildschirm sichtbar halten beschrieben.

Infomaterial für den Ladebildschirm

Abbildung 5: Beispiel für AVD.

Laden Sie das Beispiel-Starterkit herunter, das zeigt, wie Sie eine Animation erstellen, formatieren und in ein 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.

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

Ladebildschirm in der App anpassen

Standardmäßig verwendet SplashScreen den windowBackground Ihres Designs, wenn windowBackground eine einzelne Farbe ist. Füge Attribute zum App-Design hinzu, um den Ladebildschirm anzupassen.

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

  • Legen Sie Designattribute fest, um die Darstellung zu ändern.

  • Lass es länger auf dem Bildschirm zeigen.

  • Hiermit kannst du die Animation für das Schließen des Ladebildschirms anpassen.

Erste Schritte

Die zentrale SplashScreen-Bibliothek überträgt den Ladebildschirm von Android 12 auf alle Geräte ab API 23. Fügen Sie der Datei build.gradle das folgende Snippet hinzu, um sie Ihrem Projekt hinzuzufügen:

Groovig

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 sein Aussehen zu ändern

Du kannst die folgenden Attribute in deinem Activity-Design angeben, um den Ladebildschirm für deine App anzupassen. Wenn du bereits eine ältere Implementierung des Ladebildschirms verwendest, in der Attribute wie android:windowBackground verwendet werden, 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.

    So gehen Sie bei Apps vor, die nur auf Android 12 (API-Level 32) ausgerichtet sind:

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

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

  3. Verwenden Sie windowSplashScreenAnimationDuration, um die Dauer der Symbolanimation des Ladebildschirms 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 dazu, wie Sie den Ladebildschirm länger auf dem Bildschirm anzeigen lassen.

    <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 Fensterhintergrund und Symbol nicht ausreicht.

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

  5. Mit windowSplashScreenBrandingImage können Sie 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 angeben, ob das Symbol in deiner App ab Android 13 immer auf dem Ladebildschirm angezeigt werden soll. Der Standardwert ist 0, d. h., das Symbol wird auf dem Begrüßungsbildschirm angezeigt, wenn die Startaktivität splashScreenStyle auf SPLASH_SCREEN_STYLE_ICON festlegt, oder dem Systemverhalten folgt, wenn in der Startaktivität kein Stil angegeben ist. Wenn nie ein leerer Ladebildschirm angezeigt werden soll und immer das animierte Symbol zu sehen sein soll, legen Sie den Wert icon_preferred fest.

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

Ladebildschirm länger auf dem Bildschirm anzeigen lassen

Der Ladebildschirm wird geschlossen, sobald Ihre App den ersten Frame gezeichnet hat. Wenn Sie eine kleine Datenmenge laden müssen, z. B. um In-App-Einstellungen asynchron von einem lokalen Laufwerk zu laden, können Sie ViewTreeObserver.OnPreDrawListener verwenden, um die Anwendung anzuhalten und ihren ersten Frame zu zeichnen.

Wenn die Startaktivität vor dem Zeichnen abgeschlossen ist, z. B. wenn die Inhaltsansicht nicht festgelegt und der Vorgang vor onResume abgeschlossen wurde, ist der Pre-Dreh-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 für das Schließen des Ladebildschirms anpassen

Die Animation des Ladebildschirms lässt sich ü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 Begrüßungsbildschirm angezeigt. Je nach Dauer des App-Starts kann sich das Drawable in der Mitte der Animation befinden. Mit SplashScreenView.getIconAnimationStart können Sie feststellen, 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;
}

Weitere Informationen