Challange: Custom animation ViewPager. Change the height of selected items (View fold)

Question

I'm currently working on custom animations between switch pages in ViewPager. When I move to the left, the "View" moves to the left, and from below its front view comes forward. I would like to make a view that moves to the left (which I command) to shrink, as in the following images:

In the second and third images, I did not imagine a new view facing the front, but I think it was not necessary. Do you know how to change the code?

I would like to change the height of TableLayout, RelativeLayout and FrameLayout and keep the height of both TextViews. Also I would have to change the X-position of the whole view.

I look forward to your creative answers (code). Below I add my animation code.

import android.view.View; import android.widget.RelativeLayout; import android.annotation.SuppressLint; import android.support.v4.view.ViewPager.PageTransformer; public class DepthPageTransformer implements PageTransformer { private static float MIN_SCALE = 0.75f; @SuppressLint("NewApi") public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); //float scaleFactor = (1 - Math.abs(position)); //WHAT TO PUT HERE TO ARCHIVE MY GOAL?? //This is how I can get particular layouts: // RelativeLayout relativeLayout = (RelativeLayout) view.findViewById(R.id.fragment_object_canvas_RelativeLayout1); //relativeLayout.setScaleX(scaleFactor); //relativeLayout.setScaleY(scaleFactor); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); //view.setRotation(1 - (position*360)); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } } 

UPDATE:

I can manipulate the height of the whole view (now I can only do this) with the following code:

  LinearLayout relativeLayout = (LinearLayout) view.findViewById(R.id.fragment_object_canvas_linearLayout1); relativeLayout.setLayoutParams(new FrameLayout.LayoutParams(relativeLayout.getWidth(), NEW_HEIGHT_HERE))); 

However, I'm not sure what I should put in the NEW_HEIGHT_HERE variable so that it works properly ...

Answer 1

try to work with the variable float position. Get the height of your layout and ...:

 relativeLayout.setLayoutParams(....,position*height+height) 

Answer 2

You seem to insist that people send the original code, but why reinvent the wheel? This library has tons of great animations for ViewPager, including very similar ones to what you seem to be requesting.

https://github.com/jfeinstein10/JazzyViewPager

JazzyViewPager - An easy-to-use ViewPager that adds an amazing set of custom animations. Just change ViewPagers to JazzyViewPagers and you will go well!

---

 public enum TransitionEffect { Standard, Tablet, CubeIn, CubeOut, Flip, Stack, ZoomIn, ZoomOut, RotateUp, RotateDown, Accordion } 

You can select your animation by calling

 private JazzyViewPager mJazzy; /* ... */ mJazzy.setTransitionEffect(TransitionEffect.*);