Android Tab dengan Tampilan Swipeable

Android Tab dengan Tampilan Swipeable

Artikel ini menunjukkan Anda bagaimana untuk membuat tata letak tab menggunakan fragmen dan viewpager. Anda juga dapat menggesek antara tampilan tab karena merupakan fungsi dari viewpager yang tidak mungkin bila menggunakan TabHost.

ViewPager dan Fragmen

Sebelum masuk ke tutorial ini disarankan untuk memiliki pengetahuan tentang Fragmen dan ViewPager sebagai kedua adalah konsep utama yang digunakan di sini. Sayangnya saya belum mencakup sekitar fragements dan viewpager pada android

Membuat Project baru  

   1. Buat project baru di Eclipse dari File ⇒ New Project ⇒ Android Application. Sementara menciptakan proyek pilih tema app yang memiliki Action Bar seperti yang ditunjukkan pada gambar di bawah.

Ket: klik next hinggah selesai

      2. Buka main activity layout file dan menambahkan elemen ViewPager. (untuk tampilan/latout utama adalah activity_main.xml)

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>

    3. Membuat Package terpisah untuk class adapter hanya untuk memisahkan aktivitas class.  Berikutini adalah untuk membuat package baru dengan nama your_package_name.adapter. ini adalah nama package baru yang saya buat (info.olbersl.blogspot.tabsdenganswipe)

Untuk penamaan package bisa sesuaikan dendan nama aplikasi/nama anda sendiri

      4. Saya membuat class FragmentPageAdaptor untuk menampilkan tab fragments.

Buat kelas yang disebut TabsPagerAdapter.java dibawah package adapter.

Adapter ini memberikan tampilan fragmen tab.

TabsPagerAdapter.java

package info.olbersl.blogspot.tabsdenganswipe.adapter;

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:

            return new TopRatedFragment();

        case 1:

            return new GamesFragment();

        case 2:

            return new MoviesFragment();

        }

        return null;

    }

    @Override

    public int getCount() {

        return 3;

    }

}

Menambahkan Tab Action Bar

5. Di sini saya menambahkan tiga tab Top Rated, Games, Film ke action bar

MainActivity.java

import info.olbersl.blogspot.tabsdenganswipe.adapter.TabsPagerAdapter;

import android.annotation.SuppressLint;

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;



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));

        }

}

Jika diRun makan akan hasilnya terlhat sperti dibawan ini

6. Menambahkan Views untuk Tabs

Setelah membuat tab di kelas adaptor. Untuk membuatnya terlihat sederhana saya membuat tata letak yang sangat sederhana untuk setiap tab dan untuk membangun Ui anda sendiri tergantung pada kebutuhan aplikasi yang anda buat. Untuk saat ini saya hanya menampilkan label pada tampilan dengan beberapa warna latar belakang.

Tab Tampilan Pertama
7. Tab pertama saya menambahkan adalah Top Rated. Buat file layout baru di folder res bernama fragment_top_rated.xml dan paste kode berikut.

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.   Buat juga kelas baru bernama TopRatedFragment.java dibawah package adapter Anda.

TopRatedFragment.java

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;

    }

}

Tab tampilan Dua

      9.  Tab kedua dengan nama Games. Sama seperti di atas membuat file layout dan activity file untuk tab ini. Buat file layout baru di bawah folder res bernama fragment_games.xml

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.   Buat class baru bernama GamesFragment.java dengan kode berikut.

GamesFragment.java

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;

    }

}

 Tab Tampilan Ketiga

      11.   Tab ketiga dengan film. Yang satu ini membutuhkan file layout dan kelas aktivitas.
Buat file layout disebut fragment_movies.xml

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. Buat juga class activity untuk tampilan ini bernama MoviesFragment.java

MoviesFragment.java

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;

    }

}

Jalankan Project dan memeriksa apakah tampilan untuk tab ditambahkan atau tidak.

Pada tahap selanjutnya masukkan kode lengkap dibawan ini untuk membuat View Pager/tapilan sesuai dengan Action Bar Tab

Kode Lengkap  

Berikut ini adalah kode lengkap untuk class MainActivity.java

MainActivity.java

import com.example.tabsswipe.R; import info.olbersl.blogspot.tabsdenganswipe.adapter.TabsPagerAdapter; import android.annotation.SuppressLint; import android.annotation.TargetApi; import android.app.ActionBar; import android.app.ActionBar.Tab; import android.app.FragmentTransaction; import android.os.Build; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; @TargetApi(Build.VERSION_CODES.HONEYCOMB) @SuppressLint("NewApi") 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" };     @TargetApi(Build.VERSION_CODES.HONEYCOMB)        @SuppressLint("NewApi")        @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) {     } }

Sekian dan terima kasih. Semoga artikel ini bermanfaat

jangan lupa tinggalkan komentar dan sharenya..