Android viewpager with tabs example

Android Tablayout is a horizondal scrollview with tabs in which we can display multiple screen in single view. User can move from one tab to another by swiping screen or clicking on respective tabs. In this tutorial we will learn how to implement a tab layout in android using viewpager.

Steps

Create new project in android studio
Add tabview and viewpager to layout
Create layout for tabs
Create classes for tabs
Implement viewpager adapter
Set up tabview with viewpager in java code

1.Create New project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio

2.Add tabview and viewpager to layout

In this step we need to add viewpager and tabview to the layout file .After creating the project an activity will be automatically created if you haven’t changed any defaults. For displaying tabs with viewpager just add the following code to your layout file

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tabLayout"/>

3.Create layout for tabs

This is an example of displaying 3 tabs.So there will be three fragment and there will be respective layouts for each fragments.So first step is to create 3 files under res/layout/ and name it as tab1.xml ,tab2.xml,tab3.xml following is the code for tab1.xml,tab2.xml,tab3.xml

tab1.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"
android:orientation="vertical">

<TextView
android:id="@+id/tv_tab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Tab 1"
android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

4.Create classes for tabs

In this step we need to create classes for tab layouts . Here in this tutorial we are planing to implement 3 tabs and we have 3 layout files so we need to create three files under java/your package/ and name its as Tab1.java, Tab2.java, Tab3.java and use the following code

Tab1.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab1 extends Fragment {

//Overriden method onCreateView
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

//Returning the layout file after inflating
//Change R.layout.tab1 in you classes
return inflater.inflate(R.layout.tab1, container, false);
}
}

Tab2.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab2 extends Fragment {

//Overriden method onCreateView
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

//Returning the layout file after inflating
//Change R.layout.tab2 in you classes
return inflater.inflate(R.layout.tab1, container, false);
}
}

Tab3.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab3 extends Fragment {

//Overriden method onCreateView
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

//Returning the layout file after inflating
//Change R.layout.tab1 in you classes
return inflater.inflate(R.layout.tab3, container, false);
}
}

5.Implement adapter for viewpager

In this step you need to implement adapter for our viewpager . Adapter is a class where you can attach fragment to the viewpager . For creating an adapter create a class under java/yourpackage/ViewPagerAdapter.java and implement the below code .

package codes4.com.androidtabs;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

/**
* Created by rameesfazal on 25/7/16.
*/

public class ViewPagerAdapter extends FragmentStatePagerAdapter {

//integer to count number of tabs
int tabCount;

//Constructor to the class
public ViewPagerAdapter(FragmentManager fm, int tabCount) {
super(fm);
//Initializing tab count
this.tabCount= tabCount;
}

//Overriding method getItem
@Override
public Fragment getItem(int position) {
//Returning the current tabs
switch (position) {
case 0:
Tab1 tab1 = new Tab1();
return tab1;
case 1:
Tab2 tab2 = new Tab2();
return tab2;
case 2:
Tab3 tab3 = new Tab3();
return tab3;
default:
return null;
}
}

//Overriden method getCount to get the number of tabs
@Override
public int getCount() {
return tabCount;
}
}

6.Set up tabview with viewpager in java code

This is the final step . In this step first we will refer the viewpager and tablayout created in your layout file and will attach each tabs to viewpager with title. After that we will set adapter to the viewpager with the adapter we created in the above step. Following is the complete code for your activity’s java file

package codes4.com.androidtabs;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener{

Toolbar toolbar;
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//method for initialisation

init();
}

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);

//Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

//Initializing viewPager
viewPager = (ViewPager) findViewById(R.id.pager);

//Initializing view pager adapter
viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());

//Adding adapter to pager
viewPager.setAdapter(viewPagerAdapter);

//Adding onTabSelectedListener to swipe views
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

tabLayout.setOnTabSelectedListener(this);

}

@Override
public void onTabSelected(TabLayout.Tab tab) {

viewPager.setCurrentItem(tab.getPosition());

}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
}

Now simply run the code you will get the output shown in the beginning of the tutorial.