Android Studio – Material Design CollapsingToolbarLayout


Assalamu’alaikum,

Pada kesempatan kali ini saya berusaha membuat dokumentasi hasil belajar mengenai layouting xml menggunakan aplikasi Android Studio. Disini yang mengikuti aturan Material Design dari Google untuk mendesain tampilan aplikasi android. Sebelumnya teman-teman silahkan menginstall aplikasi Android Studio (saya memakai Android Studio 2.1) dan membuat project baru dengan langkah kurang lebih seperti dibawah ini.

Untuk menggunakan library dari Material Design, kita bisa memasangnya menggunakan gradle bawaan Android Studio. Jadi pada file build.gradle (Module: app) silahkan ditambahkan di baris 5 pada bagian dependencies. Jika sudah silahkan lakukan Sync Now untuk update ulang package gradle yang berada di list dependencies.

http://pastebin.com/KFdJndRG

Selanjutnya pada file app > res > values > styles.xml  perlu kita tambahkan kode pada baris 8 dan 9 untuk menonaktifkan ActionBar + Title bawaan dari template yang pertama kita buat tadi.

http://pastebin.com/qvhXW7NC

Berikut contoh preview hasil layout animation pada project yang sedang saya kembangkan bersama tim Phloemer.

.

Kita akan bermain-main dengan file app > res > layout > activity_main.xml.
Secara template kasarnya, bentuk susunan xml yang akan kita buat akan seperti berikut :

http://pastebin.com/vBCJMZ5r

Pada bagian yang komentar isi dari header yang akan collapsing itu merupakan konten yang akan hilang ketika kita melakukan scrolling screen ke bawah. Selengkapnya akan saya bahas di kode bagian bawah.

Jangan lupa untuk menambahkan requirement attribute yaitu layout_width dan layout_height, untuk aturannya bisa mengikuti kode saya dibawah :

http://pastebin.com/zArUFHe7

Selanjutnya untuk membuat sebuah background di bagian parallax / collapsing content. Kita akan menambahkan ImageView dengan attribute layout_collapseMode=”parallax” yang maksudnya akan menghilang secara halus jika kita melakukan scrolling down. Taruh baris kode dibawah pada bagian bawah komentar <!– isi konten header yang akan collapsing –>

http://pastebin.com/bQrWEtU3

Dibagian bawah ImageView diatas, tambahkan baris kode dibawah ini untuk membuat sebuah profil seperti Foto, Nama, Keterangan pada bagian tengah header yang nantinya juga akan collapse.

http://pastebin.com/4eSTkFMj

Salah satu alasan kenapa kok saya taruh di LinearLayout orientation vertical, karena biar mudah aja untuk mengubah jarak antara konten ini dengan ToolBar di atasnya.

Selanjutnya kita akan menambahkan attribute pada elemen AppBarLayout dan CollapsingToolbarLayout

http://pastebin.com/5ipGpvng

 

Sekarang waktunya membuat fragment untuk konten setiap Tab. Disini kita akan membuat contoh 2 tab saja. Ikuti langkah pada gambar berikut :

Setelah berhasil membuat fragment, buatlah lagi dengan nama yang berbeda misal TabSatuFragment dan TabDuaFragment. Serta jangan lupa untuk menghapus sebagian besar kode dengan mengubahnya sehingga menjadi seperti baris kode berikut :

http://pastebin.com/w4V9V3ER

Lakukan hal yang sama pula untuk TabDuaFragment.

Untuk file app > res > layout > fragment_tab_satu.xml ubah konten layoutnya menjadi seperti ini, ketambahan NestedScrollView dan jangan lupa untuk menambahkan konten paragraf yang panjang, bisa memakai lorem ipsum generator

http://pastebin.com/bbyfyK9n

 

Sekarang saatnya kita menambahkan beberapa baris kode di MainActivity.java. Taruh kode dibawah dibagian bawah public class untuk membuat sebuah inisialisasi variable baru yang akan kita gunakan nanti

http://pastebin.com/mn49q1jc

Di dalam void onCreate() dibagian bawahnya

setContentView(R.layout.activity_main);

Kita akan menambahkan baris kode seperti dibawah ini, untuk mengatur Judul ActionBar dan menentukan elemen yang akan menjadi ViewPager (konten tab) dan Tab (list tab)

http://pastebin.com/8avsJxxd

Di bagian luar dan bawahnya void onCreate()  tambahkan function dan class baru untuk membuat Tab sesuai dengan nama-nama Fragment yang sudah kita buat sebelumnya

http://pastebin.com/096yJsAU

Jika teman-teman masih bingung peletakan kodenya, berikut kode versi lengkapnya di file MainActivity.java

http://pastebin.com/01PXf2UQ

 

Preview hasil demo dari kode diatas :

Hasil masih ada yang mengganjal. Oke, mari kita cari tau apa yang kurang atau salah 🙂

Untuk menghilangkan judul animasi di ActionBar yang menutupi Tab. Jadi, agar tidak mengganggu kita hilangkan saja teks tersebut dengan cara, di file MainActivity.java pada bagian bawah kode

tabLayout.setupWithViewPager(viewPager);

Tambahkan dengan baris kode seperti berikut

http://pastebin.com/aGtwZz8f

Setelah itu dibagian file app > res > layout > activity_main.xml di element Toolbar tambahkan attribute titleMarginTop seperti pada baris ke 8 di bawah ini:

http://pastebin.com/F2S5aViK

Preview hasil demo dari perbaikan :

 

Oh ternyata masih ada yang kurang, kalau kita perhatikan saat di scroll down yang tertinggal untuk tampil hanya bagian Tab saja. Padahal kita inginnya yang tampil fixed itu bagian ActionBar dan Tab. Lalu bagaimana caranya?
Setelah saya analisa menurut pendapat pribadi, ternyata yang berperan penting dalam kasus ini adalah si Toolbar dengan kita menentukan

height ActionBar + height Tab = hasil Fix saat Scroll Down

Jadi disini saya anggap saja kita butuh 96dp untuk menampilkan kedua bagian tersebut.

http://pastebin.com/j7XgrsRi

 

Taraa… Final demo ^_^

Github Source    Demo APK

Bahagia itu sederhana, bisa membuat apa yang kita inginkan menjadi terwujud nyata. Tentu jangan lupa bahwa ini semua karena campur tangan dari Allah 🙂

Semoga belajarnya teman-teman semakin giat dan semangat, semoga bermanfaat…
Terima kasih.

Wassalamu’alaikum.

Man Jadda Wajada

You may also like

2 Comments

  • Chusnu
    12 September 2016 at 5:51 pm

    Waahhh,,, saya coba mas. kalo ada tutorial lagi saya mau. hehehe. semoga bertambah nilai manfaatnya.

LEAVE A COMMENT

About me

Garry Priambudi

Garry Priambudi

Menjadi orang yang bermanfaat untuk orang lain dan tetap istiqomah berbagi ilmu kepada sesama. Semangat!

Contact Us

Feel free to discussion with me about technology or projects :)

Sidoarjo, Indonesia

+6281232009362

Instagram

Instagram
Instagram
Instagram
Instagram
Instagram
Instagram