Android - Switch Tabs in TabHost within a Listview by Swipes using GestureDetector

Implementing a tabhost is a great way to add functionality to your app. Sadly, tabhost forces the user to click on the tabs to switch between screens. But thankfully we are programmers and can make our programs do what we want them to do. In this tutorial, Ill show you how to implement a GestureDetector to handle the left and right swipes from user to switch between tabs. Lets start with our XML layout of the main window:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4"
            android:padding="5dp" >

            <com.daish.viewtest.TestListView
                android:id="@+id/custom_list"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
        </FrameLayout>
    </LinearLayout>
</TabHost>

Next we have our main activity. I created a method called switchTabs(boolean direction) to tell tabhost which direction to switch tabs. I also implemented a listener on tabchanged. Once a tab is changed, the listener is fired and I then change the content on listview.

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

public class ViewTestActivity extends TabActivity
{
 private TestListView testListView = null;
 private TabHost tabHost = null;
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  tabHost = getTabHost(); // The activity TabHost
  TabHost.TabSpec spec; // Resusable TabSpec for each tab

  spec = tabHost.newTabSpec("Tab 1 Tag").setIndicator("Tab 1")
    .setContent(R.id.custom_list);
  tabHost.addTab(spec);

  testListView = (TestListView) findViewById(R.id.custom_list);
  
  spec = tabHost.newTabSpec("Tab 2 Tag").setIndicator("Tab 2")
    .setContent(R.id.custom_list);
  tabHost.addTab(spec);

  //Done to make list update itself on a tab change
  tabHost.setOnTabChangedListener(new TabChangeListener());
  tabHost.setCurrentTab(1);
 }
 
 public void switchTabs(boolean direction) 
 {
  if (direction) // true = move left
  {
   if (tabHost.getCurrentTab() == 0)
    tabHost.setCurrentTab(tabHost.getTabWidget().getTabCount() - 1);
   else
    tabHost.setCurrentTab(tabHost.getCurrentTab() - 1);
  }
  else
  // move right
  {
   if (tabHost.getCurrentTab() != (tabHost.getTabWidget().getTabCount() - 1))
    tabHost.setCurrentTab(tabHost.getCurrentTab() + 1);
   else
    tabHost.setCurrentTab(0);
  }
 }

 private class TabChangeListener implements OnTabChangeListener
 {

  @Override
  public void onTabChanged(String tabId)
  {
   testListView.init(tabHost.getCurrentTab());   
  }
  
 }
}

Next we have the heart of the content; the listview. The goal is to allow the user to swipe left and right and our program would switch tabs. Although, we have to make sure we did not remove the functionality of clicking on an item and scrolling up and down on list. On my first attempt, I made an @Override onTouchEvent(MotionEvent event) and I tried to handle the swipes. The problem my implementation had was if the user swiped, the item on the next tab would automatically click after user lifted their finger. As such, I had to find an alternative. This is where GestureDetector came in. This class gave me the ability to analyze the touch event. I kept the original @Override onTouchEvent(MotionEvent event), except I passed the event to the GestureDetector and let the class handle the left and right swipes. If the GestureDetector analysis of the touch event appeared to be anything other than left or right swipes, let ListView handle it (ex. scroll up and down as well as clicks). The result was the functionality I was looking for.

import android.app.AlertDialog;
import android.content.Context;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.GestureDetector.OnGestureListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class TestListView extends ListView
{
 Context context;
 private ArrayAdapter<String> test;
 String[] testItems = {"Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary"};
 String[] anotherTestItems = {"Homer", "Leslie", "Gary","Beaver","Homer", "Leslie", "Gary","Beaver","Homer", "Leslie", "Gary","Beaver","Homer", "Leslie", "Gary","Beaver"};
 
 //If built programmatically
 public TestListView(Context context)
 {
  super(context);
  this.context = context;
 }
 //This example uses this method since being built from XML
 public TestListView(Context context, AttributeSet attrs)
 {
  super(context, attrs);
  this.context = context;
 }
 
 //Build from XML layout 
 public TestListView(Context context, AttributeSet attrs, int defStyle)
 {
  super(context, attrs, defStyle);
  this.context = context;
 }
 
 public void init(int i)
 {
  if(i == 0)
   test = new ArrayAdapter<String>(getContext(),R.layout.row, R.id.label , testItems);
  else
   test = new ArrayAdapter<String>(getContext(),R.layout.row, R.id.label , anotherTestItems);
  setAdapter(test);
  setOnItemClickListener(new ListSelection());
 }
 
 //GestureDetector used to for analyze touch even from user
 private GestureDetector gesture = new GestureDetector(new GestureListener());
 
 //Method is called when ListView detects an onTouchEvent
 @Override
 public boolean onTouchEvent(MotionEvent event)
 {//Sends event to GestureDetector to see if we can use event
  boolean result = gesture.onTouchEvent(event);
  //if result is true, then we need to handle event, not listview
  //false means listview can handle event to pass it on
  if(result)
   return result;
  return super.onTouchEvent(event);
 }
 
 private float startX= 0;
 private float endX = 0;
 //Class which will analyze touch event and determine what user did
 private class GestureListener implements OnGestureListener
 {

  @Override
  public boolean onDown(MotionEvent e)
  {
   return false;
  }

  @Override
  public void onShowPress(MotionEvent e)
  {
  }

  @Override
  public boolean onSingleTapUp(MotionEvent e)
  {
   return false;
  }

  @Override
  public boolean onScroll(MotionEvent e1, MotionEvent e2,
    float distanceX, float distanceY)
  {
   return false;
  }

  @Override
  public void onLongPress(MotionEvent e)
  {
  }

  @Override
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
    float velocityY)
  {
   float x = velocityX < 0 ? -1*velocityX : velocityX;
   float y = velocityY < 0 ? -1*velocityY : velocityY;
   if(x > y)
   {
    System.out.println("Moving" + " " + (startX - endX));
    startX = e1.getX();
    endX = e2.getX();

    if ((startX - endX) < -120)
    {
     ((ViewTestActivity) context).switchTabs(true);
    }
    else if ((startX - endX) > 120)
    {
     ((ViewTestActivity) context).switchTabs(false);
    }
    return true;
   }
   return false;
  }
  
 }
 
 private class ListSelection implements OnItemClickListener
 {

  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position,
    long id)
  {
   AlertDialog.Builder builder = new AlertDialog.Builder(getContext());
   builder.setMessage("You pressed item #" + (position+1));
   builder.setPositiveButton("OK", null);
   builder.show();
  }
  
 }
}

Hope this was helpful. Enjoy!