(Tutorial Android) Menciptakan 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 menciptakan tab dan mengimplementasikan ViewPager. Karena kita akan memakai 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, menciptakan 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 ialah 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, akhirnya akan tampak menyerupai berikut.

Source code lengkap sanggup dilihat di https://github.com/andronut/AndroidTabLayout

Sekian dan agar bermanfaat
Happy Coding :)