Personnaliser l'interface utilisateur

Sebastian Benz

L'un des avantages des onglets personnalisés est qu'ils peuvent être facilement intégrés à votre application. Dans cette partie du guide, vous allez apprendre à 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

Mode clair

Mode sombre

Tout d'abord, personnalisez 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();

La barre d'outils propose désormais des couleurs personnalisées pour l'arrière-plan et le premier plan.

Important:Le protocole Onglet personnalisé ne permet pas de modifier la couleur de la barre d'état.

Configurer une animation d'entrée et de sortie personnalisée

Vous pouvez ensuite faciliter le lancement (et la fermeture) 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, masquage automatique de l'AppBar et icône de fermeture personnalisée

Vous pouvez effectuer d'autres opérations pour adapter l'interface utilisateur d'un onglet personnalisé à vos besoins.

• Masque la barre d'adresse lors du défilement afin de donner 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 en fonction du flux utilisateur de votre application, par exemple en affichant une flèche de retour au lieu de l'icône X par défaut): setCloseButtonIcon()(myCustomCloseIcon).

Ces informations sont facultatives, mais elles peuvent améliorer l'expérience 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 l'onglet personnalisé. De cette façon, vous pouvez indiquer 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()));

Dans la section suivante, découvrez comment ajouter une action personnalisée à votre onglet personnalisé.