Menu like SKOUT and Sliding from One View to Another by touch in Android

Question

I want to implement a sliding Menu like FB or G+ app and I have found some sample code from FB Menu Demo and https://github.com/jfeinstein10/SlidingMenu

These are good to begin with, But I need something extra from them. Like here it works only on the click of the menu button but I want to move it by gestures as well. I want to have the behavior that there is a center view and on moving that center towards the right, one view will appear and on moving that towards left, the menu will appear. Say there are three views A,B,C and when I swipe C towards left then A appear and when I swipe C towards right then B appear. C is in the middle of A and B.

1.Middle view moves towards right

Move towards right

2.Move the middle view towards left side

Move towards left

Now my question is: What are the best practices to develop the views like that. I have heard from someone that I should use fragments and View pager as well. So how can I develop this? Is there any sample implementation done by anyone ? Any help and suggestions are appreciated.

For reference see this app which uses this type of sliding b/w views Skout app

Answer 1

The simplest solution may be to use android-undergarment, which has bezel swiping built in, based on the project README:

The user will also be able to control the drawer by bezel swiping from the left side of the screen to open the drawer and doing the same from the right to close it. If you want to prevent this touch functionality, you can call setDrawerEnabled(false).

Answer 2

You can simply use TranslateAnimationon the view which you wish to move along with a pop up for fade and another pop up window for you menu. I have implemented it in my application, and it works like a charm.

Code:

public class SlidingOptionsMenuActivity extends Activity {      /**      * Signifies that the menu is already visible      */     boolean alreadyShowing = false;     /**      * Width of the current window      */     private int windowWidth;     /**      * Height of the current window      */     private int windowHeight;     /**      * Reference of the {@link PopupWindow} which dims the screen      */     private PopupWindow fadePopup;     /**      * The translate animation      */     private Animation ta;     /**      * The view which needs to be translated      */     private RelativeLayout baseView;     /**      * Reference of the {@link LayoutInflater}      */     LayoutInflater inflater;      /*      * (non-Javadoc)      *       * @see android.app.Activity#onCreate(android.os.Bundle)      */     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.main);          Display display = getWindowManager().getDefaultDisplay();         windowWidth = display.getWidth();         windowHeight = display.getHeight();         inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);          findViewById(R.id.btnOptions).setOnClickListener(new OnClickListener() {              /*              * (non-Javadoc)              *               * @see android.view.View.OnClickListener#onClick(android.view.View)              */             @Override             public void onClick(View v) {                 if(!alreadyShowing){                     alreadyShowing = true;                     openSlidingMenu();                 }             }         });     }       /**      * Fades the entire screen, gives a dim background      */     private void showFadePopup() {         final View layout = inflater.inflate(R.layout.fadepopup, (ViewGroup) findViewById(R.id.fadePopup));         fadePopup = new PopupWindow(layout, windowWidth, windowHeight, false);         fadePopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);     }      /**      * Opens the sliding Menu      */     private void openSlidingMenu() {         showFadePopup();         // The amount of view which needs to be moved out. equivalent to the         // width of the menu         int width = (int) (windowWidth * 0.6f);         translateView((float) (width));         int height = LayoutParams.FILL_PARENT;         // creating a popup         final View layout = inflater.inflate(R.layout.option_popup_layout,(ViewGroup) findViewById(R.id.popup_element));          final PopupWindow optionsPopup = new PopupWindow(layout, width, height, true);         optionsPopup.setBackgroundDrawable(new PaintDrawable());          optionsPopup.showAtLocation(layout, Gravity.NO_GRAVITY, 0, 0);          optionsPopup.setOnDismissListener(new PopupWindow.OnDismissListener() {              public void onDismiss() {                 //Removing the fade effect                 fadePopup.dismiss();                     //to clear the previous animation transition in                 cleanUp();                 //move the view out                 translateView(0);                 //to clear the latest animation transition out                 cleanUp();                 //resetting the variable                 alreadyShowing = false;             }         });     }      /**      * This method is responsible for view translation. It applies a translation      * animation on the root view of the activity      *       * @param right The position to translate to      */     private void translateView(float right) {          ta = new TranslateAnimation(0f, right, 0f, 0f);         ta.setDuration(300);         ta.setFillEnabled(true);         ta.setFillAfter(true);          baseView = (RelativeLayout) findViewById(R.id.baseView);         baseView.startAnimation(ta);         baseView.setVisibility(View.VISIBLE);     }      /**      * Basic cleanup to avoid memory issues. Not everything is release after      * animation, so to immediately release it doing it manually      */     private void cleanUp(){         if (null != baseView) {             baseView.clearAnimation();             baseView = null;         }         if (null != ta) {             ta.cancel();             ta = null;         }         fadePopup = null;     } } //END of Class //END of file 

Hope this would help.