En esta guía, se explica cómo agregar interactividad personalizada a pestañas personalizadas.
Habilitar la acción predeterminada para compartir
Si no proporcionas una acción personalizada de compartir, es recomendable que habilites la acción predeterminada del navegador en el menú ampliado para que sea más fácil para los usuarios compartir un vínculo al contenido que están viendo:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Agrega un botón de acción personalizado
Para acciones importantes, la barra de herramientas de pestaña personalizada te permite integrar un botón de acción personalizado, que puede tener una etiqueta de texto o un ícono personalizado. El ícono debe tener 24 dp de alto y entre 24 y 48 dp de ancho.
Por ejemplo, puedes agregar una acción personalizada de compartir a la barra de herramientas. Para ello, crea un elemento BroadcastReceiver al que se llame cuando el usuario haga clic en la acción compartida en la pestaña personalizada.
Registra el BroadCastReceiver en el archivo AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Luego, agrega una clase nueva: ShareBroadcastReceiver. En el método onReceive(), extrae la URL que se muestra actualmente del intent y activa un intent de envío.
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);
}
}
Ahora, crea un PendingIntent para ShareBroadcast y regístralo a través de setActionButton(). Pasa el intent pendiente junto con el ícono y la descripción.
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();
Agrega elementos de menú personalizados
Una pestaña personalizada tiene hasta cinco acciones predeterminadas proporcionadas por el navegador: "Reenviar", "Información de la página", "Actualizar", "Buscar en la página" y "Abrir en el navegador". Además, puedes agregar hasta siete más. Estos elementos de menú se insertarán entre la fila del ícono y los elementos proporcionados por el navegador. (consulta la siguiente imagen). La cantidad real depende de la implementación subyacente del navegador. (Por ejemplo, con la versión 117, Chrome aumentó el número de elementos del menú de cinco a siete). Por eso, lo mejor es agregar los elementos más importantes primero.
Puedes acceder a tus acciones personalizadas a través del menú de tres puntos ubicado en la esquina superior derecha:
Para agregar un producto del menú, llama a CustomTabsIntent.Builder.addMenuItem() con un título y una PendingIntent. Cuando el usuario presione un elemento de menú, el navegador activará 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();
Personaliza el botón de cierre
Para que la pestaña personalizada se ajuste mejor al flujo de tu app, personaliza el botón de cierre. Si quieres que el usuario sienta que las pestañas personalizadas es un diálogo modal, usa el botón “X” predeterminado. Si quieres que el usuario sienta que la pestaña personalizada es parte del flujo de la aplicación, usa la flecha hacia atrás.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Cómo agregar una barra de herramientas inferior
La barra de herramientas inferior es una forma muy flexible de agregar más funcionalidad a una pestaña personalizada.
Cuando se pasa un objeto RemoteViews a CustomTabIntent.Builder.setSecondaryToolbarViews(), la barra de herramientas inferior se puede personalizar por completo y actualizarse de forma dinámica.
Primero, declara un diseño de barra de herramientas creando un nuevo archivo de diseño, 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>
El siguiente paso es registrar un BroadcastReceiver, que controla las interacciones de la barra de herramientas, en el archivo AndroidManifest.xml:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Luego, implementa BroadcastReceiver, que controlará todas las interacciones con la barra de herramientas inferior:
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
}
}
}
Por último, registra la barra de herramientas:
// 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();
Favoritos y botones de descarga
Los favoritos y los botones de descarga del menú de tres puntos están habilitados de forma predeterminada. Para inhabilitarlas, usa el siguiente código en CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
A continuación: Obtén más información para acelerar la carga de contenido web en una pestaña personalizada.