Benutzeroberfläche anpassen

Sebastian Benz

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

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 verfügt jetzt über benutzerdefinierte Hintergrund- und Vordergrundfarben.

Benutzerdefinierte Animation beim 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, damit Nutzer mehr Platz haben, um Webinhalte mit setUrlBarHidingEnabled()(true) zu erkunden.
• Zeigen Sie den Dokumenttitel anstelle der URL über setShowTitle()(true) an.
• Passe die Schließen-Schaltfläche an den User Flow in deiner App an, indem du beispielsweise statt des Standardsymbols X einen Zurück-Pfeil einblendest: 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