Ce guide explique comment ajouter des éléments interactifs personnalisés aux onglets personnalisés.
Activer l'action de partage par défaut
Si vous ne proposez pas d'action de partage personnalisée, nous vous conseillons d'activer l'action de partage par défaut du navigateur dans le menu à développer. Les utilisateurs pourront ainsi partager plus facilement un lien vers le contenu consulté:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Ajouter un bouton d'action personnalisé
Pour les actions importantes, la barre d'outils de l'onglet personnalisé vous permet d'intégrer un bouton d'action personnalisé, qui peut avoir un libellé ou une icône personnalisée. L'icône doit avoir une hauteur de 24 dp et une largeur de 24 à 48 dp.
Par exemple, vous pouvez ajouter une action de partage personnalisée à la barre d'outils. Pour ce faire, créez un BroadcastReceiver qui est appelé lorsque l'utilisateur clique sur l'action de partage dans l'onglet personnalisé.
Enregistrez BroadCastReceiver dans le fichier AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Ajoutez ensuite une nouvelle classe, ShareBroadcastReceiver. Dans la méthode onReceive(), extrayez l'URL actuellement affichée de l'intent et déclenchez un intent d'envoi.
public class ShareBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, url);
sendIntent.setType("text/plain");
Intent shareIntent = Intent.createChooser(sendIntent, null);
shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(shareIntent);
}
}
Créez maintenant un PendingIntent pour ShareBroadcast et enregistrez-le via setActionButton(). Transmettez l'intent en attente avec l'icône et la description.
String shareDescription = getString(R.string.label_action_share);
Bitmap shareIcon = BitmapFactory.decodeResource(getResources(),
android.R.drawable.ic_menu_share);
// Create a PendingIntent to your BroadCastReceiver implementation
Intent actionIntent = new Intent(
this.getApplicationContext(), ShareBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
//Set the pendingIntent as the action to be performed when the button is clicked.
CustomTabsIntent intentBuilder = new CustomTabsIntent.Builder()
…
.setActionButton(shareIcon, shareDescription, pendingIntent)
.build();
Ajouter des éléments de menu personnalisés
Un onglet personnalisé propose jusqu'à cinq actions par défaut fournies par le navigateur : "Transférer", "Informations sur la page", "Actualiser" et "Rechercher sur la page". et "Ouvrir dans un navigateur". Vous pouvez en ajouter jusqu'à sept de plus. Ces éléments de menu seront insérés entre la ligne d'icône et les éléments fournis par le navigateur. (voir l'image ci-dessous). Le nombre réel dépend de l'implémentation sous-jacente du navigateur. (Par exemple, avec la version 117, Chrome a fait passer le nombre d'éléments de menu de cinq à sept.) Il est donc préférable d'ajouter les éléments les plus importants en premier.
Vous pouvez accéder à vos actions personnalisées via le menu à trois points en haut à droite:
Pour ajouter un élément de menu, appelez CustomTabsIntent.Builder.addMenuItem() avec un titre et un PendingIntent. Lorsque l'utilisateur appuie sur un élément de menu, le navigateur déclenche l'PendingIntent.
CustomTabsIntent intent = new CustomTabsIntent.Builder()
...
.addMenuItem("Menu item 1", pendingIntent)
.addMenuItem("Menu item 2", pendingIntent)
.addMenuItem("Menu item 3", pendingIntent)
.addMenuItem("Menu item 4", pendingIntent)
.addMenuItem("Menu item 5", pendingIntent)
.build();
Personnaliser le bouton de fermeture
Pour mieux intégrer un onglet personnalisé au flux de votre application, personnalisez le bouton de fermeture. Si vous voulez que l'utilisateur ait l'impression que les onglets personnalisés sont une boîte de dialogue modale, utilisez le bouton “X” par défaut. Si vous voulez que l'utilisateur ait l'impression que l'onglet personnalisé fait partie du flux de l'application, utilisez la flèche de retour.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Ajouter une barre d'outils inférieure
La barre d'outils inférieure est un moyen très flexible d'ajouter des fonctionnalités à un onglet personnalisé.
En transmettant un objet RemoteViews à CustomTabIntent.Builder.setSecondaryToolbarViews(), la barre d'outils inférieure peut être entièrement personnalisée et mise à jour de manière dynamique.
Commencez par déclarer une mise en page de barre d'outils en créant un fichier de mise en page, res/layout/custom_tab_toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_next"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Next" />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_previous"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:text="Previous" />
</LinearLayout>
L'étape suivante consiste à enregistrer un BroadcastReceiver, qui gère les interactions de la barre d'outils, dans le fichier AndroidManifest.xml:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Implémentez ensuite BroadcastReceiver, qui gérera toutes les interactions avec la barre d'outils inférieure:
public class BottomToolbarBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
int remoteViewId = intent.getIntExtra(EXTRA_REMOTEVIEWS_CLICKED_ID, -1);
if (remoteViewId == R.id.ct_toolbar_previous) {
// handle previous
} else if (remoteViewId == R.id.ct_toolbar_next) {
// handle next
}
}
}
Enfin, enregistrez la barre d'outils:
// Create the pending intent
Intent actionIntent = new Intent(
this.getApplicationContext(), BottomToolbarBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
// Pass the toolbar layout to the RemoteViews instance
RemoteViews secondaryToolbarViews = new RemoteViews(getPackageName(), R.layout.custom_tab_toolbar);
// All toolbar buttons
int[] clickableIds = {R.id.ct_toolbar_next, R.id.ct_toolbar_previous};
// Register the bottom toolbar when creating a new custom tab intent
CustomTabsIntent intent = new CustomTabsIntent.Builder()
.setSecondaryToolbarViews(secondaryToolbarViews, clickableIds, toolbarPendingIntent)
.build();
Favoris et boutons de téléchargement
Les favoris et les boutons de téléchargement du menu à trois points sont activés par défaut. Pour les désactiver, utilisez le code suivant :
code dans CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
Section suivante: Découvrez comment accélérer le chargement du contenu Web dans un onglet personnalisé.