(Tutorial Android) Membuat Tab dengan TabLayout Android Material Design

TabLayout mulai diperkenalkan oleh Google sebagai salah satu komponen Material Design pada Design Support Library. TabLayout memudahkan kita dalam membuat tab dan mengimplementasikan ViewPager. Karena kita akan menggunakan Design Support Library, maka tambahkan library ini pada build.gradle.

Buat layout main. Di layout ini kita akan menambahkan tablayout dan viewpager

activity_main.xml

Buat 3 layout untuk masing-masing tab berikut ini :

fragment_one.xml

fragment_two.xml

fragment_three.xml

Kemudian buat 3 fragment

FragmentOne.java

package com.example.wim.androidtablayout;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by docotel on 3/2/16.
 */
public class FragmentOne extends Fragment {

    public static FragmentOne newInstance(){
        return new FragmentOne();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_one, container, false);
        return rootView;
    }
}

FragmentTwo.java

package com.example.wim.androidtablayout;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by docotel on 3/2/16.
 */
public class FragmentTwo extends Fragment {

    public static FragmentTwo newInstance(){
        return new FragmentTwo();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_two, container, false);
        return rootView;
    }
}

Fragment Three

package com.example.wim.androidtablayout;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by docotel on 3/2/16.
 */
public class FragmentThree extends Fragment {

    public static FragmentThree newInstance(){
        return new FragmentThree();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_three, container, false);
        return rootView;
    }
}

Selanjutnya, membuat adapter untuk pager. Kita namai dengan ViewPagerAdapter

ViewPagerAdapter.java

package com.example.wim.androidtablayout;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
 * Created by docotel on 3/2/16.
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {
    final int PAGE_COUNT = 3;
    final Context context;

    public ViewPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = FragmentOne.newInstance();
                break;
            case 1:
                fragment = FragmentTwo.newInstance();
                break;
            case 2:
                fragment = FragmentThree.newInstance();
                break;
        }
        return fragment;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 0:
                return context.getResources().getString(R.string.tab_1);
            case 1:
                return context.getResources().getString(R.string.tab_2);
            case 2:
                return context.getResources().getString(R.string.tab_3);
        }
        return null;
    }

    @Override
    public int getCount() {
        return PAGE_COUNT;
    }
}

Terakhir adalah menambahkan pager di activity utama. Buat kelas nama MainActivity dan tambahkan code berikut.

package com.example.wim.androidtablayout;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        setupToolbar();
        init();
    }

    protected void setupToolbar() {
        if (toolbar != null) {
            setSupportActionBar(toolbar);
            getSupportActionBar().setDisplayShowHomeEnabled(true);
        }
    }

    private void init(){
        setupViewPager(viewPager);
        tabLayout.setupWithViewPager(viewPager);
    }

    private void setupViewPager(final ViewPager viewPager) {
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
        viewPager.setAdapter(viewPagerAdapter);
        viewPager.setOffscreenPageLimit(3);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setTabsFromPagerAdapter(viewPagerAdapter);
    }
}

Deploy dan jalankan aplikasi, hasilnya akan tampak seperti berikut.

Source code lengkap dapat dilihat di https://github.com/wimsonevel/AndroidTabLayout

Sekian dan semoga bermanfaat
Happy Coding :)

Share this :