Three sliding panes - the Middle pane above Left and Right panes

Question

I am trying to have the same navigation style as Viber's interface (the discussion page), without using a third-part Library such as SlidingMenu.

I thought that they have used SlidingPaneLayout to achieve this nice effect, but when I tried to code it, I noticed that the last pane is always over the second.

My questions :

Is this really a SlidingPaneLayout ?
If yes how to achieve this please ?
If no, is there an android native way to do the same thing ?!

Left Pane

Right Pane

If you don't want to use any third party library then you can create your custom screen and then apply animation like slider to it. — InnocentKiller, Mar 28 '14 at 09:52
thanks @InnocentKiller. Can you be more precise, how to apply such animation ??! — S.Thiongane, Mar 28 '14 at 09:57

InnocentKiller · Answer 1 · 2014-03-28T10:18:41.680

First of all declare this all variable in your Class

/** Sliding Menu */
    boolean alreadyShowing = false;
    private int windowWidth;
    private Animation animationClasses;
    private RelativeLayout classesSlider;
    LayoutInflater layoutInflaterClasses;

then inside onCreate method declare this, this will help you to get screen's height and width

Display display = getWindowManager().getDefaultDisplay();
        windowWidth = display.getWidth();
        display.getHeight();
        layoutInflaterClasses = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

and then any of your button or image where by clicking you want to open slider put below code.

findViewById(R.id.slidermenu).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!alreadyShowing) {
                    alreadyShowing = true;
                    openSlidingMenu();
                }
            }
        });

and then outside the onCreate declare openSlidingMenu() as below.

private void openSlidingMenu() {
        // showFadePopup();
        int width = (int) (windowWidth * 0.8f);
        translateView((float) (width));
        @SuppressWarnings("deprecation")
        int height = LayoutParams.FILL_PARENT;
        // creating a popup
        final View layout = layoutInflaterClasses.inflate(
                R.layout.option_popup_layout,
                (ViewGroup) findViewById(R.id.popup_element));

        ImageView imageViewassignment = (ImageView) layout
                .findViewById(R.id.assignment);
        imageViewassignment.setOnClickListener(this);

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() {
                // 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;
            }
        });
    }

just replace

final View layout = layoutInflaterClasses.inflate(
                    R.layout.option_popup_layout,
                    (ViewGroup) findViewById(R.id.popup_element));

this above code with your custom screen XML name and by it's ID. and here is other methos's which you need.

private void translateView(float right) {
        animationClasses = new TranslateAnimation(0f, right, 0f, 0f);
        animationClasses.setDuration(100);
        animationClasses.setFillEnabled(true);
        animationClasses.setFillAfter(true);

        classesSlider = (RelativeLayout) findViewById(R.id.classes_slider);
        classesSlider.startAnimation(animationClasses);
        classesSlider.setVisibility(View.VISIBLE);
    }

    private void cleanUp() {
        if (null != classesSlider) {
            classesSlider.clearAnimation();
            classesSlider = null;
        }
        if (null != animationClasses) {
            animationClasses.cancel();
            animationClasses = null;
        }
    }

remember here animationClasses = new TranslateAnimation(0f, right, 0f, 0f); you can play with this parameter for some different effect and also do not forget to change this line's ID with your current screen's ID like for example check below id

classesSlider = (RelativeLayout) findViewById(R.id.classes_slider);

here you need to replace this ID with your Current java screen's XML file's ID.

Hope this will help you.

Three sliding panes - the Middle pane above Left and Right panes

1 Answers1