Saturday, May 5, 2012

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!

Thursday, May 3, 2012

Android - Creating a Tabhost with ListView and Button under ListView

I decided this was worthy of a post since I had a hard time figuring this out. Android has a cool TabActivity which allow us to add tabs to our application. Of course we have to declare an XML file for our main window which includes all the containers and widgets needed to create UI:

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>

        <FrameLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:padding="5dp" >

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="BUTTON UNDER LISTVIEW!" />
        </FrameLayout>
    </LinearLayout>

</TabHost>

The XML layout includes a tabwidget, listview, and a button. The trick here is android:layout_weight="" which indicates which widget will take up portions of the screen. I also added a button which took up another portion. When it comes down to FrameLayouts, you have to indicate the weight to determine how much of the screen it will take up or else some widgets will appear to float infront of another, which is the nature of a framelayout. The problem is Tabhost needs to have a Framelayout for its content of the tabs and this was a way I found to add button. Linear Layout and Relative layout did not work for me. If someone has a better way, please feel free to share.

Here is my Main Activity Class:

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

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

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

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

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

  tabHost.setCurrentTab(1);

 }
}

Here is the Class which extends ListView:

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

public class TestListView extends ListView
{
 private ArrayAdapter<String> test;
 String[] testItems = {"Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary","Larry", "John", "Gary"};
 
 //If built programmatically
 public TestListView(Context context)
 {
  super(context);
  init();
 }
 //This example uses this method since being built from XML
 public TestListView(Context context, AttributeSet attrs)
 {
  super(context, attrs);
  init();
 }
 
 //Build from XML layout 
 public TestListView(Context context, AttributeSet attrs, int defStyle)
 {
  super(context, attrs, defStyle);
  init();
 }
 
 public void init()
 {
  test = new ArrayAdapter<String>(getContext(),R.layout.row, R.id.label , testItems);
  setAdapter(test);
  setOnItemClickListener(new ListSelection());
 }
 
 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();
  }
  
 }
}

Here is the result of code above. Enjoy!