TabLayout Tutorial and Examples

Hello Guys.Today we discuss Simple Clickable Android  tabs with ListViews example. Suitable for beginners. If you would do with more explanations then what about our video here :

SECTION 1 : Our MainActivity

package com.tutorials.tabswithlistview;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;

public class MainActivity extends FragmentActivity implements ActionBar.TabListener {

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

       //GET AND SETUP ACTIONBAR
        final ActionBar ab=getActionBar();
        ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

      //ADD THE TABS
        ab.addTab(ab.newTab().setText("Man Utd").setTabListener(this));
        ab.addTab(ab.newTab().setText("Chelsea").setTabListener(this));
        ab.addTab(ab.newTab().setText("Arsenal").setTabListener(this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

  @Override
  public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
    // TODO Auto-generated method stub

  }

  @Override
  public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

    //FIRST TAB SHOW MAN UTD
    if(tab.getPosition()==0)
    {
      ManUtdFragment mu=new ManUtdFragment();
      getSupportFragmentManager().beginTransaction().replace(R.id.container, mu).commit();
    }else if(tab.getPosition()==1)
    {
       ChelseaFragment c=new ChelseaFragment();
       getSupportFragmentManager().beginTransaction().replace(R.id.container, c).commit();
    }else if(tab.getPosition()==1)
    {
       ArsenalFragment a=new ArsenalFragment();
       getSupportFragmentManager().beginTransaction().replace(R.id.container, a).commit();
    }

  }

  @Override
  public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
    // TODO Auto-generated method stub

  }
}

SECTION 2 : Our Fragments

Man Utd Fragment

To display man utd players.

package com.tutorials.tabswithlistview;

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class ManUtdFragment  extends ListFragment{

    String[] players={"Ander Herera","Wayne Rooney","David DeGea","Robin Van Persie",
            "Juan Mata","Michael Carrick","Chris Smalling","Phil Jones"};

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    View rootView=inflater.inflate(R.layout.manu, container,false);

    //CREATE ADAPTER AND SET IT TO LV
    ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players);
    setListAdapter(adapter);

    return rootView;
  }

  @Override
  public void onListItemClick(ListView l, View v, int position, long id) {
    // TODO Auto-generated method stub

        Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
  }

}

Chelsea Fragment

Will display Chelsea Players in a ListFragment.

We have a string array which will populate our ListView which will define in thechelsea.xml layout.

package com.tutorials.tabswithlistview;

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class ChelseaFragment extends ListFragment {

  String[] players={"Thibout Courtouis","John Terry","Oscar","Eden Hazard","Diego Costa","Petr Cech",
         "Didier Drogba","Branislav Ivanovic"};

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    View rootView=inflater.inflate(R.layout.chelsea, container,false);

    //CREATE ADAPTER AND SET IT TO LV
    ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players);
    setListAdapter(adapter);

    return rootView;
  }

  @Override
  public void onListItemClick(ListView l, View v, int position, long id) {
    // TODO Auto-generated method stub

        Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
  }

}

Arsenal Fragment

This class will be deriving from ListFragment:

That ListFragment will render our Arsenal Players in a ListView. It will inflate the associated arsenal layout.

package com.tutorials.tabswithlistview;

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class ArsenalFragment extends ListFragment {

  String[] players={"Aaron Ramsey","Jack Wilshere","Mesut Ozil","Alexis Sanchez",
      "Per Metesacker","Keiron Gibbs","Laurent Koscielny","Olivier Giroud"};

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    View rootView=inflater.inflate(R.layout.arsenal, container,false);

    //CREATE ADAPTER AND SET IT TO LV
    ListAdapter adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,players);
    setListAdapter(adapter);

    return rootView;
  }

  @Override
  public void onListItemClick(ListView l, View v, int position, long id) {
    // TODO Auto-generated method stub

        Toast.makeText(getActivity(), getListView().getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
  }

}

SECTION 3  : Our Layouts

MainActivity Layout Our main activity layout.

Basically empty.

<RelativeLayout

    android_id="@+id/container"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_paddingBottom="@dimen/activity_vertical_margin"
    android_paddingLeft="@dimen/activity_horizontal_margin"
    android_paddingRight="@dimen/activity_horizontal_margin"
    android_paddingTop="@dimen/activity_vertical_margin"
    tools_context=".MainActivity" >

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical" >

    <ListView
        android_id="@id/android:list"
        android_layout_width="match_parent"
        android_layout_height="wrap_content" >
    </ListView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical" >

    <ListView
        android_id="@id/android:list"
        android_layout_width="match_parent"
        android_layout_height="wrap_content" >
    </ListView>

</LinearLayout>

Man Utd Fragment Layout Will display Man Utd data in a ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical" >

    <ListView
        android_id="@id/android:list"
        android_layout_width="match_parent"
        android_layout_height="wrap_content" >
    </ListView>

</LinearLayout>

Our Manifest We specify our minimum sdk version.

<?xml version="1.0" encoding="utf-8"?>
<manifest
    package="com.tutorials.tabswithlistview"
    android_versionCode="1"
    android_versionName="1.0" >

    <uses-sdk
        android_minSdkVersion="19"
        android_targetSdkVersion="19" />

    <application
        android_allowBackup="true"
        android_icon="@drawable/ic_launcher"
        android_label="@string/app_name"
        android_theme="@style/AppTheme" >
        <activity
            android_name="com.tutorials.tabswithlistview.MainActivity"
            android_label="@string/app_name" >
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />

                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Best Regards.