Cómo personalizar la IU

Sebastian Benz

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

Cómo establecer el color de la barra de herramientas

Modo claro

Modo oscuro

En primer lugar, personaliza la barra de direcciones de la pestaña personalizada para que sea coherente con el tema de tu aplicación. El siguiente fragmento cambia el color predeterminado de la barra de herramientas llamando a setDefaultColorSchemeParams(). Si tu app también admite un esquema de colores oscuros, configúralo con .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 y segundo plano.

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

Configura la animación de entrada y salida personalizada

A continuación, puedes hacer que iniciar (y salir) de una experiencia de pestaña personalizada en tu app sea más fluida, definiendo 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, barra de la app oculta automáticamente y el í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 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 con 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 aplicación como referencia al iniciar la pestaña personalizada. De esta manera, puedes permitir que los sitios web sepan 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: Aprende a agregar acciones personalizadas a tu pestaña personalizada.