En esta guía, se explica cómo agregar interactividad personalizada a las pestañas personalizadas.
Habilita la acción predeterminada para compartir
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);
Agrega un botón de acción personalizado
Para 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 alto y 24-48 dp de ancho.
Por ejemplo, puedes agregar una acción personalizada de compartir a la barra de herramientas. Para ello, crea un BroadcastReceiver al que se 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 del intent la URL que se muestra 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 del menú se insertarán entre la fila del ícono y los elementos proporcionados por el navegador. (consulte 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ó 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 en la esquina superior derecha:
Para agregar un elemento de menú, llama a CustomTabsIntent.Builder.addMenuItem() con título y PendingIntent. Cuando el usuario presione un elemento de menú, el navegador activará el 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 Cerrar
Para adaptar mejor una pestaña personalizada al flujo de tu aplicación, personaliza el botón Cerrar. Si quieres que el usuario sienta que Pestañas personalizadas es un diálogo modal, usa el botón “X” predeterminado. Si deseas 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.
Si pasas un objeto RemoteViews a CustomTabIntent.Builder.setSecondaryToolbarViews(), la barra de herramientas inferior se puede personalizar por completo y se puede 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();
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 información para acelerar la carga de contenido web en una pestaña personalizada.