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.
Related
I wanted to make a Vertical ViewPager looklike inshorts application.
I have tried several solutions found on Stack Overflow and in Github.
All of them have the same way of implementation of code, and all of them have the same lagging issue while scrolling up and down(vertical scroll), you can see in the video, but the design implementation is same as inshorts.
The link which I have tried are,
1) VerticalViewPager
2) DirectionViewPager
3) Github Repos
I have also tried for mFlingDistance,mMinimumVelocity etc from android's Viewpager class for increasing fling in Viewpager. But with no luck of making it working.
Below is my 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);
}
/**
* 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));
}
}
And using VerticaPageTransformer class for page transition.
class VerticalPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#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 <= 0) { // [-1,0]
// Use the default slide transition when moving to the left 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]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(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);
}
}
}
The one that worked for me was of castorflex solution for smooth scrolling, but when I apply a PageTransformer to castorflex solution, instead of scrolling vertically is scroll diagonally.You can see the reference video here.
I have also tried with ViewPager2 and with RecyclerView(with SnapHelper) but with viewpager2, I am getting the same diagonal issue. And with Snaphelper, I am unable to provide a page effect like inshorts(see the videos). May be, it will be possible by LinearLayoutManager of RecyclerView, as I have seen here. But failed to convert my page animation.
So anyone can give me any hint, or any idea about
1) How to make smooth scrolling with above approach? or
2) How to make vertical page transition from below approach, instead of diagonal? or
3) Or any other way if you people have.
Thanks in advance
You can see Castorflex's VerticalViewPager class, and using the same VerticlePageTransform class for page transformation
Check this Github Repo https://github.com/dipanshukr/Viewpager-Transformation
SampleActivity.java
private void initViewPager() {
VerticalViewPager viewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
//viewPager.setPageTransformer(false, new ZoomOutTransformer());
//viewPager.setPageTransformer(true, new StackTransformer());
String title = "ContentFragment";
viewPager.setAdapter(new ContentFragmentAdapter.Holder(getSupportFragmentManager())
.add(ContentFragment.newInstance(title, 1))
.add(ContentFragment.newInstance(title, 2))
.add(ContentFragment.newInstance(title, 3))
.add(ContentFragment.newInstance(title, 4))
.add(ContentFragment.newInstance(title, 5))
.set());
// If you setting other scroll mode,
// the scrolled fade is shown from either side of display.
viewPager.setOverScrollMode(View.OVER_SCROLL_NEVER);
}
VerticalViewPager.java
public class VerticalViewPager extends ViewPager {
public VerticalViewPager(Context context) {
this(context, null);
}
public VerticalViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
setPageTransformer(false, new DefaultTransformer());
}
private MotionEvent swapTouchEvent(MotionEvent event) {
float width = getWidth();
float height = getHeight();
float swappedX = (event.getY() / height) * width;
float swappedY = (event.getX() / width) * height;
event.setLocation(swappedX, swappedY);
return event;
}
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
boolean intercept = super.onInterceptTouchEvent(swapTouchEvent(event));
//If not intercept, touch event should not be swapped.
swapTouchEvent(event);
return intercept;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapTouchEvent(ev));
}
}
DefaultTransformer.java
public class DefaultTransformer implements ViewPager.PageTransformer {
#Override
public void transformPage(View view, float position) {
float alpha = 0;
if (0 <= position && position <= 1) {
alpha = 1 - position;
} else if (-1 < position && position < 0) {
alpha = position + 1;
}
view.setAlpha(alpha);
view.setTranslationX(view.getWidth() * -position);
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
}
}
I need to implement a viewpager that can do both horizontal and vertical paging. If the user switches the page vertically, a vertical PageTransformer should carry out the animation. Otherwise, the regular animation should happen.
I found a couple of libraries that attempt to solve this problem, but they run into problems when one of the views has a ScrollView inside.
If it's possible, I would like to implement it without third party libaries.
So far, all I have is the code for a vertical viewpager, but I can't figure out how to add the horizontal functionality as well:
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);
}
/**
* 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));
}
}
Just for reference, this is the my vertical PageTransformer:
public 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);
}
}
}
Any help would be appreciated
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 :)
In vertical viewpager, while swipe in vertically current screen are move to left side but i have to move my second view over the first view (i.e)first view should be fit to the screen.I had implement the vertical stack transformer but its not working fine to me. Can you anyone help me to fix this issue.
Thanks in advance.
This is viewpager I had used.
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() {
setPageTransformer(true, new VerticalPageTransformer());
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 <= 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]
// Counteract the default slide transition
view.setTranslationY(position < 0 ? 0f : -view.getHeight() * position);
} 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) {
try {
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
} catch (Exception e) {
e.printStackTrace();
}
return false;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
return super.onTouchEvent(swapXY(ev));
}
}
Here my code I had modified.
#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 <= 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]
// Counteract the default slide transition
view.setTranslationY(position < 0 ? 0f : -view.getHeight() * position);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
I am trying to do some animation in the page swipe in view pager by overriding the transformPage() method, such that when I swipe from right to left the new page (page coming from the right side) should appear below the previous page as soon as the animation starts and then the previous page should slide to the left side over the new page.
When I swipe from left to right the new page should directly slide over the previous page and covers it completely. But I am not able to achieve it.
I have tried the following:-
if(position > 0 && position < 1)
{
int pageWidth = page.getWidth();
float translateValue = (-position * pageWidth);
if(translateValue < pageWidth)
{
translationX = translateValue;
}
else
{
translationX = 0;
}
}
else
{
alpha = 1;
scale = 1;
translationX = 0;
}
Please provide some suggestions. Thanks
This should work like you want, you just have to put it in your PagerTransformer class:
private static final float MIN_SCALE_DEPTH = 0.75f;
#Override
public void transformPage(View page, float position) {
final float alpha;
final float scale;
final float translationX;
if (position > 0 && position < 1) {
alpha = (1 - position);
scale = MIN_SCALE_DEPTH + (1 - MIN_SCALE_DEPTH) * (1 - Math.abs(position));
translationX = (page.getWidth() * -position);
} else {
alpha = 1;
scale = 1;
translationX = 0;
}
page.setAlpha(alpha);
page.setTranslationX(translationX);
page.setScaleX(scale);
page.setScaleY(scale);