Android: mock animation like Inshorts news app

Question

swipe up and down the screen, as in news applications ,, campaign news , murmur .

the whole plan is smoothly up / down.
check the application at this link pointers and murmur .

I tried this code ...

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 PageTransformer { @SuppressLint("NewApi") @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)); } } 

In MainActivity.java

 VerticalViewPager Pager2; PagerAdapter adapter; String[] articleTitle; String[] articleName; String[] articleDiscription; OnCreate() Pager2=(VerticalViewPager)findViewById(R.id.pager); // Pass results to ViewPagerAdapter Class adapter = new ViewPagerAdapter(getActivity(), articleTitle, articleName, articleDiscription, btnBack,articleImage); // Binds the Adapter to the ViewPager Pager2.setAdapter(adapter); 

activity_main.xml

 <com.example.flipnews.VerticalViewPager android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/pager" /> 

In my code, simple scrolling up as shown. but I want to create a better animation effect like the above applications. or the phone’s built-in photo gallery effect.

Thanks in advance.

Answer 1

I found a solution after many studies, hope it helps others.

Tip. Set the background color of the presentation pager to enhance the swipe effect.

  private static class VerticalPageTransformer implements PageTransformer { private static 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(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); } } } 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)); } }