Thursday 19 June 2014

Swipable Tab Navigation

Download this project here : SwipableTabNavigation.zip


First Add ActionBar Compat library to application follow below post 
 http://ramsandroid4all.blogspot.in/2014/03/actionbar-tutorial-part-01-adding.html

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.support.v4.view.ViewPager>


fragmenta.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="#ffccff" >

    <TextView
        android:id="@+id/installedapps_customlayout_textview_appname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Fragment A"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000"/>

</LinearLayout>


fragmentb.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:background="#ffffcc"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/installedapps_customlayout_textview_appname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Fragment B"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000" />

</LinearLayout>


fragmentc.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:background="#ccffcc"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/installedapps_customlayout_textview_appname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Fragment C"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#000000" />

</LinearLayout>


FragmentA.java:
package com.ram.swipingtabs;

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

@SuppressLint("NewApi")
public class FragmentA extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {

        View rootView = inflater.inflate(R.layout.fragmenta, container, false);

        return rootView;
    }
}
 

FragmentB.java:
package com.ram.swipingtabs;

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

@SuppressLint("NewApi")
public class FragmentB extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {

        View rootView = inflater.inflate(R.layout.fragmentb, container, false);

        return rootView;
    }
}


FragmentC.java:
package com.ram.swipingtabs;

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

@SuppressLint("NewApi")
public class FragmentC extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState)
    {

        View rootView = inflater.inflate(R.layout.fragmentc, container, false);

        return rootView;
    }
}


TabsPagerAdapter.java:
package com.ram.swipingtabs;

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

public class TabsPagerAdapter extends FragmentPagerAdapter
{

    public TabsPagerAdapter(FragmentManager fm)
    {
        super(fm);
    }

    @Override
    public Fragment getItem(int index)
    {

        switch (index)
        {
        case 0:

            return new FragmentA();
        case 1:

            return new FragmentB();
        case 2:

            return new FragmentC();
        }

        return null;
    }

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

}


MainActivity.java:
package com.ram.swipingtabs;

import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;

@SuppressLint("NewApi")
public class MainActivity extends ActionBarActivity implements
        android.support.v7.app.ActionBar.TabListener
{

    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private android.support.v7.app.ActionBar actionBar;
    // Tab titles
    private String[] tabs =
    { "FragmentA", "FragmentB", "FragmentC" };

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getSupportActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        // Hiding Title Bar
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setDisplayUseLogoEnabled(false);

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

        }

        /**
         * 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)
            {
            }
        });
    }

    public void onTabReselected(android.support.v7.app.ActionBar.Tab arg0,
            android.support.v4.app.FragmentTransaction arg1)
    {
        // TODO Auto-generated method stub

    }

    public void onTabSelected(android.support.v7.app.ActionBar.Tab tab,
            android.support.v4.app.FragmentTransaction arg1)
    {
        // TODO Auto-generated method stub
        // on tab selected
        // show respected fragment view
        viewPager.setCurrentItem(tab.getPosition());
    }

    public void onTabUnselected(android.support.v7.app.ActionBar.Tab arg0,
            android.support.v4.app.FragmentTransaction arg1)
    {
        // TODO Auto-generated method stub

    }

}

No comments:

Post a Comment