I am implementing a ViewPager for vertical scrolling. I have used ViewPager.PageTransformer for animation.
Below is my code.
public class VerticalPageTransformer implements ViewPager.PageTransformer {
private float MIN_SCALE = 1f;
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.setAlpha(1);
//view.setTranslationX(1);
view.setScaleX(1);
view.setScaleY(1);
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
view.setTranslationX(-1 * view.getWidth() * position);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
view.setTranslationX(-1 * view.getWidth() * position);
// 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);
}
}
}
I want to make animation like this
Related
I am using a vertical swipe in view pager. and am using a tranform animation for it. but when i swipe vertically animation happens horizontally. Can any one show me the error in this code
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
use this code
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.setAlpha(1);
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
replace [-1,0] code
I am trying to build a component where cards can be swiped in all the direction and can be brought back. Which translates to following:
Left to right: bring back the previous card
Right to left: bring new card underneath
Top to bottom: bring back the previous card
Bottom to top: bring new card underneath
I decided that the best way to move forward will be if I extend Viewpager and combine both vertical and horizontal Viewpager implementation. It will solve all the animation related issues as well as fragment management work.
Eventually, I was able to create what I wanted but it is now stuck at last problem. When the Viewpager is swiped vertically it has the marked zone which behaves fluidly but the dark zone does not swipe correctly(image below). For vertical swipe implementation, I have used the touch coordinate swapping approach and mapped the coordinates. I have tried to look at the mapping for swapping and can't see where am I going wrong.
It will be a great help if someone can point me in the right direction:
Here are the code pieces:
AllDirectionViewPager.java
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
public class AllDirectionViewPager extends ViewPager {
public static String TAG = "AllDirectionViewPager";
private float startX, startY, mHeight, mWidth;
int DIRECTION_LOCKING_THRESHOLD_X=5, DIRECTION_LOCKING_THRESHOLD_Y=5, mDirection=-1;
boolean directionLocked=false;
VDepthPageTransformer mVerticalTransformer;
HDepthPageTransformer mHorizontalTransformer;
public AllDirectionViewPager(Context context) {
super(context);
init();
}
public AllDirectionViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setOverScrollMode(OVER_SCROLL_NEVER);
mVerticalTransformer = new VDepthPageTransformer();
mHorizontalTransformer = new HDepthPageTransformer();
}
/**
* Swaps the X and Y coordinates of touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
Log.i(TAG, "swap xy called. init: "+ev.getX()+","+ev.getY()+" final: "+newX+","+newY+" with height: "+height);
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = false;
int direction;
direction = getDirection(ev);
Log.i(TAG, "viewpager intercepted: "+mDirection);
if(mDirection==0) {
intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
} else if (mDirection==1) {
intercepted = super.onInterceptTouchEvent(ev);
}
return intercepted;
}
//1: Left-Right; 0: UP-DOWN; -1: continuing
int getDirection(MotionEvent ev) {
float dirX=0, dirY=0;
boolean continuing = false;
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = ev.getX();
startY = ev.getY();
mDirection = -1;
directionLocked = false;
Log.d(TAG, "swipe start");
break;
case MotionEvent.ACTION_MOVE:
float endX = ev.getX();
float endY = ev.getY();
Log.d(TAG, "direction locked: "+directionLocked+" diffY: "+(endY - startY)+ " diffX: "+(endX - startX));
if (!directionLocked && ((Math.abs(endX - startX)>DIRECTION_LOCKING_THRESHOLD_X)||(Math.abs(endY - startY) > DIRECTION_LOCKING_THRESHOLD_Y))) {
dirX = (endX - startX) / getHeight();
dirY = (endY - startY) / getWidth();
directionLocked = true;
if (Math.abs(dirX) < Math.abs(dirY)) {
mDirection = 0;
this.setPageTransformer(true, mVerticalTransformer);
Log.d(TAG, "Vertical set");
}
else if (Math.abs(dirX) > Math.abs(dirY)) {
mDirection = 1;
this.setPageTransformer(true, mHorizontalTransformer);
Log.d(TAG, "Horizontal set");
}
else {
mDirection = -1;
directionLocked = false;
Log.d(TAG, "nothing found");
}
}
break;
case MotionEvent.ACTION_UP:
Log.d(TAG, "swipe done");
directionLocked = false;
break;
default:
continuing = true;
}
if(continuing)
return -1;
return -1;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
int direction = getDirection(ev);
Log.i(TAG, "viewpager touch: "+mDirection);
Log.i(TAG, "Touch coords: "+ev.getX()+","+ev.getY());
if(mDirection==0) {
return super.onTouchEvent(swapXY(ev));
}else/* if(mDirection==1) */{
return super.onTouchEvent(ev);
}
// return false;
}
}
HDepthPageTransformer.java
import android.support.v4.view.ViewPager;
import android.view.View;
public class HDepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
VDepthPageTransformer.java
import android.support.v4.view.ViewPager;
import android.view.View;
public class VDepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
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 top page
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
Image not to scale to show problem area (Sorry for bad artwork):
The depth page transformers are sourced from the android developers website.
Used some part from here for vertical scrolling: Android: Vertical ViewPager
As no one was answering this, I dived into the android source code of viewpager and realized that although the observation is bizarre, the reason is incorrect initialization.
Because onInterceptTouchEvent is fired before any drag actually occurs(ie before onTouchEvent). It was important to initialize the process correctly before lending control to onTouchEvent. That is all one needs to do in the above code. Hopefully, soon I'll post a library for the same over here :) but if someone needs it before that, just leave a comment.
I am very new to android ,i trying to implement vertical view pager with zoom out page transformer my vertical view pager working fine when i come for zoomout page transformer it will scroll horizontally ,it was not scrolling vertically
my vertical view pager class
VerticalViewPager.class
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
super(context);
init();
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
// The majority of the magic happens here
setPageTransformer(true, new VerticalPageTransformer());
// The easiest way to get rid of the overscroll drawing that happens on the left and right
setOverScrollMode(OVER_SCROLL_NEVER);
}
private class VerticalPageTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev){
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
my zoomout animation class
AnimationViewPager.class
public class AnimationViewPager implements VerticalViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
here my sample image i am trying to like this,please any one help me how to get this
firstly use this lib. it's the most closet to the out of box one ,
link given below
github.com/castorflex/VerticalViewPager
then create a new class
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
in your mainactivity class, set the animation on verticalviewpager class like this
verticalViewPager=(VerticalViewPager)findViewById(R.id.verticalview);
verticalViewPager.setPageTransformer(false,new DepthPageTransformer());
verticalViewPager.setAdapter(pager);
that's it, thank you and please rate my answer :)
I can't really figure out the math to do smooth transition for the following design. Any help would be greatly appreciated :).
During transition, the pages are jumping up and down but I would like them to be smooth instead.
Design
Transition
Relavent ViewPage code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
viewPager.setOffscreenPageLimit(3);
viewPager.setPageMargin(100);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(-pageHeight / 10);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
});
}
Note: 'transformPos' is used to address this bug - https://code.google.com/p/android/issues/detail?id=64046
My ViewPager
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="260dp"
android:layout_centerInParent="true"
android:clipToPadding="false"
android:paddingLeft="80dp"
android:paddingRight="80dp"/>
Full Source - https://github.com/krishnaraj/ViewPagerSample
Try this
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
int max = -pageHeight / 10;
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(max * (1-Math.abs(transformPos)));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
});
Change your if to:
float upTranslation = -pageHeight / 10f;
if (transformPos < -1) {// [-Infinity,-1)
page.setTranslationY(0);
} else if (transformPos < 0) { // [-1,0)
float translationY = upTranslation * (transformPos + 1f);
page.setTranslationY(translationY);
} else if (transformPos == 0) { // 0
page.setTranslationY(upTranslation);
} else if (transformPos <= 1) { // (0,1]
float translationY = upTranslation * (1f - transformPos);
page.setTranslationY(translationY);
} else { // (1,+Infinity]
page.setTranslationY(0);
}
If you really not need the pageTransformer, use below code
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
if(position==1){
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(-pageHeight / 10);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
}
});
and try again...
I implemented a viewpager with a DepthPageTransformer , in pages I have some inputs ( radio , check boxs , select options ... ). It works fine except one wired bug: Sometimes when I click on position(x,y) on a page P1 the input in that position of page P2 gets triggered.
P1:
P2( the one after P1):
Now when I click on this position on page P1 :
I get the select options displayed of page P2:
It's similar to z-index problem in web development.
The code of the DepthPage Transformer is the same as in the documentation : http://developer.android.com/training/animation/screen-slide.html#pagetransformer.
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#Override
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
Any idea on how to solve this overlapping problem ?
Try this:
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#Override
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.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
// -------- THIS LINE ---
view.bringToFront();
// -------- THIS LINE ---
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// 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);
}
}
}
You just need to reverse draw order:
mPager.setPageTransformer(true, new DepthPageTransformer());
In any case you can play with code sample here
Other solution is use OnPageChangeListener:
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
#Override public void onPageSelected(final int position) {
pager.postDelayed(new Runnable() {
#Override
public void run() {
pagerAdapter.getItem(position).getView().bringToFront();
}
}, 300);
}
#Override public void onPageScrollStateChanged(int state) { }
});
is more efficient.