SLIDING TABS LIKE GOOGLE PALY TABS WITH VIEWPAGER IN ANDROID

Nowadays all android application based on fragments . Either Developer use Navigation Drawer or SlidingTabs or Both.Today i am sharing a demo application for  slidingTabs and ViewPager with fragment.

I am using custom SlidingTabLayout .That give completly lokk and feel like google Play apps.You can see at http://developer.android.com/downloads/samples/SlidingTabsBasic.zip



activity_main.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">

    <custom.slidingtabs.SlidingTabLayout.SlidingTabLayout
        android:id="@+id/test_pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        />

    <android.support.v4.view.ViewPager
        android:id="@+id/test_pager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"/>


</LinearLayout>

MainActivity.java

package program.androidheight.slidingtabsdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import custom.slidingtabs.SlidingTabLayout.SlidingTabLayout;

public class MainActivity extends ActionBarActivity {

    SectionsPagerAdapter mSectionsPagerAdapter;
    //public static final String TAG = TestCenter.class.getSimpleName();
    ViewPager mViewPager;
    SlidingTabLayout mSlidingTabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.test_pager);
        mViewPager.setAdapter(new SectionsPagerAdapter(getSupportFragmentManager()));
        mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.test_pager_title_strip);
        mSlidingTabLayout.setViewPager(mViewPager);
    }

    public class SectionsPagerAdapter extends FragmentPagerAdapter {

        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        private final String[] TITLES = { "Fragment1","Fragment2","Fragment3","Fragment4","Fragment5"};

        @Override
        public Fragment getItem(int position) {

            Fragment fragment=null;
            if(position==0){
                fragment = new Fragment1();
            }
            else if(position==1){
                fragment=new Fragment2();
            }
                       else if(position==2){
                             fragment=new Fragment3();
                       }

            else if(position==3){
                fragment=new Fragment4();
            }

            else if(position==4){
                fragment=new Fragment5();
            }

            return fragment;

        }

        @Override
        public int getCount() {
            // Show  total pages.
            return TITLES.length;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return TITLES[position];
        }
    }



}

I have  mapped the Fragment to its Tabs in the  SectionsPagerAdapter in MainActivity.

Fragmant1.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="#334543"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:layout_gravity="center"

        android:textColor="#FFFFFF"

        android:text="Fragment1"

        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

Fragment1 .java\

package program.androidheight.slidingtabsdemo;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

 * Created by PRABHU on 20-04-2015.

 */

public class Fragment1 extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

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

        return rootView;

    }

}

screenshots

you can download the Example frpm : Github

Hope this Example will helpful to you. If Any query leave in Comment

SHARE

About prabhakar jha