Menyesuaikan UI

Sebastian Benz

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
Mode terang
Tab Kustom dengan skema warna gelap kustom
Mode gelap

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.