Uma vantagem das guias personalizadas é que elas podem ser facilmente integradas em seu aplicativo. Nesta parte do guia "Guias personalizadas", você aprenderá a alterar a aparência e o comportamento de uma guia personalizada para que ela combine com seu aplicativo.
Definir a cor da barra de ferramentas
![Guia Personalizada com esquema de cores claras 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=pt-br)
![Guia personalizada com esquema de cores escuras 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=pt-br)
Primeiro, personalize a barra de endereço da guia personalizada para que ela fique consistente com o tema do app. O snippet abaixo muda a cor padrão da barra de ferramentas chamando setDefaultColorSchemeParams()
. Caso o app também ofereça 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();
Agora, a barra de ferramentas tem cores personalizadas para o plano de fundo e o primeiro plano.
Configurar animação personalizada de entrada e saída
Em seguida, você pode facilitar a inicialização (e a saída) de uma experiência de guia personalizada no app, definindo animações personalizadas de início e saída 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, barra de apps oculta automaticamente e ícone de fechamento personalizado
Há mais algumas coisas que você pode fazer para ajustar a interface de uma guia personalizada de acordo com suas necessidades.
- Oculte a barra de URL ao rolar a tela para dar ao usuário mais espaço para navegar pelo conteúdo da Web usando o
setUrlBarHidingEnabled()(true)
. - Mostrar o título do documento em vez do URL com
setShowTitle()(true)
. - Personalize o botão "Fechar" para que ele corresponda ao fluxo do usuário no seu app, por exemplo, mostrando uma seta para trás em vez do ícone
X
padrão:setCloseButtonIcon()(myCustomCloseIcon)
.
Todas essas ações 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 referenciador personalizado
Você pode definir seu aplicativo como o referenciador ao iniciar a guia Personalizada. Dessa forma, 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: aprenda a adicionar uma ação personalizada à guia "Personalizada".