Android Dev | Tutorial

Android Tab Layout dengan Mode Swipe

Ditulis oleh
Bagikan:

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.
Ilustrasi Desain Tab Android

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.

  1. Buat project baru melalui menu File ⇒ New ⇒ Android ⇒ Application Project. Pilih tema aplikasi (app theme) dengan Action Bar seperti gambar berikut.
    membuat project android tab
  2. 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 {
  3. 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>
  4. 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
  5. 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.java

    package 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

  6. 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.
    android tabs dengan penambahan ke 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

  7. 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>
  8. 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.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 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.

  9. 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>
  10. 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.

  11. 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>
  12. 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.
    Desain tiga tampilan tab
    Dan jika dalam mode landscape, inilah hasilnya.
    Tampilan tab landscape

    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.

  13. 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

  14. 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/

Recent Posts