Menambahkan interaktivitas khusus

Sebastian Benz
Sebastian Benz

Panduan ini menjelaskan cara menambahkan interaktivitas kustom ke Tab Khusus.

Mengaktifkan tindakan berbagi default

Jika Anda tidak menyediakan tindakan berbagi khusus, sebaiknya aktifkan tindakan berbagi default pada browser di menu tambahan untuk memudahkan pengguna berbagi tautan 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 Khusus memungkinkan Anda mengintegrasikan tombol tindakan kustom, yang dapat memiliki label teks atau ikon kustom. Ikon harus tinggi 24dp dan lebar 24-48 dp.

Tab Khusus dengan tindakan berbagi kustom

Misalnya, Anda dapat menambahkan tindakan berbagi kustom ke toolbar. Untuk melakukannya, buat BroadcastReceiver yang akan dipanggil saat pengguna mengklik tindakan berbagi di Tab Khusus.

Daftarkan BroadCastReceiver dalam file AndroidManifest.xml:

<application …>
  <receiver android:name=".ShareBroadcastReceiver" />
</application>

Lalu, tambahkan kelas baru, ShareBroadcastReceiver. Dalam metode onReceive(), ekstrak URL yang saat ini ditampilkan dari intent dan picu intent kirim.

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);
        context.startActivity(shareIntent);
    }
}

Sekarang, buat PendingIntent untuk ShareBroadcast dan daftarkan melalui setActionButton(). Teruskan intent yang tertunda bersama dengan 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 Khusus memiliki maksimum 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 item 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, pada versi 117, Chrome meningkatkan jumlah item menu dari lima menjadi tujuh.) Jadi, yang terbaik adalah menambahkan item yang paling penting terlebih dahulu.

Anda dapat mengakses tindakan kustom melalui menu tiga titik di sudut kanan atas:

Tab Khusus dengan lima item menu khusus.

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

Agar Tab Khusus lebih pas dengan alur aplikasi Anda, sesuaikan tombol tutup. Jika Anda ingin pengguna merasa bahwa Tab Khusus adalah dialog modal, gunakan tombol “X” default. Jika Anda ingin pengguna merasa bahwa Tab Khusus 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 merupakan cara yang sangat fleksibel untuk menambahkan lebih banyak fungsi ke Tab Khusus.

Tab Khusus dengan toolbar bawah

Dengan meneruskan objek RemoteViews ke CustomTabIntent.Builder.setSecondaryToolbarViews(), toolbar bawah dapat disesuaikan sepenuhnya 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 {i>toolbar<i}:

// 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();

Tombol download dan bookmark

Bookmark dan tombol download dalam 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 Khusus.