Swipe with tab host

Question

I have a TabHost control (not in actionbar), and I want to make the tabs to change when the user swipes the context on each tab (something like whatsapp emoji tabs).
How can I do this?

EDIT
The feel is also important. I want that the contexts should have scroll animations (No matter if the user swipe or if the tab is clicked).

Solution 1

Go through this link http://thepseudocoder.wordpress.com/2011/10/13/android-tabs-viewpager-swipe-able-tabs-ftw/

You can use a gesture detector.

GestureDetector

Detects various gestures and events using the supplied MotionEvents. The GestureDetector.OnGestureListener callback will notify users when a particular motion event has occurred. This class should only be used with MotionEvents reported via touch (don't use for trackball events). To use this class:

1 Create an instance of the GestureDetector for your View In the nTouchEvent(MotionEvent) method ensure you call

2 onTouchEvent(MotionEvent). The methods defined in your callback will be executed when the events occur

This page shows how to recognize a swipe-gesture using the GestureDetector:

http://smartandroidians.blogspot.in/2010/04/swipe-action-and-viewflipper-in-android.html

Solution 2

You can override onTouchEvent:

@Override
public boolean onTouchEvent(MotionEvent touchevent) {
    switch (touchevent.getAction()) {
    // when user first touches the screen to swap
    case MotionEvent.ACTION_DOWN: {
        lastX = touchevent.getX();
        break;
    }
    case MotionEvent.ACTION_UP: {
        float currentX = touchevent.getX();

        // if left to right swipe on screen
        if (lastX < currentX) {

            switchTabs(false);
        }

        // if right to left swipe on screen
        if (lastX > currentX) {
            switchTabs(true);
        }

        break;
    }
    }
    return false;
}

switchTabs method:

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

Solution 3

I used gesture detector... Your Fragment needs to implement OnGestureListener. And off course to initialize a TabHost in onCreateView.

private FragmentTabHost mTabHost; // global in fragment

Here is a code:

private GestureDetectorCompat gDetector; // global in fragment

• in onCreateView

  gDetector = new GestureDetectorCompat(getActivity(), new OnGestureListener() {
  
       @Override
       public boolean onDown(MotionEvent e) {
           return true;
       }
  
       @Override
       public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
           float velocityY) {
           Log.i("motion", "onFling has been called!");
           final int SWIPE_MIN_DISTANCE = 120;
           final int SWIPE_MAX_OFF_PATH = 250;
           final int SWIPE_THRESHOLD_VELOCITY = 200;
           try {
               if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                   return false;
               if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
                   && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                   Log.i("motion", "Right to Left");
                   switchTabs(false);
               } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                   && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
  
                   Log.i("motion", "Left to Right");
                   switchTabs(true);
  
               }
           } catch (Exception e) {
               // nothing
           }
           return false;
       }
  
      @Override
      public void onLongPress(MotionEvent e) {
  
      }
  
      @Override
      public boolean onScroll(MotionEvent e1, MotionEvent e2,
              float distanceX, float distanceY) {
          return false;
      }
  
      @Override
      public void onShowPress(MotionEvent e) {
  
      }
  
      @Override
      public boolean onSingleTapUp(MotionEvent e) {
                      return false;
      }
  });
  
      mTabHost.setOnTouchListener(new View.OnTouchListener() {
      @Override
          public boolean onTouch(View v, MotionEvent event) {
              return gDetector.onTouchEvent(event);
          }
      });
  

• method switchTabs(boolean Direction)

  public void switchTabs(boolean direction) {
  
     Log.w("switch Tabs", "idemo direction");
     if (direction) // true = move left
     {
          if (mTabHost.getCurrentTab() != 0)
          mTabHost.setCurrentTab(mTabHost.getCurrentTab() - 1);
     } else
     // move right
     {
         if (mTabHost.getCurrentTab() != (mTabHost.getTabWidget()
              .getTabCount() - 1))
          mTabHost.setCurrentTab(mTabHost.getCurrentTab() + 1);
  
     }
  
  
  }
  

Hope it helps...

Solution 4

If you have already created a custom activity and view then I would suggest this way:

implement OnGestureListener interface in your current activity and override onfling method.

Implementation completely depends on you.

View more solutions

Comments

[nrofis]

But its not feel the same. If I click on a tab It is not animate the scrolling. How can I do it in correct way. I new in android development.