Thursday, 27 July 2017

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 like fans page kami untuk mendapatkan informasi terbaru :

 
Link Download Project

Please post a polite comment and do not post a spam
EmoticonEmoticon