Panduan ini menjelaskan cara menambahkan interaktivitas kustom ke Tab Kustom.
Mengaktifkan tindakan berbagi default
Jika Anda tidak menyediakan tindakan berbagi kustom, sebaiknya aktifkan tindakan berbagi default browser di menu tambahan untuk memudahkan pengguna membagikan link ke konten yang mereka lihat:
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setShareState(CustomTabsIntent.SHARE_STATE_ON);
Menambahkan tombol tindakan kustom
Untuk tindakan penting, toolbar Tab Kustom memungkinkan Anda mengintegrasikan tombol tindakan kustom, yang dapat memiliki label teks atau ikon kustom. Ikon harus berukuran 24 dp tinggi dan 24-48 dp lebar.
Misalnya, Anda dapat menambahkan tindakan berbagi kustom ke toolbar. Untuk melakukannya, buat BroadcastReceiver yang dipanggil saat pengguna mengklik tindakan berbagi di Tab Kustom.
Daftarkan BroadCastReceiver di file AndroidManifest.xml:
<application …>
<receiver android:name=".ShareBroadcastReceiver" />
</application>
Kemudian, tambahkan class baru, ShareBroadcastReceiver. Dalam metode onReceive(), ekstrak URL yang saat ini ditampilkan dari intent dan picu intent pengiriman.
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);
}
}
Sekarang, buat PendingIntent untuk ShareBroadcast dan daftarkan melalui setActionButton(). Teruskan intent yang tertunda beserta ikon dan deskripsi.
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();
Menambahkan item menu kustom
Tab Kustom memiliki sebanyak lima tindakan default yang disediakan oleh browser: "Teruskan", "Info Halaman", "Muat ulang", "Cari di Halaman", dan "Buka di Browser". Selain itu, Anda dapat menambahkan hingga tujuh orang lagi. Item menu ini akan disisipkan di antara baris ikon dan item yang disediakan browser. (Lihat gambar di bawah.) Jumlah sebenarnya bergantung pada implementasi browser yang mendasarinya. (Misalnya, dengan versi 117, Chrome meningkatkan jumlah item menu dari lima menjadi tujuh.) Jadi, sebaiknya tambahkan item yang paling penting terlebih dahulu.
Anda dapat mengakses tindakan kustom melalui menu tiga titik di pojok kanan atas:
Untuk menambahkan item menu, panggil CustomTabsIntent.Builder.addMenuItem() dengan judul dan PendingIntent. Saat pengguna mengetuk item menu, browser akan mengaktifkan 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();
Menyesuaikan tombol tutup
Untuk menyesuaikan Tab Khusus dengan alur aplikasi Anda, sesuaikan tombol tutup. Jika Anda ingin pengguna merasa bahwa Tab Kustom adalah dialog modal, gunakan tombol “X” default. Jika Anda ingin pengguna merasa bahwa Tab Kustom adalah bagian dari alur aplikasi, gunakan panah kembali.
CustomTabsIntent.Builder intentBuilder = new CustomTabsIntent.Builder();
intentBuilder.setCloseButtonIcon(BitmapFactory.decodeResource(
getResources(), R.drawable.ic_arrow_back));
Menambahkan toolbar bawah
Toolbar bawah adalah cara yang sangat fleksibel untuk menambahkan lebih banyak fungsi ke Tab Khusus.
Dengan meneruskan objek RemoteViews ke CustomTabIntent.Builder.setSecondaryToolbarViews(), toolbar bawah dapat sepenuhnya disesuaikan dan diperbarui secara dinamis.
Pertama, deklarasikan tata letak toolbar dengan membuat file tata letak baru, 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>
Langkah berikutnya adalah mendaftarkan BroadcastReceiver, yang menangani interaksi toolbar, dalam file AndroidManifest.xml:
<application …>
<receiver android:name=".CustomTabBottomToolbarBroadcastReceiver" />
</application>
Kemudian, terapkan BroadcastReceiver, yang akan menangani semua interaksi dengan toolbar bawah:
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
}
}
}
Terakhir, daftarkan toolbar:
// 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();
Bookmark dan tombol download
Tombol bookmark dan download di menu tiga titik diaktifkan secara default. Untuk menonaktifkannya, gunakan kode
berikut di CustomTabsIntent.Builder:
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder()
.setBookmarksButtonEnabled(false)
.setDownloadButtonEnabled(false)
.build();
Berikutnya: Pelajari cara mempercepat pemuatan konten web di Tab Kustom.