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

Solution 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).

Solution 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.

Solution 3

Another open source library I've found that's been very good is SlidingMenu. It should suit your needs as you can open and close the drawer by a "Menu" click and by bezel swiping. I found integrating this along with an Actionbar library like ActionBarSherlock or johannilsson's android-actionbar library is simply a matter of changing a line or two of code in the library project. The Readme for the SlidingMenu library explains how to integrate with the ABSherlock library.

One thing worth noting is that the SlidingMenu example project demonstrates a number of different drawer open-close animations. These are some of the best animations I've seen for this style of menu/navigation.