Home Android ActionBar SwipeTabs ViewPager – Fragments With GridViews

Android ActionBar SwipeTabs ViewPager – Fragments With GridViews

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.

Cheers.

Section 1 : Our Swipeable Fragments

Asia Fragment

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;
  }

}

Africa Fragment

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;
  }

}

Europe Fragment

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;
  }
}

Section 2 : Our FragmentPager Adapter

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);
    // TODO Auto-generated constructor stub
  }

  @Override
  public Fragment getItem(int pos) {
    // TODO Auto-generated method stub
    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;
  }


}

Section 3 : Our MainActivity

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

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>

Section 5 : Results

ViewPager ActionBar Tabs Fragments With GridViews

ViewPager ActionBar Tabs Fragments With GridViews