Tutorial Sliding Tab Menggunakan Material Design

Kali ini saya akan membagikan sebuah tutorial tentang Sliding Tab. Pada proses pembuatannya kita tidak memerlukan library luar, tapi hanya menggunakan library design:support (Library Support Material Desain dari Google)

Baca juga : Membuat Spesific Tab Pada Sliding Tab

Dengan menggunakan material design dari Google, membangun sebuah UI yang bagus menjadi lebih gampang dari sebelumnya. Hal ini akan berdampak pada berkurangnya stres para developer hahaha. Lihat Gambar dibawah ini

The result

Jika kalian tertarik dengan hasil akhirnya (seperti yang terlihat pada gambar diatas) dan ingin mengimplementasikannya pada project kalian, maka ikutilah langkah-langkah dibawah ini :

1.  Library

Compile library design:support di build.gradle(app : Module) :

compile 'com.android.support:design:25.0.0'

2. Membuat Directory Color

Buat sebuah folder baru di directory res dan berikan nama menjadi color (Ini adalah pembuatan directorynya bukan file xml, 2 hal tersebut berbeda)

Directory color

Didalam directory color, buat sebuah file xml baru. Beri nama sebagai tab_selector.xml. Selector ini digunakan untuk mewarnai text pada setiap judul tab.


Ada terdapat dua warna, jika ada satu tab yang dipilih, maka warnanya akan berubah menjadi putih, jika tidak maka warnanya tetap menjadi gray.

3.  Colors.xml


Untuk bacground dari TabLayout dan warna warna garil selectornya, kalian dapat memilih dari file colors.xml.


4. Membuat Fragments

Buat 3 Fragment, karena jumlah dari item tab adalah 3. Tab 1 untuk Home, Tab 2 untuk Timeline, Tab 3 untuk Profile.

fragment_first.xml



FirstFragment.java


Juga buat fragment selanjutnya untuk SecondFragment.java dan ThirdFragment.java.

5. Buat SlidingTabAdapter.java


Adapter ini digunakan untuk men set item tab kalian. Tab Home untuk FirstFragment, Tab Timeline untuk SecondFragment dan Tab Profile untuk ThirdFragment.


Jangan lupa untu return size dari jumlah fragment kalian. Jika kalian menggunakan 3 fragment, maka return 3 didalam method getCount().


6. Modifikasi MainActivity.java


Di project ini saya menggunakan MainActivity sebagai class tempat dimana saya menaruh SlidingTabAdapter. Kalian dapat merubahnya menjadi class pilihan kalian masing-masing.
Paste kode dibawah ini :


Dari kode diatas :

Code getSupportActionBar().setElevation(0) digunakan untuk menyembunyikan garis pembatas antara actionbar dan tab layout.

Kode :

private TabLayout.Tab home;
private TabLayout.Tab timeline;
private TabLayout.Tab profile;

digunakan untuk men set/mendefinisikan item dari tab-tab kalian. Itu berart kalian membuat 3 item tab..

Kode :

home = tabLayout.newTab();
timeline = tabLayout.newTab();
profile = tabLayout.newTab();

berarti home, timeline dan profile sebagai tab baru.

Kode :

tabLayout.addTab(home, 0);
tabLayout.addTab(timeline,1);
tabLayout.addTab(profile,2);

Berarti kalian harus mendefinisikan index dari item tab. Index tersebut akan digunakan di SlidingTabAdapter untuk me return sebuah fragment. Sebagai contoh, di index 0, kalian akan mereturn FirstFragment, index 1 akan mereturn SecondFragment dan index 3 akan mereturn ThirdFragment.

Baca juga : Tutorial cara POST data menggunakan Retrofit 2 (Contoh kasus : proses login)

Untuk penjelasan lainnya kalian bisa baca langsung di class MainActivity, saya sudah beri komentar-komentar di kodenya. Semoga tutorial ini membantu. Terima kasih.

Silakan download projectnya dibawah ini :

(Visited 126 times, 1 visits today)



Baca juga :


About The Author

Related Posts

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini