Slide between fragments using ViewPager

Screen slides are transitions between one entire screen to another and are common with UIs
like setup wizards or slideshows. This lesson shows you how to do screen slides with
a ViewPager provided by the support library.
ViewPagers can animate screen slides
automatically. Here's what a screen slide looks like that transitions from
one screen of content to the next:

Create the views

Create a layout file that you'll later use for the content of a fragment. You also need
to define a string for the contents of the fragment. The following example
contains a text view to display some text:

Create the fragment

Create a Fragment class that returns the layout
that you just created in the onCreateView()
method. You can then create instances of this fragment in the parent activity whenever you need a new page to
display to the user:

Add a ViewPager

ViewPagers have built-in swipe gestures to transition
through pages, and they display screen slide animations by default, so you don't need to create
your own animation. ViewPager uses
PagerAdapters as a supply for new pages to display, so the PagerAdapter will use the
fragment class that you created earlier.

Creates a class that extends the FragmentStatePagerAdapter abstract class and implements
the getItem() method to supply
instances of ScreenSlidePageFragment as new pages. The pager adapter also requires that you implement the
getCount() method, which returns the amount of pages the adapter will create (five in the example).

Customize the animation using PageTransformer

To display a different animation from the default screen slide animation, implement the
ViewPager.PageTransformer interface and supply it to
the view pager. The interface exposes a single method, transformPage(). At each point in the screen's transition, this method is called once for each visible page (generally there's only one visible page) and for adjacent pages just off the screen.
For example, if page three is visible and the user drags towards page four,
transformPage() is called
for pages two, three, and four at each step of the gesture.

In your implementation of transformPage(),
you can then create custom slide animations by determining which pages need to be transformed based on the
position of the page on the screen, which is obtained from the position parameter
of the transformPage() method.

The position parameter indicates where a given page is located relative to the center of the screen.
It is a dynamic property that changes as the user scrolls through the pages. When a page fills the screen, its position value is 0.
When a page is drawn just off the right side of the screen, its position value is 1. If the user scrolls halfway between pages one and two, page one has a position of -0.5 and page two has a position of 0.5. Based on the position of the pages on the screen, you can create custom slide animations by setting page properties with methods such as setAlpha(), setTranslationX(), or
setScaleY().

When you have an implementation of a PageTransformer,
call setPageTransformer() with
your implementation to apply your custom animations. For example, if you have a
PageTransformer named
ZoomOutPageTransformer, you can set your custom animations
like this:

Depth page transformer

This page transformer uses the default slide animation for sliding pages
to the left, while using a "depth" animation for sliding pages to the
right. This depth animation fades the page out, and scales it down linearly.

DepthPageTransformer example

During the depth animation, the default animation (a screen slide) still
takes place, so you must counteract the screen slide with a negative X translation.
For example:

Kotlin

view.translationX = -1 * view.width * position

Java

view.setTranslationX(-1 * view.getWidth() * position);

The following example shows how to counteract the default screen slide animation
in a working page transformer: