Salah satu keuntungan dari Tab Khusus adalah bahwa Tab Khusus dapat terintegrasi dengan lancar ke dalam aplikasi Anda. Di bagian panduan Tab Khusus ini, Anda akan mempelajari cara mengubah tampilan dan perilaku Tab Khusus agar sesuai dengan aplikasi Anda.
Menetapkan warna toolbar
![Tab Kustom dengan skema warna terang kustom](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-ligh-a25471aaa0cb9.png?authuser=19&hl=id)
![Tab Kustom dengan skema warna gelap kustom](https://developer.chrome.com/static/docs/android/custom-tabs/guide-ui-customization/image/custom-tab-a-custom-dark-4673c50a2cf6c.png?authuser=19&hl=id)
Pertama, sesuaikan kolom URL Tab Khusus agar konsisten dengan tema aplikasi Anda. Cuplikan di bawah ini mengubah warna toolbar default dengan memanggil setDefaultColorSchemeParams()
. Jika aplikasi Anda juga mendukung skema warna gelap, setel skema warna melalui .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();
Toolbar kini memiliki warna latar belakang dan latar depan kustom.
Mengonfigurasi animasi masuk dan keluar kustom
Selanjutnya, Anda dapat membuat peluncuran (dan keluar) pengalaman Tab Khusus di aplikasi menjadi lebih lancar, dengan menentukan animasi mulai dan keluar kustom menggunakan setStartAnimation
dan 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();
Penyesuaian lebih lanjut: judul, sembunyikan otomatis AppBar, dan ikon tutup khusus
Ada beberapa hal lagi yang dapat Anda lakukan untuk menyesuaikan UI Tab Khusus dengan kebutuhan Anda.
- Sembunyikan kolom URL saat men-scroll agar pengguna memiliki lebih banyak ruang untuk menjelajahi konten web menggunakan
setUrlBarHidingEnabled()(true)
. - Tampilkan judul dokumen, bukan URL melalui
setShowTitle()(true)
. - Sesuaikan tombol tutup agar cocok dengan alur penggunaan di aplikasi Anda, misalnya, dengan menampilkan panah kembali, bukan ikon
X
default):setCloseButtonIcon()(myCustomCloseIcon)
.
Semuanya bersifat opsional, tetapi dapat meningkatkan pengalaman Tab Khusus di aplikasi Anda.
Bitmap myCustomCloseIcon = getDrawable(R.drawable.ic_baseline_arrow_back_24));
CustomTabsIntent intent = new CustomTabsIntent.Builder()
…
.setUrlBarHidingEnabled(true)
.setShowTitle(true)
.setCloseButtonIcon(toBitmap(myCustomCloseIcon))
.build();
Menetapkan perujuk kustom
Anda dapat menetapkan aplikasi sebagai perujuk saat meluncurkan Tab Khusus. Dengan cara ini, Anda dapat memberi tahu situs web dari mana lalu lintasnya berasal.
CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder().build()
customTabsIntent.intent.putExtra(Intent.EXTRA_REFERRER,
Uri.parse("android-app://" + context.getPackageName()));
Selanjutnya: pelajari cara menambahkan tindakan kustom ke Tab Khusus.