Android Tab With Swipe View

By | April 19, 2015

In this android tutorial we will see how to create android tabs with swipe view ,Android swipe views provide lateral smooth navigation between sibling screens such as tabs with a horizontal finger gesture , so will be using fragment , ViewPager and Actionbar tabs to create tab with swipe view .

Fragment

Create Fragment for each tab .

file : tab1.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”
    android:background=”#ff0000″ >

    <TextView
        android:layout_width=”match_parent”
        android:layout_height=”wrap_content”
        android:textSize=”100sp”
        android:text=”TAB 1″
        android:gravity=”center”
        android:textColor=”#ffffff”
        android:layout_marginTop=”100dp”/>

</LinearLayout>

Create a class Tab1 and extend this class to fragment and inflate this fragment with above defined xml layout file .

file : Tab1.java

package com.tutorialsbuzz.androidtabdemo;

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

public class Tab1 extends Fragment {

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

        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

Similarly Create Two More Fragment.

PagerAdapter

  1. Create a class TabsPagerAdapter and extend this class to FragmentPagerAdapter .
  2. override the getCount() and getItem() method inside the TabsPagerAdapter class .
  3. Inside the getItem() method instantiate the move defined fragment based on the index .

file : TabsPagerAdapter.java

package com.tutorialsbuzz.androidtabdemo;

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

public class TabsPagerAdapter extends FragmentPagerAdapter {

    ArrayList<String> tabs;

    public TabsPagerAdapter(FragmentManager fm , ArrayList<String> tabs) {
        super(fm);
        this.tabs=tabs;
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
            // Tab1 Fragment
            return new Tab1();
        case 1:
            // Tab2 Fragment
            return new Tab2();
        case 2:
            // Tab3 Fragment
            return new Tab3();
        }

        return null;
    }

    @Override
    public int getCount() {
        // get item count – equal to number of tabs
        return tabs.size();
    }

}

XML Layout

Create a XML Layout activity_main.xml and add ViewPager view to it .

file : activity_main.xml

<android.support.v4.view.ViewPager
    xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@+id/pager”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    android:background=”#ffffff”>

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

Create a XML Layout custom_tab.xml and add TextView to it , this XML layout represents the tabs .

file : custom_tab.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<TextView xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@+id/tabTitleText”
    android:layout_width=”match_parent”
    android:layout_height=”wrap_content”
    android:background=”#ffffff”
    android:clickable=”true”
    android:gravity=”center_horizontal”
    android:singleLine=”true”
    android:textColor=”#000000″
    android:textSize=”15sp”
    android:textStyle=”bold” />

Activity

  1. Create a class MainActivity and extend this class to FragmentActivity and Implement ActionBar.TabListener Interface.
  2. set the content of the activity with above defined activity_main.xml file .
  3. set the TabsPagerAdapter to ViewPager View .

file : MainActivity.java

package com.tutorialsbuzz.androidtabdemo;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;

    // Tab titles
    ArrayList<String> tabs = new ArrayList<String>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        tabs.add(“Tab1”);
        tabs.add(“Tab2”);
        tabs.add(“Tab3”);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();

        mAdapter = new TabsPagerAdapter(getSupportFragmentManager() , tabs);

        viewPager.setAdapter(mAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Adding Tabs
        for (String tab_name : tabs) {
            // actionBar.newTab().setCustomView()
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        getActionBar().setCustomView(R.layout.custom_tab);

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

    private static View createTabView(Context context, String tabText) {
        View view = LayoutInflater.from(context).inflate(R.layout.custom_tab,
                null, false);
        TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
        tv.setText(tabText);
        return view;
    }

}