Membuat Material Desain Sliding Tab Layout

pada kesempatan ini kita akan membahas tentang membuat sliding tab layout dengan model material desain menggunakan slidingTabLayout dari app Google iosched.

Bahan-bahan :
1. SlidingTabLayout.java
2. SlidingTabStrip.java

Konsep XMLnya sebagai berikut :

Berikut Coding-nya :

file : activity_main.xml <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/com.tutorialsbuzz.slidingtabdemo"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical" >     <android.support.v7.widget.Toolbar         android:id="@+id/toolbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="?attr/colorPrimary"         android:fitsSystemWindows="true"         android:minHeight="?attr/actionBarSize"         android:padding="2dp"         app:titleMarginStart="20dp"         app:titleTextAppearance="@style/AppTheme.Toolbar.Title" />     <com.tutorialsbuzz.slidingtabdemo.SlidingTabLayout         android:id="@+id/tabs"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="@android:color/holo_orange_dark" />     <android.support.v4.view.ViewPager         android:id="@+id/pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:layout_weight="1"         android:background="#e5e5e5" >     </android.support.v4.view.ViewPager> </LinearLayout>

file : tab_1.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" >     <TextView         android:id="@+id/textView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:gravity="center"         android:text="You Are In Tab 1"         android:textAppearance="?android:attr/textAppearanceMedium"         android:textSize="50dp"         android:textStyle="bold" /> </RelativeLayout>

file : Tab1.java package com.tutorialsbuzz.slidingtabdemo; 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; public class Tab1 extends Fragment {     @Override     public View onCreateView(LayoutInflater inflater,             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {         View v = inflater.inflate(R.layout.tab_1, container, false);         return v;     } }

Buat 2 fragment lagi dengan cara yang sama diatas

Mebuat PageAdapter

1, pertama buat dulu sebuah class ViewPagerAdapter dan extend class tersebut ke FragmentStatePagerAdapter
2. override method getCount() dan getItem() didalam class ViewPagerAdapter
3. didalam method getItem() instantiate the fragment berdasarkan index dan return.

file : ViewPagerAdapter.java package com.tutorialsbuzz.slidingtabdemo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; public class ViewPagerAdapter extends FragmentStatePagerAdapter {     CharSequence Titles[];     int NumbOfTabs;     public ViewPagerAdapter(FragmentManager fm, CharSequence mTitles[],             int mNumbOfTabsumb) {         super(fm);         this.Titles = mTitles;         this.NumbOfTabs = mNumbOfTabsumb;     }     // This method return the fragment for the every position in the View Pager     @Override     public Fragment getItem(int position) {         switch (position) {         case 0:             return new Tab1();         case 1:             return new Tab2();         case 2:             return new Tab3();         }         return null;     }     // This method return the titles for the Tabs in the Tab Strip     @Override     public CharSequence getPageTitle(int position) {         return Titles[position];     }     // This method return the Number of tabs for the tabs Strip     @Override     public int getCount() {         return NumbOfTabs;     } }

membuat MainActivity

1. buat sebuah class MainActivity dan Extend ke ActionBarActivity.
2. atur konten dari activity dengan activity_main.xml yang telah kita buat.
3. atur ViewPagerAdapter untuk layout Sliding Tabs

file : MainActivity.java package com.tutorialsbuzz.slidingtabdemo; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBarActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import com.tutorialsbuzz.slidingtabdemo.SlidingTabLayout.TabColorizer; public class MainActivity extends ActionBarActivity {     // Declaring Your View and Variables     Toolbar toolbar;     ViewPager pager;     ViewPagerAdapter adapter;     SlidingTabLayout tabs;     CharSequence Titles[] = { "Tab1", "Tab2", "Tab3" };     int Numboftabs = 3;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         // Creating The Toolbar and setting it as the Toolbar for the activity         toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);         getSupportActionBar().setIcon(R.drawable.ic_launcher);         // Creating The ViewPagerAdapter and Passing Fragment Manager, Titles         // fot the Tabs and Number Of Tabs.         adapter = new ViewPagerAdapter(getSupportFragmentManager(), Titles,                 Numboftabs);         // Assigning ViewPager View and setting the adapter         pager = (ViewPager) findViewById(R.id.pager);         pager.setAdapter(adapter);         // Assiging the Sliding Tab Layout View         tabs = (SlidingTabLayout) findViewById(R.id.tabs);         tabs.setDistributeEvenly(true);         // Setting Custom Color for the Scroll bar indicator of the Tab View         tabs.setCustomTabColorizer(new TabColorizer() {             @Override             public int getIndicatorColor(int position) {                 return R.color.Black;             }         });         // Setting the ViewPager For the SlidingTabsLayout         tabs.setViewPager(pager);     } }

Setting Tab Selector

Masuk ke folder res/color/ buat sebuah file dan tambahkan kode berikut

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item android:state_selected="true" android:color="@android:color/white" />     <item android:state_focused="true" android:color="@android:color/holo_red_dark" />     <item android:state_pressed="true" android:color="@android:color/holo_red_dark" />     <item android:color="#000000" /> </selector>

Sekarang buka file SlidingTabLayout.java dan pada baris akhir sub-class populateTabStrip tambahkan kode berikut

tabTitleView.setTextColor(getResources().getColorStateList(R.color.selector));

Hasilnya sebagai berikut

DOWNLOAD SOURCE

sumber : http://www.tutorialsbuzz.com/2015/04/Android-Material-Design-Sliding-TabLayout.html