En esta guía, se explica cómo agregar interactividad personalizada a las pestañas personalizadas.
Habilita la acción de uso compartido predeterminada
Si no proporcionas una acción personalizada para compartir, te recomendamos que habilites la acción predeterminada del navegador en el menú ampliado para que los usuarios puedan compartir más fácilmente un vínculo al contenido que ven:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Cómo agregar un botón de acción personalizado
Para las acciones importantes, la barra de herramientas de la 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 altura y entre 24 y 48 dp de ancho.
Por ejemplo, puedes agregar una acción de compartir personalizada a la barra de herramientas. Para ello, crea un BroadcastReceiver al que se le llame cuando el usuario haga clic en la acción de compartir 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 que proporciona 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 de íconos y los elementos proporcionados por el navegador. (consulta la imagen a continuación). La cantidad real depende de la implementación subyacente del navegador. (por ejemplo, con la versión 117, Chrome aumentó la cantidad de elementos de menú de cinco a siete). Por lo tanto, lo mejor es agregar primero los elementos más importantes.
Puedes acceder a tus acciones personalizadas a través del menú de tres puntos en la esquina superior derecha:
Para agregar un elemento de menú, llama a CustomTabsIntent.Builder.addMenuItem() con el título y un 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 una 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 son 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));
Agrega 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.
Si pasas un objeto RemoteViews a CustomTabIntent.Builder.setSecondaryToolbarViews(), la barra de herramientas inferior se puede personalizar por completo y actualizar 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 se encargará de 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();
Botones de favoritos y descarga
Los botones de favoritos y 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, descubre cómo acelerar la carga de contenido web en una pestaña personalizada.