Android action bar tabs swipe views

Hello, in this tutorial we will see how to create tabs in Android with swipe feature. We use latest v7 appcompat library which provides support from devices API 8 onwards.

First create a simple project called, androidtabsexample.

Create activity with viewpager, this is required to hold tab views. these are nothing but fragments.
Here we will have 3 tabs & each of them have its own fragments.

Activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabspager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

MainActivity.java

To make swipe work in Android v7 appcompat library add setOnPageChangeListener
effect

package com.example.androidtabsexample;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity implements android.support.v7.app.ActionBar.TabListener{
    
    private ViewPager tabsviewPager;
     private ActionBar mActionBar;
     private Tabsadapter mTabsAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        tabsviewPager = (ViewPager) findViewById(R.id.tabspager);
        
        mTabsAdapter = new Tabsadapter(getSupportFragmentManager());
        
        tabsviewPager.setAdapter(mTabsAdapter);
        
        getSupportActionBar().setHomeButtonEnabled(false);
        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        
        Tab friendstab = getSupportActionBar().newTab().setText("Friends").setTabListener(this);
        Tab publicprofiletab = getSupportActionBar().newTab().setText("Public").setTabListener(this);
        Tab communitytab = getSupportActionBar().newTab().setText("Community").setTabListener(this);
        
        getSupportActionBar().addTab(friendstab);
        getSupportActionBar().addTab(publicprofiletab);
        getSupportActionBar().addTab(communitytab);
        
        
        //This helps in providing swiping effect for v7 compat library 
        tabsviewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub
                  getSupportActionBar().setSelectedNavigationItem(position);
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
          
    }

     @Override
    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub
        
    }

     @Override
    public void onTabSelected(Tab selectedtab, FragmentTransaction arg1) {
        // TODO Auto-generated method stub
        tabsviewPager.setCurrentItem(selectedtab.getPosition()); //update tab position on tap
    }

     @Override
    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
        // TODO Auto-generated method stub
        
    }
}

An Adapter class is required, this generate tab views dynamically based on tab press index, generate view & pass it to viewpager to display.

Tabsadapter.java

package com.example.androidtabsexample;

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

public class Tabsadapter  extends FragmentStatePagerAdapter{

     private int TOTAL_TABS = 3;
    
    public Tabsadapter(FragmentManager fm) {
        super(fm);
        // TODO Auto-generated constructor stub
    }
    
    @Override
    public Fragment getItem(int index) {
        // TODO Auto-generated method stub
         switch (index) {
            case 0:
                return new Friendsfragment();
                
            case 1:
                return new PublicprofileFragment();
                
            case 2:
                return new Communityfragment();
            }
     
            return null;
    }

     @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return TOTAL_TABS;
    }

}

Friendsfragment .java 

package com.example.androidtabsexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Friendsfragment extends Fragment {

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

        View view = inflater.inflate(R.layout.friendsview, container, false);
         
        return view;
    }
}
friendsview.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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Friends View"
        android:textColor="@android:color/black"
        android:textSize="30sp"
        android:layout_centerInParent="true"/>
     
</RelativeLayout>

 

Communityfragment.java
package com.example.androidtabsexample;

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


public class Communityfragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.communityview, container, false);
         
        return view;
    }
}

 

communityview.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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Community View"
        android:textColor="@android:color/black"
        android:textSize="30sp"
        android:layout_centerInParent="true"/>
     
</RelativeLayout>

 

PublicprofileFragment.java
package com.example.androidtabsexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class PublicprofileFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.publicprofileview, container, false);
         
        return view;
    }
}

 

publicprofileview.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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="public profiles View"
        android:textColor="@android:color/background_dark"
        android:textSize="30sp"
        android:layout_centerInParent="true"/>
     
</RelativeLayout>