Android TabLayout Tutorial and Examples

Android TabLayout Tutorial and example.

Hello Guys.Today we discuss about Simple Clickable Android  tabs with ListViews.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>
Resource Link
Video Tutorial Youtube Tutorial

Best Regards.

BEFORE YOU GO

YOU'VE BEEN SELECTED FOR A GIFT

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Related Examples

Leave a Reply

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

*

code