[ANDROID] Membuat Material Sliding Tab

Selamat siang para developer kali ini kita akan membahas tab sliding seperti aplikasi whatsapp karena ada yang request dari facebook.

Oke langsung saja, pertama kita buat project baru lalu import repository design pada build.gradle kita. Perlu diingat versi yang di import harus sesuai dengan yang ada di SDK teman-teman.

Contoh gambar dibawah ini, yang saya block adalah versi dari SDK teman-teman.

 compile 'com.android.support:design:VERSI REPO'  

Jika sudah sekarang kita buat layoutnya terlebih dahulu. Kita buka activity_main.xml lalu buat seperti berikut :

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   xmlns:app="http://schemas.android.com/apk/res-auto"  
   android:id="@+id/activity_main"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   tools:context="com.panduseptian.slidingtab.MainActivity">  
   <android.support.design.widget.TabLayout  
     android:id="@+id/slide"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:background="@color/colorPrimary"  
     app:tabGravity="fill"  
     app:tabMode="fixed">  
   </android.support.design.widget.TabLayout>  
   <android.support.v4.view.ViewPager  
     android:id="@+id/pager"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"></android.support.v4.view.ViewPager>  
 </LinearLayout>  

Kita buat 3 fragment untuk di tampilkan pada viewpager dengan cara sperti gambar dibawah :

Jika frgament sudah dibuat, sekarang kita buat adapternya seperti berikut :

Lalu masukan codingan seperti ini :

 package com.panduseptian.slidingtab;  
 import android.support.v4.app.Fragment;  
 import android.support.v4.app.FragmentManager;  
 import android.support.v4.app.FragmentPagerAdapter;  
 /**  
  * Created by pandu on 29/11/16.  
  */  
 public class PagerAdapter extends FragmentPagerAdapter {  
   public PagerAdapter(FragmentManager fm) {  
     super(fm);  
   }  
   @Override  
   public Fragment getItem(int position) {  
     switch (position){  
       case 0:  
         return new CallsFragment();  
       case 1:  
         return new ChatsFragment();  
       case 2:  
         return new ContactsFragment();  
     }  
     return null;  
   }  
   @Override  
   public int getCount() {  
     return 3;  
   }  
   @Override  
   public CharSequence getPageTitle(int position) {  
     switch (position){  
       case 0:  
         return "Calls";  
       case 1:  
         return "Chats";  
       case 2:  
         return "Contacts";  
     }  
     return super.getPageTitle(position);  
   }  
 }  

Sekarang kita ke MainActivity.java

 package com.panduseptian.slidingtab;  
 import android.support.design.widget.TabLayout;  
 import android.support.v4.view.ViewPager;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 public class MainActivity extends AppCompatActivity {  
   private ViewPager viewPager;  
   private PagerAdapter adapter;  
   private TabLayout tabLayout;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     getSupportActionBar().setElevation(0);  
     viewPager = (ViewPager) findViewById(R.id.pager);  
     adapter = new PagerAdapter(getSupportFragmentManager());  
     viewPager.setAdapter(adapter);  
     tabLayout = (TabLayout) findViewById(R.id.slide);  
     tabLayout.addTab(tabLayout.newTab().setText("Calls"));  
     tabLayout.addTab(tabLayout.newTab().setText("Chats"));  
     tabLayout.addTab(tabLayout.newTab().setText("Contacts"));  
     viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
     tabLayout.setupWithViewPager(viewPager);  
   }  
 }  

Jika sudah kita Run projectnya, Maka hasilnya seperti berikut :

Cukup sekian tutorial singkatnya, Semoga bermanfaat.