Android ViewPager Tutorial

This tutorial is to teach how to implement a View Pager with bottom tab in your Android project.

Step 1:

add this in your gradle dependencies and sync it

compile 'com.android.support:design:25.2.0'

Step 2:

create 3 fragments with the XML UI file

public class FragmentOne extends Fragment {

public static FragmentOne newInstance(int arg){
    FragmentOne fragment = new FragmentOne();
    Bundle bundle = new Bundle();
    bundle.putInt("int", arg);
    fragment.setArguments(bundle);
    return fragment;
    }

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

Step 3:

go to styles.xml add this code

<style name="TabLayoutTextAppearance" parent="TextAppearance.AppCompat">
    <item name="android:textAllCaps">false</item>
    <item name="android:textSize">12dp</item>
</style>

Step 4:

go to activity_main.xml create the UI for your view pager with the following code

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 

xmlns:android="http://schemas.android.com/apk/res/android"              

xmlns:app="http://schemas.android.com/apk/res-auto"              

android:layout_width="match_parent"              

android:layout_height="match_parent"              

android:orientation="vertical">

    <android.support.v4.view.ViewPager        

     android:id="@+id/page_user"

     android:layout_width="match_parent" 

     android:layout_height="0dp"   

     android:layout_weight="1.0">

    </android.support.v4.view.ViewPager>

    <View        

    android:layout_width="match_parent"       

    android:layout_height="1dp"      

    android:background="#88979797"/>

    <android.support.design.widget.TabLayout    

     android:id="@+id/tab_user"    

     android:layout_width="match_parent"   

     android:layout_height="?attr/actionBarSize"    

     android:measureAllChildren="true"   

     app:tabIndicatorHeight="0dp"   

     app:tabSelectedTextColor="?attr/colorPrimary"   

     app:tabTextAppearance="@style/TabLayoutTextAppearance"/>

</LinearLayout>

Step 5:

create entity for your fragments with the new class named PageInfo.java and add this code

public class PageInfo {

private String title;
@DrawableRes
private int icon;
private Fragment fragment;

public PageInfo(String title, int icon, Fragment fragment) {
this.title = title;
this.icon = icon;
this.fragment = fragment;
}

public String getTitle() { return title; }
public int getIcon() { return icon; }
public Fragment getFragment() { return fragment; }
}

Step 6:

remember add your tab icon with selector file

add your tab icon into the drawable file, and then create the selector file with the following code

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_settings" android:state_selected="true" />
    <item android:drawable="@drawable/ic_settings_grey" />
</selector>

Step 7:

create a FragmentAdapter class with the following code

public class FragmentAdapter extends FragmentPagerAdapter {

List listFragments;

public FragmentAdapter(FragmentManager fm, List listFragments){
super(fm); 
this.listFragments = listFragments;
    }
@Override
public Fragment getItem(int position){
return listFragments.get(position).getFragment();
    }
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// super.destroyItem(container, position, object);
    }
@Override
public int getCount(){
return listFragments.size();
    }
}

Step 8:

add this code in your main activity class

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{

private ViewPager mPager;
private TabLayout tabLayout;
private List listFragments;
private FragmentAdapter mFragmentAdapter;
private static int currentPageIndex = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPager = (ViewPager) findViewById(R.id.page_user);
tabLayout = (TabLayout) findViewById(R.id.tab_user);
mPager.addOnPageChangeListener(this);
listFragments = new ArrayList<>();
listFragments.add(new PageInfo("User", R.drawable.tab_user, FragmentOne .newInstance(0))); listFragments.add(new PageInfo("Notification", R.drawable.tab_noti, FragmentTwo .newInstance(0)));
listFragments.add(new PageInfo("Setting", R.drawable.tab_setting, FragmentThree .newInstance(0)));
mFragmentAdapter = new FragmentAdapter(getSupportFragmentManager(), listFragments);
mPager.setAdapter(mFragmentAdapter); tabLayout.setupWithViewPager(mPager);
setTabItem();
mPager.setCurrentItem(currentPageIndex);
onPageSelected(currentPageIndex);
}
private void setTabItem()
{
for (
int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tabAt = tabLayout.getTabAt(i);
PageInfo info = listFragments.get(i);
if (tabAt == null) {
return;
}
tabAt.setIcon(info.getIcon());
tabAt.setText(info.getTitle());
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 }
@Override
public void onPageSelected(int position) {
PageInfo pageInfo = listFragments.get(position);
setTitle(pageInfo.getTitle());
}
@Override
public void onPageScrollStateChanged(int state) {
 }
}