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
![Benutzerdefinierter Tab mit benutzerdefiniertem hellen Farbschema](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-ligh-a25471aaa0cb9.png?authuser=6&hl=de)
![Benutzerdefinierter Tab mit benutzerdefiniertem dunklem Farbschema](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-dark-4673c50a2cf6c.png?authuser=6&hl=de)
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.
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.