How to Create Swipe View With Tab Bar in Android – View Pager

feature_image

Hello all, How are you? Today I am going to show you one of the easiest way to do Swipe View within Tab Layout in an android application,also called View Pager when we slide or swipe the page of Android Application.
It is really very helpful to show information in front and transition between two or more activity is very easy.So lets dig inside how to create this project –
First of all take or create your project and give desire name you want.In this project we going to use View Pager within Tab Layout so that both work together and final output will become so cool and easy.
Whenever we want to use two different layout within a single layout we will use Layout Inflator and we will approach this technique via fragments.
You can checkout the final output here and move further towards coding part –

Download Code

Now Lets start with designing part and in your activity_main.xml you have to take supportable view pager like –

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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" />

Now create your different Tabbing activities here I am going to use three xml files for Movie,Music and Video sections. So create all you want to show .

movie_frag.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>

</LinearLayout>

music_frag.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>

</LinearLayout>

Video_frag.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:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="50sp"/>

</LinearLayout>

Now lets move to coding or my best Java part you have to make TabPagerAdapter class for Tabs , so that if you select any Tab which class should call like if I tab Movie Tab then its corresponding class i.e. Movie.java will call.This class should extends FragmentStatePagerAdapter class to use the features of fragments.

TabPagerAdapter.java

package androidarena.tab;

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

public class TabPagerAdapter extends FragmentStatePagerAdapter {
    public TabPagerAdapter(FragmentManager fm) {
		super(fm);
		// TODO Auto-generated constructor stub
	}

	@Override
	public Fragment getItem(int i) {
		switch (i) {
        case 0:
            //Fragement for Movie Tab
            return new Movies();
        case 1:
           //Fragment for Music Tab
            return new Music();
        case 2:
            //Fragment for video Tab
            return new Video();
        }
		return null;
		
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return 3; //No of Tabs you can give your number of tabs
	}


    }

Now on getItem() we choose can choose different class so create those classes also Movie.java,Music.java and Video.java.This class should extends Fragments.

Movie.java

package androidarena.tab;

import androidarena.tab.R;

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

public class Movies extends Fragment {
	@Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	            Bundle savedInstanceState) {
	 
	        View mov = inflater.inflate(R.layout.movie_frag, container, false);
	        ((TextView)mov.findViewById(R.id.textView)).setText("Movies List");
	        return mov;
}}

Music.java

package androidarena.tab;

import androidarena.tab.R;

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

public class Music extends Fragment {
	 @Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	            Bundle savedInstanceState) {
	 
	        View mus = inflater.inflate(R.layout.music_frag, container, false);
	        ((TextView)mus.findViewById(R.id.textView)).setText("Music Tracks");
	        return mus;
}}

Video.java

package androidarena.tab;

import androidarena.tab.R;

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

public class Video extends Fragment {
	 @Override
	    public View onCreateView(LayoutInflater inflater, ViewGroup container,
	            Bundle savedInstanceState) {
	 
		    View vid = inflater.inflate(R.layout.video_frag, container, false);
	        ((TextView)vid.findViewById(R.id.textView)).setText("Video Section");
	        return vid;
}}

Now You have to make or create your MainActivity.java in which you will call TabPagerAdapter class object and set it in to your project .It should extends FragmentActivity class.

One more thing we going to use ActionBar and set the tabs over it so we also going to call ActionBar class .

MainActivity.java

package androidarena.tab;

import androidarena.tab.R;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.Toast;

public class MainActivity extends FragmentActivity {
	ViewPager Tab;
    TabPagerAdapter TabAdapter;
	ActionBar actionBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TabAdapter = new TabPagerAdapter(getSupportFragmentManager());
        
        
        Tab = (ViewPager)findViewById(R.id.pager);
        
        Tab.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                       
                    	actionBar = getActionBar();
                    	actionBar.setSelectedNavigationItem(position);                    }
                });
        
        Tab.setAdapter(TabAdapter);
        
        actionBar = getActionBar();
        
        //Enable Tabs on Action Bar
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ActionBar.TabListener tabListener = new ActionBar.TabListener(){

	@Override
	public void onTabReselected(android.app.ActionBar.Tab tab,
	FragmentTransaction ft) {
	// TODO Auto-generated method stub
	Toast.makeText(getApplicationContext(), "Tab selected", 2000).show();
				
	}

	@Override
	 public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
	          
	  Tab.setCurrentItem(tab.getPosition());
	  }

	@Override
	public void onTabUnselected(android.app.ActionBar.Tab tab,
	FragmentTransaction ft) {
		// TODO Auto-generated method stub
				
			}};
	//Add New Tabs
	actionBar.addTab(actionBar.newTab().setText("Movie").setTabListener(tabListener));
	actionBar.addTab(actionBar.newTab().setText("Music").setTabListener(tabListener));
	actionBar.addTab(actionBar.newTab().setText("Video").setTabListener(tabListener));

    }



    
}

Make sure you have set proper Id’s and extends proper classes , and Run your  Project and you will feel the awesome response .

Output-

screen_outputFeel free to ask your queries and errors , will solve it. Thank You ! Happy Coding :p

 

2 thoughts on “How to Create Swipe View With Tab Bar in Android – View Pager

Leave a Reply

Your email address will not be published. Required fields are marked *