Personaliza la IU

Sebastian Benz

Una ventaja de las pestañas personalizadas es que se pueden integrar sin problemas en tu app. En esta parte de la guía de pestañas personalizadas, aprenderás a cambiar el aspecto y el comportamiento de una pestaña personalizada para que coincida con tu app.

Establece el color de la barra de herramientas

Modo claro

Modo oscuro

Primero, debes personalizar 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 tu app también admite un esquema de colores oscuros, configúralo a través de .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 de fondo y de primer plano personalizados.

Punto clave: El protocolo de la pestaña personalizada no admite cambiar el color de la barra de estado.

Configura una animación de entrada y salida personalizada

A continuación, puedes definir animaciones de inicio y salida personalizadas con setStartAnimation y setExitAnimation para que la experiencia de la pestaña personalizada en tu app sea más fluida cuando la inicies (y salgas de ella):

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, AppBar oculta automáticamente y ícono de cierre personalizado

Hay algunas otras acciones que puedes realizar para ajustar la IU de una pestaña personalizada a tus necesidades.

• Oculta la barra de URL durante el desplazamiento para darle al usuario más espacio para explorar el 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 predeterminado X): 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 un referente personalizado

Puedes establecer 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 su tráfico.

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
       Uri.parse("android-app://" + context.getPackageName()));

A continuación, descubre cómo agregar una acción personalizada a tu pestaña personalizada.