Skip to content

Latest commit

 

History

History
177 lines (132 loc) · 6.4 KB

README.md

File metadata and controls

177 lines (132 loc) · 6.4 KB

Reside Menu

In this project I implemented a menu using view pager. To implement this menu , i use view pager. First and third page are the menu page and second page is our content frame.

When we slide our page , say left to right. when first menu appear. What i have done is.

  • Set the page translation of first page (one with negative position offset) to 0.
  • Resize The content page.
  • Shift the content page to align to parent right.

PageTransformer is the interface which will control all our transformation.

public class HorizontalReside implements ViewPager.PageTransformer {
   @Override
   public void transformPage(View page, float position) {

       //Hiding those pages which are way off-screen to the left or to the right.
       if (position < -1) {
           page.setAlpha(0);
       } else if (position > 1) {
           page.setAlpha(0);
       } else {
           page.setAlpha(1);
       }


       if (page.getId() == R.id.menuFirst){
           //putting fragment to the start of the screen
           page.setTranslationX(-position*page.getWidth());
       }
       else if (page.getId() == R.id.contentPage){
           //when we swipe to left this code applied
           if (position <= 0){
              //for each transformation CODE is mentioned below
           }
           //when we swipe to right this code applied
           else if (position > 0){
             //for each transformation CODE is mentioned below
           }
       }
       else if (page.getId() == R.id.menuSecond){
           //putting fragment to the start of the screen
           page.setTranslationX(-position*page.getWidth());
       }
   }
}

In above code R.id.menuFirst & R.id.menuSecond are left and right menu fragments respectively, so we set them to the start of the screen.

R.id.contentPage is the fragment which is always visible to user when the user starts the app. For this we have to code the animation When the user swipe to left and When the user swipe to right. Also to show R.id.contentPage on top set this fragment parent layout elevation by doing this the fragment comes over the first frgament.

android:elevation="10dp"

To set R.id.contentPage is always shown to user whenever user starts the app you can use this

viewPager.setCurrentItem(1);

You can download the latest sample APK from Google Play store:

Android app on Google Play

Horizontal Reside Menu

Horizontal Reside Menu GIF

           if (position <= 0){

               //first we do scaling to 50%
               float scale = Math.max(0.6f,1-Math.abs(position));
               page.setScaleX(scale);
               page.setScaleY(scale);

               float deltaWidth = page.getWidth() - scale*page.getWidth();

               //place the fragment to the start of the screen and move the fragment to left
               page.setTranslationX(-position*page.getWidth() - deltaWidth/2);

           }
           //when we swipe to right this code applied
           else if (position > 0){

               //first we do scaling to 50%
               float scale = Math.max(0.6f,1-Math.abs(position));
               page.setScaleX(scale);
               page.setScaleY(scale);

               float deltaWidth = page.getWidth() - scale*page.getWidth();

               //place the fragment to the start of the screen and move the fragment to right
               page.setTranslationX(-position*page.getWidth() + deltaWidth/2);

           }

Vertical Reside Menu

Vertical Reside Menu GIF

            //when we swipe to left this code applied
            if (position <= 0){

                //first we do scaling to 50%
                float scale = Math.max(0.6f,1-Math.abs(position));
                page.setScaleX(scale);
                page.setScaleY(scale);

                float deltaHeight = page.getHeight() - scale*page.getHeight();

                //move the fragment to top
                page.setTranslationY(+deltaHeight/2);

            }
            //when we swipe to right this code applied
            else if (position > 0){

                //first we do scaling to 50%
                float scale = Math.max(0.6f,1-Math.abs(position));
                page.setScaleX(scale);
                page.setScaleY(scale);

                float deltaHeight = page.getHeight() - scale*page.getHeight();

                //move the fragment to bottom
                page.setTranslationY(-deltaHeight/2);

            }

Corner Reside Menu

Corner Reside Menu GIF

            //when we swipe to left this code applied
            if (position <= 0) {

                //first we do scaling to 50%
                float scale = Math.max(0.5f, 1 - Math.abs(position));
                page.setScaleX(scale);
                page.setScaleY(scale);

                float deltaHeight = page.getHeight() - scale * page.getHeight();
                float deltaWidth = page.getWidth() - scale * page.getWidth();

                //move the fragment to top
                page.setTranslationY(+deltaHeight / 2);
                //place the fragment to the start of the screen and move the fragment to left
                page.setTranslationX(-position * page.getWidth() - deltaWidth / 2);

            }
            //when we swipe to right this code applied
            else if (position > 0) {

                //first we do scaling to 50%
                float scale = Math.max(0.5f, 1 - Math.abs(position));
                page.setScaleX(scale);
                page.setScaleY(scale);

                float deltaHeight = page.getHeight() - scale * page.getHeight();
                float deltaWidth = page.getWidth() - scale * page.getWidth();

                //move the fragment to bottom
                page.setTranslationY(-deltaHeight / 2);
                //place the fragment to the start of the screen and move the fragment to right
                page.setTranslationX(-position * page.getWidth() + deltaWidth / 2);

            }