Una ventaja de las pestañas personalizadas es que se pueden integrar a la perfección en tu app. En esta parte de la guía Pestañas personalizadas, aprenderás a cambiar la apariencia y el comportamiento de una pestaña personalizada para que coincida con tu app.
Establecer el color de la barra de herramientas
![Pestaña personalizada con un esquema de colores claros personalizado](https://developer.chrome.google.cn/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-ligh-a25471aaa0cb9.png?authuser=0000&hl=es)
![Pestaña personalizada con un esquema de colores oscuros personalizado](https://developer.chrome.google.cn/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-dark-4673c50a2cf6c.png?authuser=0000&hl=es)
Primero, personaliza la barra de direcciones de la pestaña personalizada para que sea coherente con el tema de tu app. En el siguiente fragmento, se llama a setDefaultColorSchemeParams()
para cambiar el color predeterminado de la barra de herramientas. Si la app también admite un esquema de colores oscuros, configúralo mediante .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 barra de herramientas ahora tiene colores personalizados de primer plano y segundo plano.
Cómo configurar una animación personalizada de entrada y salida
Luego, puedes hacer que iniciar (y salir) una experiencia de pestaña personalizada en tu app sea más fluida; para ello, define animaciones personalizadas de inicio y salida con setStartAnimation
y 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();
Más personalizaciones: título, ocultamiento automático de la AppBar e ícono de cierre personalizado.
Hay algunas cosas más que puedes hacer para ajustar la IU de una pestaña personalizada según tus necesidades.
- Oculta la barra de URL al desplazarse a fin de darle al usuario más espacio para explorar contenido web con
setUrlBarHidingEnabled()(true)
. - Muestra el título del documento en lugar de la URL a través de
setShowTitle()(true)
. - Personaliza el botón de cierre para que coincida con el flujo de usuarios en tu app, por ejemplo, mostrando una flecha hacia atrás en lugar del ícono
X
predeterminado:setCloseButtonIcon()(myCustomCloseIcon)
.
Todas estas opciones son opcionales, pero pueden mejorar la experiencia de la pestaña personalizada en tu app.
Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setUrlBarHidingEnabled(true)
.setShowTitle(true)
.setCloseButtonIcon(toBitmap(myCustomCloseIcon))
.build();
Cómo configurar una URL de referencia personalizada
Puedes configurar tu app como la URL de referencia cuando inicies tu pestaña personalizada. De esta manera, puedes informar a los sitios web de dónde proviene el tráfico.
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
A continuación: obtén información para agregar una acción personalizada a tu pestaña personalizada.