Este guia explica como adicionar interatividade personalizada às guias personalizadas.
Ativar a ação de compartilhamento padrão
Se você não fornecer uma ação de compartilhamento personalizada, convém ativar a ação de compartilhamento padrão do navegador no menu flutuante para facilitar o compartilhamento de um link para o conteúdo exibido pelos usuários:
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-48 dp de largura.
Por exemplo, você pode adicionar uma ação de compartilhamento personalizada à barra de ferramentas. Para fazer isso, crie uma BroadcastReceiver que será chamada 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 no momento 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 um PendingIntent para o ShareBroadcast e registre-o pelo 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 oferecidas pelo navegador: "Encaminhar", "Informações da página", "Atualizar", "Localizar na página" e "Abrir no navegador". Além disso, é possível adicionar até mais sete. Esses itens de menu serão inseridos entre a linha do ícone e os itens fornecidos pelo navegador. Veja 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. Portanto, é 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 uma PendingIntent. Quando o usuário toca em um item de menu, o navegador dispara 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 de seu aplicativo, personalize o botão "Fechar". Se você quiser que o usuário sinta que o Custom Tabs é uma caixa de diálogo modal, use o botão padrão “X”. 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 da tela
A barra de ferramentas inferior é uma maneira muito flexível de adicionar mais funcionalidade 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 da parte 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 estã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 carregar conteúdo da Web em uma guia personalizada.