Pernah pakai aplikasi youtube pasti tau kan jika di scroll actionbar / toolbarnya menghilang tergantung kemana kita menscrollnya kalau scroll kita mengarah keatas action bar akan muncul dan jika menscroll kebawah maka action bar nya akan menghilang, walaupun sepertinya tidak begitu penting ini sangat berpengaruh pada kenyamanan pengguna karena melihat aplikasi yang kita buat jangkauannya lebih luas.
Saya akhirnya menyadari pentingnya tampilan pengguna pada aplikasi android setelah mendapat pencerahan di mata kuliah rekayasa interaksi di jurusan informatika, dan saya mulai menerapkan action bar yang menghilang ini diaplikasi yang saya buat.
Untuk lebih jelasnya sobat bisa melihat cuplikan video youtube dibawah ini jika penasaran apa sih action bar yang menghilang tersebut.
Dulu saya mengira untuk menghilangkan action bar itu memerlukan algoritma dan coding yang rumit ternyata tidak, melainkan hanya memerlukan sedikit copas saja, tetapi saya yakin bagi sobat yang baru belajar membuat aplikasi android khususnya di android studio walaupun hanya copas koding, memerlukan lebih usaha dan ketelitian, karena belum terbiasa.
Google sendiri sudah menyediakan framework yang akan menghandle proses menghilangkan dan menampilkan action bar saat di scroll hanya dengan menggunakan kode xml nya saja tanpa memerlukan koding java atau kotlin sama sekali. Di butuhkan ketelitian saat menggunakan tag-tag xml yang bertumpuk-tumpuk (artinya ada tag xml yang ada di dalam tag xml lainnya), jadi harap ikuti tutorial ini dengan baik.
Pada tutorial kali ini supaya terlihat mirip dengan aplikasi youtube maka disini saya akan menggunakan button navigation view yaitu deretan tombol navigasi yang ada dibawah yang ditunjuk panah merah di gambar dibawah ini.
Langsung saja saya akan mulai tutorialnya, buka android studio, jika sobat baru menginstall android studio maka tampilannya akan seperti gambar dibawah ini, klik Start a new Android Studio Project yang saya beri kotak merah.
Setelah itu beri nama aplikasi androidnya, saya memberi nama AppBarScroll, langsung klik next.
Sekarang pilih perangkat dan minimum sistem operasi yang bisa menjalankan aplikasi yang akan sobat buat, tentu saja kita akan memilih jenis perangkat Phone and Tablet dengan versi android 4.4 atau Android Kitkat, karena dilihat dari persentasinya penggunaan android Kitkat sudah diatas 90% yang semakin baru versi androidnya maka banyak fitur baru yang bisa di implementasikan, lalu klik next lagi.
Pilih activity pertama yang ingin ditambahkan, karena saya ingin menggunakan ButtonNavigationButton maka saya memilih activity yang sudah menyediakannya agar prosesnya lebih cepat, setalah dipilih langsung saja klik next.
Selanjutnya adalah nama activity nya, kalau saya sih tidak ada yang saya ubah, langsung saja klik next.
untuk menghilangkan ActionBar default saya hanya mengganti style parentnya menjadi NoActionBar
Setelah itu beralih ke file activity_main.xml yang berguna sebagai tampilan utamanya.
Pada source code diatas saya belum menambahkan tampilan daftar gambar atau disini saya menyebutnya cardview, ya sama seperti daftar gambar di intagram gitu lah, saya menggunakan daftar gambar ini agar ActionBar yang tersebut dapat muncul dan menghilang saat di scroll, ya scroll adalah syarat agar bisa melakukan hal tersebut. Terus kenapa ga langsung aja taruh di source code diatas ? ya supaya lebih jelas aja sih dan terlihat lebih lengkap artikelnya????
Berikut ini adalah desain daftar gambar atau cardview yang saya buat, sangat sederhana dan kurang menarik kan, kan cuma sketsa saja.
dan desain diatas bisa dibuat dengan source code xlm dibawah ini, kalau ada error merah merah paling itu cuman gambarnya aja, silahkan ganti gambar ke yang lain dengan mengubah namanya biasanya ada di folder resource drawable.
Setelah digabung dengan kode activity_main.xml sebelumnya maka kodenya akan seperti kode dibawah ini.
Saya mencopas kode cardview sebanyak 3 kali supaya terlihat gerakan scrollnya.
Beberapa kode yang perlu aturan yang perlu diperhatikan jika sobat ingin memodifikasi layout diatas adalah tag dan atribute xml berikut ini.
app:layout_scrollFlags="scroll|enterAlways|snap"
adalah atribut untuk membuat app bar bisa menghilang coba saja hapus sebagian misalnya app:layout_scrollFlags="scroll|enterAlways" dan lihat apa yang terjadi
app:layout_behavior="@string/appbar_scrolling_view_behavior"
Merupakan atribute yang membantu kita menyesuaikan komponen dibawah AppBar sehingga tingginya persis dibawah AppBar tanpa harus mengayot margin_Top sama sekali.
Yang terakhir semua komponen baik AppBar dan semua yang berhubungan seperti komponen yang di scroll harus berada di dalam CoordinatorLayout supaya bisa bekerja kalau tidak maka tidak akan bekerja. Jika sobat tidak tau maksud tag dan atribute yang lain silahkan dicari sendiri ya di google????.
Setelah itu beralih ke bagian koding javanya, tidak ada bagian yang saya tambahkan disini melainkan hanya dihapus sebagian kodenya yaitu mTextMessage yang ada didalam switch pada baris 21, 24, dan 27 pada tampilan kode dibawah ini karena mTextMessage yang ada di layout activity_main.xml sudah kita timpa dengan kode diatas, jadi jika tetap ditaruh akan mengundang error NullPointer.
Setelah itu beralih ke bagian koding javanya, tidak ada bagian yang saya tambahkan disini melainkan hanya dihapus sebagian kodenya yaitu mTextMessage yang ada didalam switch pada baris 21, 24, dan 27 pada tampilan kode dibawah ini karena mTextMessage yang ada di layout activity_main.xml sudah kita timpa dengan kode diatas, jadi jika tetap ditaruh akan mengundang error NullPointer.
Jika terjasi error sobat bisa mengatasinya dengan mengganti package yang sesuai pada baris 1. Selesai sudah sekarang tinggal jalankan saja aplikasi androidnya, dan jika berjalan seperti video dibawah ini maka dapat dipastikan tutorial ini berhasil.
Sekian tutorial bagaimana membuat scroll bar menghilang pada aplikasi android, semoga bermanfaat dan bisa meningkatkan jumlah download aplikasi yang sobat buat, pesan saya jangan abaikan tampilan aplikasi, karena tampilan lah yang menentukan seberapa betah pengguna menggunakan aplikasi yang di buat. Terima kasih
Tidak ada komentar:
Posting Komentar
Berkomentarlah sesuai dengan isi artikel, no iklan.