Benutzeroberfläche anpassen

Sebastian Benz

Ein Vorteil von benutzerdefinierten Tabs ist, dass sie nahtlos in Ihre App eingebunden werden können. In diesem Teil des Leitfadens zu benutzerdefinierten Tabs erfahren Sie, wie Sie das Aussehen und Verhalten eines benutzerdefinierten Tabs an Ihre App anpassen.

Farbe der Symbolleiste festlegen

Passen Sie zuerst die Adressleiste des benutzerdefinierten Tabs an das Design Ihrer App an. Im folgenden Snippet wird die Standardleiste durch Aufrufen von setDefaultColorSchemeParams() geändert. Wenn Ihre App auch ein dunkles Farbschema unterstützt, können Sie es über .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …) festlegen.

// 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 hat jetzt benutzerdefinierte Hintergrund- und Vordergrundfarben.

Benutzerdefinierte Animation beim Ein- und Ausblenden konfigurieren

Als Nächstes können Sie das Starten und Schließen eines benutzerdefinierten Tabs in Ihrer App noch reibungsloser gestalten, indem Sie mit setStartAnimation und setExitAnimation benutzerdefinierte Start- und Ausstiegsanimationen 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, AppBar automatisch ausblenden und benutzerdefiniertes Schließsymbol

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, damit Nutzer mehr Platz haben, um Webinhalte mit setUrlBarHidingEnabled()(true) zu erkunden.
• Über setShowTitle()(true) den Dokumenttitel anstelle der URL anzeigen
• Passen Sie die Schaltfläche „Schließen“ an den Nutzerfluss in Ihrer App an, z. B. indem Sie anstelle des Standardsymbols X einen Rückwärtspfeil anzeigen: setCloseButtonIcon()(myCustomCloseIcon).

Diese Optionen sind 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();

Benutzerdefinierten Verweis einrichten

Sie können Ihre App als Verweisquelle festlegen, wenn Sie den benutzerdefinierten Tab starten. 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: Weitere Informationen zum Hinzufügen einer benutzerdefinierten Aktion zu Ihrem benutzerdefinierten Tab