Neste guia, explicamos como adicionar interatividade personalizada às guias personalizadas.
Ativar a ação de compartilhamento padrão
Se você não oferecer uma ação de compartilhamento personalizada, é recomendável ativar a ação de compartilhamento padrão do navegador no menu flutuante para facilitar o compartilhamento de um link para o conteúdo que os usuários estão vendo:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Adicionar um botão de ação personalizado
Para ações importantes, a barra de ferramentas da guia personalizada permite integrar um botão de ação personalizado, que pode ter um rótulo de texto ou um ícone personalizado. O ícone precisa ter 24 dp de altura e 24 a 48 dp de largura.
Por exemplo, é possível adicionar uma ação de compartilhamento personalizada à barra de ferramentas. Para fazer isso, crie um BroadcastReceiver que será chamado quando o usuário clicar na ação de compartilhamento na guia personalizada.
Registre o BroadCastReceiver no arquivo AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Em seguida, adicione uma nova classe, ShareBroadcastReceiver. No método onReceive(), extraia o URL exibido atualmente da intent e acione uma intent de envio.
public class ShareBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
Intent sendIntent = new Intent();
sendIntent.setAction(Intent.ACTION_SEND);
sendIntent.putExtra(Intent.EXTRA_TEXT, url);
sendIntent.setType("text/plain");
Intent shareIntent = Intent.createChooser(sendIntent, null);
shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
context.startActivity(shareIntent);
}
}
Agora, crie uma PendingIntent para ShareBroadcast e registre-a usando setActionButton(). Transmita a intent pendente com o ícone e a descrição.
String shareDescription = getString(R.string.label_action_share);
Bitmap shareIcon = BitmapFactory.decodeResource(getResources(),
android.R.drawable.ic_menu_share);
// Create a PendingIntent to your BroadCastReceiver implementation
Intent actionIntent = new Intent(
this.getApplicationContext(), ShareBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
//Set the pendingIntent as the action to be performed when the button is clicked.
CustomTabsIntent intentBuilder = new CustomTabsIntent.Builder()
…
.setActionButton(shareIcon, shareDescription, pendingIntent)
.build();
Adicionar itens de menu personalizados
Uma guia personalizada tem até cinco ações padrão fornecidas pelo navegador: "Avançar", "Informações da página", "Atualizar", "Encontrar na página" e "Abrir no navegador". Além disso, é possível adicionar até sete outros. Esses itens de menu serão inseridos entre a linha de ícones e os itens fornecidos pelo navegador. Confira a imagem abaixo. O número real depende da implementação do navegador. Por exemplo, com a versão 117, o Chrome aumentou o número de itens de menu de cinco para sete. Por isso, é melhor adicionar os itens mais importantes primeiro.
Você pode acessar suas ações personalizadas pelo menu de três pontos no canto superior direito:
Para adicionar um item de menu, chame CustomTabsIntent.Builder.addMenuItem() com o título e um PendingIntent. Quando o usuário toca em um item de menu, o navegador aciona o PendingIntent.
CustomTabsIntent intent = new CustomTabsIntent.Builder()
...
.addMenuItem("Menu item 1", pendingIntent)
.addMenuItem("Menu item 2", pendingIntent)
.addMenuItem("Menu item 3", pendingIntent)
.addMenuItem("Menu item 4", pendingIntent)
.addMenuItem("Menu item 5", pendingIntent)
.build();
Personalizar o botão "Fechar"
Para ajustar melhor uma guia personalizada ao fluxo do seu app, personalize o botão de fechar. Se você quiser que o usuário sinta que as guias personalizadas são uma caixa de diálogo modal, use o botão “X” padrão. Se você quiser que o usuário sinta que a guia personalizada faz parte do fluxo do aplicativo, use a seta para voltar.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Adicionar uma barra de ferramentas na parte de baixo
A barra de ferramentas na parte de baixo é uma maneira muito flexível de adicionar mais funcionalidades a uma guia personalizada.
Ao transmitir um objeto RemoteViews para CustomTabIntent.Builder.setSecondaryToolbarViews(), a barra de ferramentas inferior pode ser totalmente personalizada e atualizada dinamicamente.
Primeiro, declare um layout de barra de ferramentas criando um novo arquivo de layout, res/layout/custom_tab_toolbar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_next"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Next" />
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/ct_toolbar_previous"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_margin="8dp"
android:padding="8dp"
android:text="Previous" />
</LinearLayout>
A próxima etapa é registrar um BroadcastReceiver, que processa as interações da barra de ferramentas, no arquivo AndroidManifest.xml:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Em seguida, implemente o BroadcastReceiver, que vai processar todas as interações com a barra de ferramentas de baixo:
public class BottomToolbarBroadcastReceiver extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent) {
String url = intent.getDataString();
int remoteViewId = intent.getIntExtra(EXTRA_REMOTEVIEWS_CLICKED_ID, -1);
if (remoteViewId == R.id.ct_toolbar_previous) {
// handle previous
} else if (remoteViewId == R.id.ct_toolbar_next) {
// handle next
}
}
}
Por fim, registre a barra de ferramentas:
// Create the pending intent
Intent actionIntent = new Intent(
this.getApplicationContext(), BottomToolbarBroadcastReceiver.class);
PendingIntent pendingIntent =
PendingIntent.getBroadcast(getApplicationContext(), 0 /* request code */, actionIntent, PendingIntent.FLAG_MUTABLE);
// Pass the toolbar layout to the RemoteViews instance
RemoteViews secondaryToolbarViews = new RemoteViews(getPackageName(), R.layout.custom_tab_toolbar);
// All toolbar buttons
int[] clickableIds = {R.id.ct_toolbar_next, R.id.ct_toolbar_previous};
// Register the bottom toolbar when creating a new custom tab intent
CustomTabsIntent intent = new CustomTabsIntent.Builder()
.setSecondaryToolbarViews(secondaryToolbarViews, clickableIds, toolbarPendingIntent)
.build();
Favoritos e botões de download
Os botões de favoritos e download no menu de três pontos são ativados por padrão. Para desativá-los, use o seguinte
código em CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
A seguir: Aprenda a acelerar o carregamento de conteúdo da Web em uma guia personalizada.