L'un des avantages des onglets personnalisés est qu'ils peuvent être intégrés facilement à votre application. Dans cette partie du guide des onglets personnalisés, vous allez découvrir comment modifier l'apparence et le comportement d'un onglet personnalisé pour qu'il corresponde à votre application.
Définir la couleur de la barre d'outils
Commencez par personnaliser la barre d'adresse de l'onglet personnalisé pour qu'elle corresponde au thème de votre application. L'extrait de code ci-dessous modifie la couleur par défaut de la barre d'outils en appelant setDefaultColorSchemeParams(). Si votre application est également compatible avec un jeu de couleurs sombres, définissez-le via .setColorSchemeParams(CustomTabsIntent.COLOR_SCHEME_DARK, …).
// 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();
La barre d'outils dispose désormais de couleurs d'arrière-plan et de premier plan personnalisées.
Configurer une animation d'entrée et de sortie personnalisée
Vous pouvez ensuite rendre le lancement (et la fermeture) d'une expérience d'onglet personnalisé dans votre application plus fluide en définissant des animations de démarrage et de sortie personnalisées à l'aide de setStartAnimation et setExitAnimation:
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();
Autres personnalisations: titre, barre d'application masquée automatiquement et icône de fermeture personnalisée
Vous pouvez effectuer quelques autres opérations pour adapter l'interface utilisateur d'un onglet personnalisé à vos besoins.
- Masquer la barre d'URL lors du défilement pour laisser plus d'espace à l'utilisateur pour explorer le contenu Web à l'aide de
setUrlBarHidingEnabled()(true). - Affichez le titre du document au lieu de l'URL via
setShowTitle()(true). - Personnalisez le bouton de fermeture pour l'adapter au flux utilisateur de votre application, par exemple en affichant une flèche de retour au lieu de l'icône par défaut
X):setCloseButtonIcon()(myCustomCloseIcon).
Ces éléments sont tous facultatifs, mais ils peuvent améliorer l'expérience dans l'onglet personnalisé de votre application.
Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setUrlBarHidingEnabled(true)
.setShowTitle(true)
.setCloseButtonIcon(toBitmap(myCustomCloseIcon))
.build();
Définir une URL de provenance personnalisée
Vous pouvez définir votre application comme site référent lorsque vous lancez votre onglet personnalisé. Vous pouvez ainsi indiquer aux sites Web d'où vient leur trafic.
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
Découvrez ensuite comment ajouter une action personnalisée à votre onglet personnalisé.