Android Programming

Android ActionBar SwipeTabs ViewPager - Fragments With GridViews

This is an android actionbar swipeable tabs using android.support.v4.View.ViewPager.The tabs shall be clickable and our fragments shall be swipeable.Our fragments are going to consist of GridViews.

In this case each gridview will comprise a list of countries in the given Fragment continent.

Our tab are actionbar tabs.

What is ActionBar

An actionbar is a primary toolbar normally appearing at the top of the activity's window.

Here are the main functions of an actionbar:

  1. Display the activity title.
  2. Allow for navigation throughout the whole application.
  3. Provide a consistent theming throughout the application irrespective of the activity.

Our Swipeable Fragments

1. Asia Fragment

This is our Asia Fragment.

This fragment will display some of the countries within the asia continent.

These countries we hold in a String array.

Here are the functions of this fragment:

No. Responsibility
1. Hold a String array containing Asian countries.
2. Define an ArrayAdapter to adapt those countries to an adapterview.
3. Define a GridView to hold our Asian countries.
4. Override the onCreateView() method of the android.support.v4.app.Fragment class.
5. Inflate the R.layout.asia layout into our Fragment and return it in the onCreateView() method.
6. Instantiate our adapter and set it to our gridview.
    package com.tutorials.viewpagertabsgridview;

    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.ArrayAdapter;
    import android.widget.GridView;

    public class Asia extends Fragment {

       String[] countries={"India","Pakistan","Malaysia","Bangladesh","Singapore","China","Syria","Saudi Arabia"};
       ArrayAdapter<String> adapter;
       GridView gv;

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

         gv=(GridView) rootView.findViewById(R.id.gridView1);

         adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,countries);

         gv.setAdapter(adapter);

        return rootView;
      }

    }

2. Africa Fragment

This is our Africa Fragment.

This class will derive from android.support.v4.app.Fragment making it a Fragment.

Here are the functions of this fragment:

No. Responsibility
1. Hold a String array containing African countries.
2. Define an ArrayAdapter to adapt those countries to an adapterview.
3. Define a GridView to hold our African countries.
4. Override the onCreateView() method of the android.support.v4.app.Fragment class.
5. Inflate the R.layout.africa layout into our Fragment and return it in the onCreateView() method.
6. Instantiate our adapter and set it to our gridview.
    package com.tutorials.viewpagertabsgridview;

    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.ArrayAdapter;
    import android.widget.GridView;

    public class Africa extends Fragment {

      String[] countries={"Kenya","Nigeria","Rwanda","South Africa","Egypt","Uganda","Zambia","Libya"};
       ArrayAdapter<String> adapter;
       GridView gv;

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

         gv=(GridView) rootView.findViewById(R.id.gridView1);

         adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,countries);

         gv.setAdapter(adapter);

        return rootView;
      }

    }

3. Europe Fragment

This is our Europe Fragment.

This class will derive from android.support.v4.app.Fragment making it a Fragment.

Here are the functions of this fragment:

No. Responsibility
1. Hold a String array containing European countries.
2. Define an ArrayAdapter to adapt those countries to an adapterview.
3. Define a GridView to hold our European countries.
4. Override the onCreateView() method of the android.support.v4.app.Fragment class.
5. Inflate the R.layout.europe layout into our Fragment and return it in the onCreateView() method.
    package com.tutorials.viewpagertabsgridview;

    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.ArrayAdapter;
    import android.widget.GridView;

    public class Europe extends Fragment{

      String[] countries={"England","Germany","Spain","Belgium","France","Italy","Ireland","Holland"};
       ArrayAdapter<String> adapter;
       GridView gv;

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

         gv=(GridView) rootView.findViewById(R.id.gridView1);

         adapter=new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1,countries);

         gv.setAdapter(adapter);

        return rootView;
      }
    }

Our FragmentPager Adapter

This our FragmentPagerAdapter class.

This class derives from android.support.v4.app.FragmentPagerAdapter.

Here are the responsibilities of this class:

No. Responsibility
1. Receive a android.support.v4.app.FragmentManager via the constructor and pass that FragmentManager to the base FragmentManager class.
2. Define a method getItem() that receives that an integer to act as the position of each fragment. We then instantiate a bundle object and depending on the position put the current page into the bundle, set the bundle as an argument of each fragment, then return the fragment. The return fragment willl then be displayed on the selected tab.
3. Return the total number of actionbar tabs.
    package com.tutorials.viewpagertabsgridview;

    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;

    public class MyAdapter extends FragmentPagerAdapter {

      public MyAdapter(FragmentManager fm) {
        super(fm);
      }

      @Override
      public Fragment getItem(int pos) {
        Bundle info=new Bundle();

        switch (pos) {
        case 0:
          Asia asia=new Asia();
          info.putInt("currentPage", pos++);
          asia.setArguments(info);
          return asia;
        case 1:
          Africa africa=new Africa();
          info.putInt("currentPage", pos++);
          africa.setArguments(info);
          return africa;
        case 2:
          Europe eu=new Europe();
          info.putInt("currentPage", pos++);
          eu.setArguments(info);
          return eu;

        }

        return null;
      }

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

    }

Our MainActivity

This is our main and only activity.

It will host all our fragments.

    package com.tutorials.viewpagertabsgridview;

    import android.app.ActionBar;
    import android.app.ActionBar.Tab;
    import android.app.ActionBar.TabListener;
    import android.app.FragmentTransaction;
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.view.ViewPager;
    import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;

    public class MainActivity extends FragmentActivity {

      ActionBar ab;
      ViewPager vp;

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

            //ACTIONBAR
            ab=getActionBar();
            ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
            ab.setDisplayShowTitleEnabled(true);

            vp=(ViewPager) findViewById(R.id.pager);

            FragmentManager fm=getSupportFragmentManager();

            //CREATE LISTENER
            ViewPager.SimpleOnPageChangeListener listener=new SimpleOnPageChangeListener()
            {
                public void onPageSelected(int position) {

                    ab.setSelectedNavigationItem(position);
                }
                };

                //ASSIGN LISTENER
                vp.setOnPageChangeListener(listener);

                //ADAPTER
                MyAdapter adapter=new MyAdapter(fm);
               vp.setAdapter(adapter);

             //TAB LSITENER
               ActionBar.TabListener tabListener=new TabListener() {

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

          }

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

          }

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

          }
        };
         //CRETAE TABS AND SET LISTENER
        Tab t=ab.newTab().setText("ASIA").setIcon(R.drawable.hourglass).setTabListener(tabListener);
        ab.addTab(t);

        t=ab.newTab().setText("Africa").setIcon(R.drawable.reports).setTabListener(tabListener);
        ab.addTab(t);

        t=ab.newTab().setText("Europe").setIcon(R.drawable.selecter).setTabListener(tabListener);
        ab.addTab(t);

        }

    }

Section 4 : Layouts

These are our layouts.

ActivityMain.xml

  • Add ViewPager in layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        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" >
    
        <android.support.v4.view.ViewPager
    
            android:id="@+id/pager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    
    </RelativeLayout>
    

    Asia Layout

  • Add GridView

     <?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent" >
    
         <GridView
             android:id="@+id/gridView1"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_alignParentTop="true"
             android:numColumns="3" >
         </GridView>
    
     </RelativeLayout>
    

    Africa Layout

-Add GridView

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:numColumns="3" >
        </GridView>

    </RelativeLayout>

Europe Layout

  • Add GridView
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:numColumns="3" >
        </GridView>

    </RelativeLayout>

Good day.