Personnaliser l'UI

Sebastian Benz

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 soit cohérente avec le 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 actions 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).
• Afficher le titre du document au lieu de l'URL via setShowTitle()(true).
• Personnalisez le bouton de fermeture pour qu'il corresponde au parcours utilisateur dans votre application (par exemple, en affichant une flèche de retour au lieu de l'icône X par défaut): 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 un référent personnalisé

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é.