Sliding Tab Top Example - Tutorialsee

On 4 Mar, 2016 By tutorialsee 0 Comments

This Android tutorial is to help create tab layout with swipe views in an Android application. Swipe views in a tab layout are for convenience for the user. Swipe adds a real world feel to the tabs. In a previous tutorial we saw about creating a tab layout in an Android application. In an another tutorial we saw about creating swipe views in Android. Now all we are going to do is combine the both and create a simple app that has tabs and swipe able views.

1. MainActivity.java

package com.tutorialsee.tab;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.FragmentTransaction;
import android.graphics.drawable.ColorDrawable;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

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();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setStackedBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.black)));


//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
}

@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 Tab
actionBar.addTab(actionBar.newTab().setText("HTC").setTabListener(tabListener));
actionBar.addTab(actionBar.newTab().setText("NOKIALUMIA").setTabListener(tabListener));
actionBar.addTab(actionBar.newTab().setText("SAMSUNG").setTabListener(tabListener));

}
}

2. TabPagerAdapter.java

package com.tutorialsee.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 HTC Tab
            return new HTC();
        case 1:
           //Fragment for NokiaLume Tab
            return new NokiaLumia();
        case 2:
            //Fragment for Samsung Tab
            return new Samsung();
        }
return null;

}

@Override
public int getCount() {
// TODO Auto-generated method stub
return 3; //No of Tabs
}
    }

3. Samsung.java

package com.tutorialsee.tab;

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 Samsung extends Fragment {
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

    View windows = inflater.inflate(R.layout.samsung_frag, container, false);
        ((TextView)windows.findViewById(R.id.textView)).setText("Samsung");
        return windows;
}
}

4. NokiaLumia.java

package com.tutorialsee.tab;

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 NokiaLumia extends Fragment {
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View ios = inflater.inflate(R.layout.nokialumia_frag, container, false);
        ((TextView)ios.findViewById(R.id.textView)).setText("NokiaLumia");
        return ios;
}
}

5. HTC.java

package com.tutorialsee.tab;

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 HTC extends Fragment {
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View android = inflater.inflate(R.layout.htc_frag, container, false);
        ((TextView)android.findViewById(R.id.textView)).setText("HTC");
        return android;
}
}

6. 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"
     />

7. nokialumia_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:background="@color/Teal"
    android:orientation="vertical" >

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

</LinearLayout>

8. htc_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:background="@color/Pink"
    android:orientation="vertical" >

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

</LinearLayout>

9. samsung_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:background="@color/Yellow"
    android:orientation="vertical" >

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

</LinearLayout>