Dalam artikel sebelumnya tentang Android Tab Layout . Tapi ternyata penggunakan TabHost tidak akan berfungsi di beberapa fragment. So, akan lebih baik menggunakan fragment dan viewpager untuk membuat tab layout. Tak hanya itu, kalian juga bisa melakukan swipe di antara tampilan tab yang tidak akan mungkin dilakukan jika kalian menggunakan TabHost. Nah, sekarang kita akan belajar tentang membuat android tab layout dengan swipe.
Tab Layout dengan Android Material Design
Meskipun artikel ini memberikan penjelasan secara detail tentang Tab Layout, akan lebih baik juga jika kalian mempelajari tentang Tab dengan Material Design (dengan Android Design Support Library) saat kalian sudah selesai dengan artikel ini.
Layout Overview
Mari kita lihat gambar berikut agar kalian memiliki gambaran lebih lengkap tentang arsitektur tampilan layout menggunakan ViewPager sebagai layout utama dan Fragment sebagai tampilan masing-masing layout secara individu.
Membuat Project Baru
Jika kalian belum familiar dengan ViewPager atau Fragments, jangan khawatir. Setelah mempelajari artikel ini, kalian akan mendapatkan sedikit pencerahan tentang keduanya (ceileh istilahnya haha). Langsung aja yes kita mulai dengan membuat project baru.
- Buat project baru melalui menu File ⇒ New ⇒ Android ⇒ Application Project. Pilih tema aplikasi (app theme) dengan Action Bar seperti gambar berikut.
- Karena akan menggunakan Fragment, perlebar tampilan activity dari FragmentActivity. Kemudian berikan juga class dari ActionBar.TabListener untuk menambahkan tab.
public class MainActivity extends FragmentActivity implements ActionBar.TabListener {
- Buka file layout activity utama (main activity layout) kalian kemudian tambahkan elemen ViewPager. Di contoh saya ini, file activity layout utama (main activity layout) saya adalah activity_main.xml
Kode untuk activity_main.xml<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>
- Kemudian buat package baru yang terpisah dari package class activity project kalian. Hal ini akan mempermudah kalian bekerja. Jadi, package baru dengan nama info.androidhive.tabsswipe.adapter
- I am creating a FragmentPagerAdapter class to provide views to tab fragments. Create a class called TabsPagerAdapter.java under adapter package. This adapter provides fragment views to tabs which we are going to create them later in this tutorial.
Kode untuk TabsPagerAdapter.javapackage info.androidhive.tabsswipe.adapter; import info.androidhive.tabsswipe.GamesFragment; import info.androidhive.tabsswipe.MoviesFragment; import info.androidhive.tabsswipe.TopRatedFragment; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; public class TabsPagerAdapter extends FragmentPagerAdapter { public TabsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int index) { switch (index) { case 0: // Top Rated fragment activity return new TopRatedFragment(); case 1: // Games fragment activity return new GamesFragment(); case 2: // Movies fragment activity return new MoviesFragment(); } return null; } @Override public int getCount() { // get item count - equal to number of tabs return 3; } }
Menambahkan Tab ke Action Bar
- Untuk memunculkan tab, kita tidak lagi menggunakan TabHost. Fitur tab sudah include Action bar yang bisa kita gunakan nantinya. Yang perlu kalian lakukan adalah mengaktifkannya dengan cara setNavigationMode(ActionBar.NAVIGATION_MODE_TABS). Buka MainActivity.java kemudian tambahkan tiga tab yakni Top Rated, Games, Movies ke action bar. Masukkan saja nama-nama tab tersebut dalam String array dan tambahkan ke action bar secara berulang.
Kode untuk MainActivity.java
public class MainActivity extends FragmentActivity implements ActionBar.TabListener { private ViewPager viewPager; private TabsPagerAdapter mAdapter; private ActionBar actionBar; // Tab titles private String[] tabs = { "Top Rated", "Games", "Movies" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initilization viewPager = (ViewPager) findViewById(R.id.pager); actionBar = getActionBar(); mAdapter = new TabsPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(mAdapter); actionBar.setHomeButtonEnabled(false); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs for (String tab_name : tabs) { actionBar.addTab(actionBar.newTab().setText(tab_name) .setTabListener(this)); }
Coba jalankan project kalian. Sekarang, kalian akan melihat tab yang muncul di bawah action bar.
Menambahkan Tampilan Tab
Kita sudah menambahkan fragment ke tab dengan class adapter. Untuk mempermudah, di sini saya membuat layout sederhana untuk masing-masing tab dengan sebuah label di dalam tampilan dan warna background.
» Tampilan Tab Pertama
- Tab pertama yang saya buat adalah Top Rated. Buat file layout baru di dalam folder src ⇒ res kemudian berikan nama fragment_top_rated.xml dan paste kode berikut.
Kode untuk fragment_top_rated.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#fa6a6a" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="Design Top Rated Screen" android:textSize="20dp" android:layout_centerInParent="true"/> </RelativeLayout>
- Jangan lupa buat juga fragment class activity untuk menjalankankan tampilannya. Buat class baru kemudian berikan nama TopRatedFragment.java dalam package utama kalian. Berikut kodenya.
Kode untuk TopRatedFragment.javapackage info.androidhive.tabsswipe; import info.androidhive.tabsswipe.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class TopRatedFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_top_rated, container, false); return rootView; } }
» Tampilan Tab Kedua
Tab kedua adalah Games. Seperti langkah sebelumnya di atas, buat file layout dan activity baru untuk tab ini.
- Buat file layout baru di dalam folder src ⇒ res kemudian berikan nama fragment_games.xml dan pastekan kode berikut.
Kode untuk fragment_games.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#ff8400" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="Design Games Screen" android:textSize="20dp" android:layout_centerInParent="true"/> </RelativeLayout>
- Kemudian buat class baru dengan nama GamesFragment.java dengan kode berikut.
package info.androidhive.tabsswipe; import info.androidhive.tabsswipe.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class GamesFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_games, container, false); return rootView; } }
» Tampilan Tab Ketiga
Tab ketiga adalah Movies. Sama seperti dua tab yang lain, tab ini juga memerlukan file layout dan class activity.
- Buat file layout baru dan berikan nama fragment_movies.xml
Kode untuk fragment_movies.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#17df0d"> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="Design Movies Screen" android:textSize="20dp" android:layout_centerInParent="true"/> </RelativeLayout>
- Jangan lupa buat juga class activity dengan nama MoviesFragment.java
Kode untuk MoviesFragment.java
package info.androidhive.tabsswipe; import info.androidhive.tabsswipe.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class MoviesFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_movies, container, false); return rootView; } }
Sekarang kita coba jalankan project kalian untuk mengecek keberadaan tabnya.
Dan jika dalam mode landscape, inilah hasilnya.
Listener Perubahan Tab
Saat kalian menjalankan project, swipe sudah bisa dijalankan. Namun, jika kalian memilih tab-nya maka tampilan tidak akan berganti otomatis. Hal ini karena ViewPager belum mengenal event perubahan tab. Kita harus menambahkannya secara manual dengan Listener perubahan tab.
- Lanjuuuut…dalam class MainActivity.java tambahkan kode berikut.
@Override public void onTabReselected(Tab tab, FragmentTransaction ft) { } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // on tab selected // show respected fragment view viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { }
Listener Perubahan Tampilan
- Yeah…sekarang jika kalian swipe, tab yang terpilih masih belum terlihat aktif. Di sini kita gunakan ViewPager setOnPageChangeListener() untuk mengaktifkannya secara manual.
/** * on swiping the viewpager make respective tab selected * */ viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { // on changing the page // make respected tab selected actionBar.setSelectedNavigationItem(position); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } });
Sampai di sini semua proses project kalian harusnya sudah selesai dan harusnya juga sudah bisa berjalan dengan baik.
Kode Lengkap
Okeh, sebagai ringkasannya berikut adalah kode lengkap untuk class MainActivity.java class
Kode untuk MainActivity.java
package info.androidhive.tabsswipe; import info.androidhive.tabsswipe.adapter.TabsPagerAdapter; import info.androidhive.tabsswipe.R; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.Menu; public class MainActivity extends FragmentActivity implements ActionBar.TabListener { private ViewPager viewPager; private TabsPagerAdapter mAdapter; private ActionBar actionBar; // Tab titles private String[] tabs = { "Top Rated", "Games", "Movies" }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initilization viewPager = (ViewPager) findViewById(R.id.pager); actionBar = getActionBar(); mAdapter = new TabsPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(mAdapter); actionBar.setHomeButtonEnabled(false); actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs for (String tab_name : tabs) { actionBar.addTab(actionBar.newTab().setText(tab_name) .setTabListener(this)); } /** * on swiping the viewpager make respective tab selected * */ viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { // on changing the page // make respected tab selected actionBar.setSelectedNavigationItem(position); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // on tab selected // show respected fragment view viewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { } }
Dan ini dia source lengkap yang bisa kalian download. So pasti, jangan lupa dipraktikin ya 😀
Download Tabs With Swipe Gesture
Sumber: https://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/