Personalizar a UI

Sebastian Benz

Uma das vantagens das guias personalizadas é que elas podem ser integradas ao seu app. Nesta parte do guia, você vai aprender a mudar a aparência e o comportamento de uma guia personalizada para que ela corresponda ao seu app.

Definir a cor da barra de ferramentas

Primeiro, personalize a barra de endereço da guia personalizada para que ela seja consistente com o tema do seu app. O snippet abaixo muda a cor padrão da barra de ferramentas chamando setDefaultColorSchemeParams(). Se o app também tiver suporte a um esquema de cores escuras, defina-o usando .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();

A barra de ferramentas agora tem cores de primeiro e segundo plano personalizadas.

Configurar uma animação de entrada e saída personalizada

Em seguida, você pode tornar a experiência de abertura (e saída) de uma guia personalizada no app mais simples, definindo animações de início e saída personalizadas usando setStartAnimation e 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();

Outras personalizações: título, ocultação automática da AppBar e ícone de fechamento personalizado

Há algumas outras coisas que você pode fazer para ajustar a interface de uma guia personalizada às suas necessidades.

• Ocultar a barra de URL ao rolar a tela para dar ao usuário mais espaço para explorar o conteúdo da Web usando setUrlBarHidingEnabled()(true).
• Mostre o título do documento em vez do URL usando setShowTitle()(true).
• Personalize o botão de fechar para corresponder ao fluxo de usuários no app, por exemplo, mostrando uma seta de volta em vez do ícone padrão X): setCloseButtonIcon()(myCustomCloseIcon).

Todos são opcionais, mas podem melhorar a experiência da guia personalizada no seu app.

Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
  …
  .setUrlBarHidingEnabled(true)
  .setShowTitle(true)
  .setCloseButtonIcon(toBitmap(myCustomCloseIcon))
  .build();

Como definir um referrer personalizado

Você pode definir seu app como o referente ao lançar a guia personalizada. Assim, você pode informar aos sites de onde vem o tráfego.

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

A seguir: saiba como adicionar uma ação personalizada à sua guia personalizada.