Android Tabs Example by using Android Design Support Library

Wth the help of this Android tutorial we will create tab layout with swipe views.The new APIs for android tabs released the design support library and the main class used for displaying tabs through these new APIs is Android TabLayout.In Android Tab example we will create a screen with three tabs using these new APIs for tabs with Fragments and a ViewPager which would look like the image below




1.How to Create Material Design Toolbar click on blow link

link  

http://goo.gl/sUpiZs

2.Add Dependencies

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:23.0.1'

    compile 'com.android.support:design:23.0.1'

}

3.Create Three Fragment Class for three TAB
Extend Fragment class we will create three Fragment class like example blow

3.1. Create first Fragment.
     fragment_first.xml



OneFragment.java

package info.androidpoint.materialtabs.fragments;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import info.androidpoint.materialtabs.R;

public class OneFragment extends Fragment{

    public OneFragment() {

        // Required empty public constructor

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

  // Inflate the layout 

  return inflater.inflate(R.layout.fragment_one, container, false);

    }

}

3.2 create second Fragment
fragment_two.xml



TwoFragment.java

package info.androidpoint.materialtabs.fragments;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import info.androidpoint.materialtabs.R;

public class
TwoFragment extends Fragment{

    public TwoFragment() {

        // public constructor

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

       // Inflate the layout

        return inflater.inflate(R.layout.fragment_two, container, false);

    }

}

3.3 create third Fragment
fragment_three,xml



ThreeFragment,java

package info.androidpoint.materialtabs.fragments;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import info.androidpoint.materialtabs.R;

public class
ThreeFragment extends Fragment{

    public ThreeFragment() {

    }

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

    }

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container,

                             Bundle savedInstanceState) {

        // Inflate the layout 

        return inflater.inflate(R.layout.fragment_three, container, false);

    }

}

4. Create XML for MainActivity

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"      

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_width="match_parent"

            android:layout_height="?attr/actionBarSize"

            android:background="?attr/colorPrimary"

            app:layout_scrollFlags="scroll|enterAlways"

            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>

        <android.support.design.widget.TabLayout

            android:id="@+id/tabs"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:tabMode="fixed"

            app:tabGravity="fill"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

       
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

5.Create MainActivity  class

package info.androidpoint.materialtabs.activity;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

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.AppCompatActivity;

import android.support.v7.widget.Toolbar;

import java.util.ArrayList;

import java.util.List;

import info.androidpoint.materialtabs.R;

import info.androidpoint.materialtabs.fragments.OneFragment;

import info.androidpoint.materialtabs.fragments.ThreeFragment;

import info.androidpoint.materialtabs.fragments.TwoFragment;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;

    private TabLayout tabLayout;

    private ViewPager viewPager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_simple_tabs);

        toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);

        tabLayout.setupWithViewPager(viewPager);

    }

    private void setupViewPager(ViewPager viewPager) {

        ViewPagerAdapter adapter = new
ViewPagerAdapter(getSupportFragmentManager());

        adapter.addFragment(new OneFragment(), "ONE");

        adapter.addFragment(new TwoFragment(), "TWO");

        adapter.addFragment(new ThreeFragment(), "THREE");

        viewPager.setAdapter(adapter);

    }

    class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mFragmentList = new ArrayList<>();

        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {

            super(manager);

        }

        @Override

        public Fragment getItem(int position) {

            return mFragmentList.get(position);

        }

        @Override

        public int getCount() {

            return mFragmentList.size();

        }

        public void addFragment(Fragment fragment, String title) {

            mFragmentList.add(fragment);

            mFragmentTitleList.add(title);

        }

        @Override

        public CharSequence getPageTitle(int position) {

            return mFragmentTitleList.get(position);

        }

    }

}