• ThumbnailHomeSeek

    HomeSeek adalah aplikasi android yang akan membantu menemukan kawasan tempat tinggal tertentu yang berada di Kota Malang. Aplikasi ini bertujuan untuk membantu anda mencari kawasan tempat tinggal di […]

  • Android Tab Layout + Swipe
     1
    Perangkat android yang relatif kecil mengakibatkan informasi dan fungsi yang dapat ditampilkan pada layar menjadi terbatas. Untuk dapat menampilkan informasi dan fungsi secara maksimal namun tetap memudahkan pengguna untuk menemukan letak dari bagian yang ingin ditemukan tersebut dapat menggunakan tab layout.

    Dengan menggunakan tab layout maka informasi dapat ditata sesuai fungsinya sehingga dapat ditemukan dengan mudah. Seperti contoh pada gambar diatas, tab akan memudahkan pengguna untuk memilih konten berisi game, movie atau top rated content. Untuk dapat menghasilkan tampilan tab layout seperti diatas diperlukan penggabungan dari konsep fragment dan viewpager.

    Langkah-langkah pembuatan tab layout adalah:

    • Membuat projek baru di eclipse

    Seperti biasa untuk membuat projek pada eclipse dapat dilakukan dengan mengakses File -> New -> Android -> Application Project kemudian isi informasi yang dibutuhkan seperti nama aplikasi, projek, package dan SDK minimum dan target serta informasi lain sesuai kebutuhan.

    Buat elemen ViewPager pada file layout utama (activity_main.xml) dengan isi:

    <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 FragmentPagerAdapter dengan membuat class bernama TabsPagerAdapter.java dengan isi:

    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 pada Action Bar

    Pada MainActivity.java kita enable fungsi setNavigationMode(ActionBar.NAVIGATION_MODE_TABS) yaitu dengan:

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

    }

     

    • Tambahkan format view untuk masing-masing tab

    Untuk masing-masing tab kita perlu membuat masing-masing 2 file yang terdiri dari file layout yang dimasukkan pada folder src->res dan fragment activity class.

     

  • Tab Pertama
  • File layout (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>

    File fragment activity class (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;

    }

    }

     

  • Tab Kedua
  • File layout (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>

    File fragment activity class (GamesFragment.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 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 Ketiga
  • File fragment activity class (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>

    File layout (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;

    }

    }

     

    • Tab Change Listener

    Sebelum adanya tab change listener apabila program dijalankan maka dapat dilihat swiping dapat berfungsi namun jika tab disentuh maka view tidak dapat berubah secara otomatis. Hal ini dikarenakan ViewPager tidak tahu mengenai tab change event. Untuk itu diperlukan listener yang dimasukkan pada MainActivity.java yaitu:

    @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) {

    }

    • View Change Listener

    Saat view digeser, tab tidak akan berubah sebelum adanya view change listener yaitu:

    /**

    * 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) {

    }

    });

    • Kode Lengkap

    Setelah ditambah kedua fungsi diatas, kode lengkap dari class MainActivity.java akan menjadi:

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

    }

    }

     

     

    Hasil dari langkah-langkah diatas akan menjadi tampilan tab layout yang dapat di geser seperti dibawah:

     
    Tampilan Vertikal
     Screenshot_2014-11-11-20-21-59 Screenshot_2014-11-11-20-22-23 Screenshot_2014-11-11-20-22-55 Screenshot_2014-11-11-20-24-20
    Tampilan Horizontal
     Screenshot_2014-11-11-20-53-08 Screenshot_2014-11-11-20-53-28 Screenshot_2014-11-11-20-54-03 Screenshot_2014-11-11-20-54-22