In this tutorial I provide an Android Material Design sliding tab example program and cover ViewPager and FragmentPagerAdapter. You are going to need these 2 files SlidingTabLayout.java and SlidingTabStrip.java.
This will allow us to use the newest form of sliding tabs that is also backwards compatible. I did my best to keep everything as simple as possible so that you can use this code in your applications immediately. The code follows the video below.
If you like videos like this, it helps to tell Google with a click here [googleplusone]
Code From the Video
TabFragment1.java
package com.newthinktank.derekbanas.slidingtab;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
// Same for TabFragment2 and TabFragment3 except change this
// R.layout.tab_fragment_1 below
public class TabFragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
View view = inflater.inflate(R.layout.tab_fragment_1, container, false);
return view;
}
}
tab_fragment_1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Same as tab_fragment_2.xml and tab_fragment_2.xml except
change the text below -->
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab Fragment 1"
android:textSize="16dp"
android:padding="5dp"/>
</LinearLayout>
MyFragmentPagerAdapter.java
package com.newthinktank.derekbanas.slidingtab;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
// Holds tab titles
private String tabTitles[] = new String[] { "Frag #1", "Frag #2", "Frag #3" };
private Context context;
public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
@Override
public int getCount() {
return 3;
}
// Return the correct Fragment based on index
@Override
public Fragment getItem(int position) {
if(position == 0){
return new TabFragment1();
} else if(position == 1) {
return new TabFragment2();
} else if(position == 2) {
return new TabFragment3();
}
return null;
}
@Override
public CharSequence getPageTitle(int position) {
// Return the tab title to SlidingTabLayout
return tabTitles[position];
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The sliding tab -->
<com.newthinktank.derekbanas.slidingtab.stab.SlidingTabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</LinearLayout>
MainActivity.java
package com.newthinktank.derekbanas.slidingtab;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import com.newthinktank.derekbanas.slidingtab.stab.SlidingTabLayout;
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Layout manager that allows the user to flip through the pages
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
// getSupportFragmentManager allows use to interact with the fragments
// MyFragmentPagerAdapter will return a fragment based on an index that is passed
viewPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(),
MainActivity.this));
// Initialize the Sliding Tab Layout
SlidingTabLayout slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
// Connect the viewPager with the sliding tab layout
slidingTabLayout.setViewPager(viewPager);
}
}