Benutzeroberfläche anpassen

Sebastian Benz

Benutzerdefinierte Tabs haben den Vorteil, dass sie sich nahtlos in Ihre App einbinden lassen. In diesem Teil des Leitfadens zu benutzerdefinierten Tabs erfahren Sie, wie Sie das Erscheinungsbild und das Verhalten eines benutzerdefinierten Tabs an Ihre App anpassen.

Farbe der Symbolleiste festlegen

Heller Modus

Dunkler Modus

Passen Sie zunächst die Adressleiste des benutzerdefinierten Tabs an das Design Ihrer App an. Mit dem folgenden Snippet wird die Standardfarbe der Symbolleiste durch Aufrufen von setDefaultColorSchemeParams() geändert. Wenn Ihre App auch ein dunkles Farbschema unterstützt, legen Sie es über .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) fest.

// get the current toolbar background color (this might work differently in your app)
@ColorInt int colorPrimaryLight = ContextCompat.getColor(MainActivity.this, R.color.md_theme_light_primary);
@ColorInt int colorPrimaryDark = ContextCompat.getColor(MainActivity.this, R.color.md_theme_dark_primary);

CustomTabsIntent intent = new CustomTabsIntent.Builder()
        // set the default color scheme
        .setDefaultColorSchemeParams(new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryLight)
                .build())
        // set the alternative dark color scheme
        .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, new CustomTabColorSchemeParams.Builder()
                .setToolbarColor(colorPrimaryDark)
                .build())
        .build();

Die Symbolleiste verfügt jetzt über benutzerdefinierte Hintergrund- und Vordergrundfarben.

Wichtiger Hinweis:Beim Protokoll für den benutzerdefinierten Tab kann die Farbe der Statusleiste nicht geändert werden.

Benutzerdefinierte Eingabe- und Exit-Animation konfigurieren

Als Nächstes können Sie das Starten und Verlassen eines benutzerdefinierten Tabs in Ihrer App nahtloser gestalten, indem Sie mit setStartAnimation und setExitAnimation benutzerdefinierte Start- und Exit-Animationen definieren:

CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setStartAnimations(MainActivity.this, R.anim.slide_in_right, R.anim.slide_out_left)
.setExitAnimations(MainActivity.this, android.R.anim.slide_in_left, android.R.anim.slide_out_right)
.build();

Weitere Anpassungen: Titel, automatisches Ausblenden der AppBar und benutzerdefiniertes Symbol zum Schließen

Es gibt noch weitere Möglichkeiten, wie Sie die Benutzeroberfläche eines benutzerdefinierten Tabs an Ihre Anforderungen anpassen können.

• URL-Leiste beim Scrollen ausblenden, damit Nutzer mehr Platz zum Erkunden von Webinhalten mit setUrlBarHidingEnabled()(true) haben.
• Über setShowTitle()(true) wird der Titel des Dokuments anstelle der URL angezeigt.
• Passe die Schließen-Schaltfläche an den User Flow in deiner App an, z. B. indem du einen Zurück-Pfeil anstelle des Standard-X-Symbols verwendest: setCloseButtonIcon()(myCustomCloseIcon).

Diese sind alle optional, können aber die Nutzung des benutzerdefinierten Tabs in Ihrer App verbessern.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Benutzerdefinierte Referrer-URL festlegen

Sie können Ihre App beim Starten des benutzerdefinierten Tabs als Referrer-URL festlegen. So können Websites wissen, woher ihre Zugriffe stammen.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

Als Nächstes erfahren Sie, wie Sie auf dem benutzerdefinierten Tab eine benutzerdefinierte Aktion hinzufügen.