Benutzeroberfläche anpassen

Sebastian Benz

Ein Vorteil von benutzerdefinierten Tabs ist, dass sie sich nahtlos in Ihre App integrieren lassen. In diesem Teil des Leitfadens zu benutzerdefinierten Tabs erfährst du, wie du das Aussehen und Verhalten eines benutzerdefinierten Tabs an deine App anpassen kannst.

Farbe der Symbolleiste festlegen

<ph type="x-smartling-placeholder">
</ph> Benutzerdefinierter Tab mit benutzerdefiniertem hellem Farbschema <ph type="x-smartling-placeholder">
</ph> Heller Modus
<ph type="x-smartling-placeholder">
</ph> Benutzerdefinierter Tab mit benutzerdefiniertem dunklem Farbschema <ph type="x-smartling-placeholder">
</ph> Dunkler Modus

Passen Sie zunächst die Adressleiste des benutzerdefinierten Tabs an, damit sie zum Design Ihrer App passt. Im Snippet unten wird durch Aufrufen von setDefaultColorSchemeParams() die Standardfarbe der Symbolleiste 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 Animation zum Ein- und Ausblenden konfigurieren

Als Nächstes kannst du das Starten (und Verlassen) eines benutzerdefinierten Tabs in deiner App reibungsloser gestalten, indem du benutzerdefinierte Start- und Beenden-Animationen mit setStartAnimation und setExitAnimation definierst:

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, AppBar automatisch ausblenden und benutzerdefiniertes Symbol zum Schließen

Es gibt noch einige weitere Möglichkeiten, die Benutzeroberfläche eines benutzerdefinierten Tabs an Ihre Anforderungen anzupassen.

  • Blenden Sie die URL-Leiste beim Scrollen aus, um dem Nutzer mehr Platz zum Erkunden von Webinhalten mit setUrlBarHidingEnabled()(true) zu geben.
  • Zeigen Sie den Dokumenttitel anstelle der URL über setShowTitle()(true) an.
  • Passen Sie die Schließen-Schaltfläche an den User Flow in Ihrer App an, indem Sie beispielsweise einen Zurück-Pfeil anstelle des Standardsymbols X anzeigen: setCloseButtonIcon()(myCustomCloseIcon).

Alle diese Optionen sind optional, können jedoch die Nutzerfreundlichkeit 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

Du kannst deine App beim Starten des benutzerdefinierten Tabs als Referrer-URL festlegen. So können Sie Websites mitteilen, woher ihre Zugriffe stammen.

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

Nächster Schritt: Informationen zum Hinzufügen einer benutzerdefinierten Aktion zu einem benutzerdefinierten Tab