L'un des avantages des onglets personnalisés est qu'ils peuvent s'intégrer parfaitement à votre application. Dans cette partie du guide "Onglets personnalisés", vous allez apprendre à modifier l'apparence et le comportement d'un onglet personnalisé en fonction de votre application.
Définir la couleur de la barre d'outils
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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 accepte également 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();
Les couleurs d'arrière-plan et de premier plan de la barre d'outils sont désormais personnalisées.
Configurer une animation d'entrée et de sortie personnalisée
Vous pouvez ensuite faciliter le lancement (et la sortie) d'un onglet personnalisé dans votre application en définissant des animations de début 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 également modifier l'interface utilisateur d'un onglet personnalisé en fonction de vos besoins.
- Masquez la barre d'adresse lors du défilement afin de donner à l'utilisateur plus d'espace 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).
Toutes ces options sont facultatives, mais elles peuvent améliorer l'utilisation de l'onglet personnalisé dans 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 URL de provenance lorsque vous lancez votre onglet personnalisé. Vous indiquez ainsi aux sites Web d'où provient leur trafic.
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
À suivre: découvrez comment ajouter une action personnalisée à votre onglet personnalisé.