Android - TabActivity with Transition animation

Question

I\'m trying to add an animation to my TabActivty. For example, when the user select the 2nd tab, I want the new activity comes from the right. When the user select the first

Answer 1

If you like, you can use Android Support Package - http://developer.android.com/sdk/compatibility-library.html

With little effort you can modify your activity to use fragments so your tabs can have transition animations just like the YouTube app. Here is a sample code of how to implement it - http://developer.android.com/sdk/compatibility-library.html

Edit: If you don't want to use support package, maybe this implementation will help

private class MyGestureDetector extends SimpleOnGestureListener {

      private static final int SWIPE_MIN_DISTANCE = 120;
      private static final int SWIPE_MAX_OFF_PATH = 250;
      private static final int SWIPE_THRESHOLD_VELOCITY = 200;

      public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        //get density   
          final DisplayMetrics metrics = getResources().getDisplayMetrics();
          final float density = metrics.density;
       //System.out.println(" in onFling() :: ");
          //off path
          if (Math.abs(e1.getY() - e2.getY()) > density*SWIPE_MAX_OFF_PATH)
              return false;
          //fling from right to left
          if (e1.getX() - e2.getX() > density*SWIPE_MIN_DISTANCE && Math.abs(velocityX) > density*SWIPE_THRESHOLD_VELOCITY) {
              //if the first tab is selected
              if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_info))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(1);
                  currentSelection = tabs.getCurrentTabTag();
              }
              //if the second tab is selected
              else if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_details))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(2);
                  currentSelection = tabs.getCurrentTabTag();
              }
          }
          //fling from left to right
          else if (e2.getX() - e1.getX() > density*SWIPE_MIN_DISTANCE && Math.abs(velocityX) > density*SWIPE_THRESHOLD_VELOCITY) {

              //if the second tab is selected
              if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_details))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(0);
                  currentSelection = tabs.getCurrentTabTag();
              }
              //if the third tab is selected
              else if(currentSelection.equalsIgnoreCase(getString(R.string.tab_details_company))) {
                  //switch to second tab and save current selection
                  tabs.setCurrentTab(1);
                  currentSelection = tabs.getCurrentTabTag();
              }
          }
          return super.onFling(e1, e2, velocityX, velocityY);
      }
}

and then on your tab changed listener just load the appropriate animation since you know which one was selected before the gesture, and the one that we are switching to after.

        @Override
        public void onTabChanged(String tabId) {



            //if the first tab is selected
            if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                //if we switch to second
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                    linearCompany.setAnimation(null);
                }
                //if switch to third
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearDetails.setAnimation(null);
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                }
            }
            //if the second tab is selected
            else if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                //if we switch to first
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                    linearCompany.setAnimation(null);
                }
                //if switch to third
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                    linearInfo.setAnimation(null);
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_out));
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_left_in));
                }
            }
            //if the third tab is selected
            else if(currentSelection.equalsIgnoreCase(getResources().getString(R.string.tab_details_company))) {
                //if we switch to first
                if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_info))) {
                    linearInfo.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearDetails.setAnimation(null);
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                }
                //if switch to second
                else if(tabId.equalsIgnoreCase(getResources().getString(R.string.tab_details_details))) {
                    linearInfo.setAnimation(null);
                    linearDetails.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_in));
                    linearCompany.setAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.push_right_out));
                }
            }

            currentSelection = tabId;
        }
    };

Also you need to catch the gesture by overriding the onTouchListener with you custom gesture detector (and maybe account for different screen density when determining if a gesture is a swipe action)

Sorry for the long answer, but I hope it helps :)