First Android App | Step 5 | HomeScreen with ViewPager | FragmentPagerAdapter | Action Bar with 3 tabs

Hellos!!

In this post we will discuss the construction of the HomeScreen for our E-Commerce Application. The HomeScreen will have an ActionBar with Menu and 3 tabs which we have implemented through a ViewPager and each of the tabs have been defined as Fragments.

The complete tutorial is available in the following youtube video.

The final result is as follows.

Source Code

activity_home_screen.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.V4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="#ffffff">
    
    
</android.support.V4.view.ViewPager>

fragment_search.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" 
   android:background="#AAE6E6">
   
</RelativeLayout>

fragment_mycart.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:id="@+id/mychecklist"
   android:orientation="vertical" 
   android:background="#00FF33">

</LinearLayout>

fragment_quickorder.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical"
   android:background="#E6BBE6" >

</RelativeLayout>

HomeScreen.java

package com.zing.basket;

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

public class HomeScreen extends FragmentActivity implements ActionBar.TabListener 
{
 
ActionBar bar;
ViewPager viewpager;
FragmentPageAdapter ft;

  
 @Override
 protected void onCreate(Bundle savedInstanceState) 
 {
  super.onCreate(savedInstanceState);
  
  viewpager = new ViewPager(this);
        viewpager.setId(R.id.pager);
        setContentView(viewpager);
        ft = new FragmentPageAdapter(getSupportFragmentManager());
        viewpager.setAdapter(ft);
        
  final ActionBar bar = getActionBar();
        bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        bar.setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
        
        bar.addTab(bar.newTab().setText("Search").setTabListener(this));
        bar.addTab(bar.newTab().setText("Cart").setTabListener(this));
        bar.addTab(bar.newTab().setText("Quick Order").setTabListener(this));
        
        viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
   
   @Override
   public void onPageSelected(int arg0) {
    // TODO Auto-generated method stub
    bar.setSelectedNavigationItem(arg0);
   }
   
   @Override
   public void onPageScrolled(int arg0, float arg1, int arg2) {
    // TODO Auto-generated method stub
    
   }
   
   @Override
   public void onPageScrollStateChanged(int arg0) {
    // TODO Auto-generated method stub
    
   }
  });
        
        
 }
 
 
 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.start_screen, menu);
        return true;
    }
 
 
 @Override
 public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {
  // TODO Auto-generated method stub
  
 }


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


 @Override
 public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
  // TODO Auto-generated method stub
  
 }
}

FragmentPageAdapter.java

package com.zing.basket;

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

public class FragmentPageAdapter extends FragmentPagerAdapter {

 public FragmentPageAdapter(FragmentManager fm) {
  super(fm);
  // TODO Auto-generated constructor stub
 }

 @Override
 public Fragment getItem(int arg0) {
 
  switch (arg0)
  {
  case 0:
    return new Search();
  case 1: 
    return new MyCart();
  case 2:
    return new QuickOrder();
  default:
    break;
  }
  return null;
 }

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

}

Search.java

package com.zing.basket;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Search extends Fragment
{
 View myFragmentView;
 
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
 }
 
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) 
 {
  
  myFragmentView = inflater.inflate(R.layout.fragment_search, container, false);  
     
  return myFragmentView;
 }  
 
}

QuickOrder.java

package com.zing.basket;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class QuickOrder extends Fragment {
 
 View myFragmentView;
 
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
 }
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) 
 {
  myFragmentView = inflater.inflate(R.layout.fragment_quickorder, container, false);
   
  return myFragmentView;
 }
}

MyCart.java

package com.zing.basket;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class MyCart extends Fragment {
 
 View myFragmentView;
 
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
 }
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
 Bundle savedInstanceState) {
   myFragmentView = inflater.inflate(R.layout.fragment_mycart, container, false);
   
   return myFragmentView;
  }
 
}

Remove the commenting of 2 lines of code in StartScreen.java, inside the onPostExecute method of AsyncTask.

Intent intent=new Intent(StartScreen.this,HomeScreen.class);
startActivity(intent);

Remove the commenting of 2 lines of code in CityScreen.java, where we are calling the HomeScreen.class through intent

Intent intent=new Intent(CityScreen.this,HomeScreen.class);
startActivity(intent);

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.zing.basket"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="18" />
 
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.zing.basket.StartScreen"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        
        <activity
            android:name="com.zing.basket.CityScreen"
            android:label="@string/city_screen"
             android:screenOrientation="portrait"
            android:launchMode="singleTask" >
        </activity>
        
        <activity
            android:name="com.zing.basket.HomeScreen"
            android:label="@string/home_screen"
             android:screenOrientation="portrait"
            android:launchMode="singleTask" >
        </activity>
        
        
    </application>
    

</manifest>

res/values/strings.xml - Add this line of code

<string name="home_screen">Home Screen</string>