In this post i am gonna show you some ViewPager transformations animation. Animation in view pager is implemented using PageTransformer interface which is called whenever we slide view pager. It is called twice for every slide event, because atmost two pages are visible on the screen.
Recommended articles :
- App Monetization – Major Strategies and Tips to Perform
- Android DebugKit : Easy way to debug Android Apps
- Add Bottom Nav Bar Android Library
- How to Create Reddit like Android Kotlin app Step by Step
- Create Android Topbar Menu with Guillotine animation
The position for first page is between (-1,0) and second page is (0,1). In the idle state , 0 being the position of the page we are currenting viewing.
Why use dependencies when you create your own ViewPager Transformations Animation ?
By implementing this you can achieve these amazing transformations for Viewpager by your own and also you can create your own transformations and name them as you wish.
Demo Video
Download ViewPager Transformations Animation
List of Transformations
Here is the list of transformations which you can check by clicking them :
Depth Transformation
Hello guys here i will tell you how you can apply Depth Transformation on Viewpager.
See this : Creative View Pager Android Animation
First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.
public class DepthTransformation implements ViewPager.PageTransformer{
@Override
public void transformPage(View page, float position) {
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0){ // [-1,0]
page.setAlpha(1);
page.setTranslationX(0);
page.setScaleX(1);
page.setScaleY(1);
}
else if (position <= 1){ // (0,1]
page.setTranslationX(-position*page.getWidth());
page.setAlpha(1-Math.abs(position));
page.setScaleX(1-Math.abs(position));
page.setScaleY(1-Math.abs(position));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Now creating object of your transformation class
DepthTransformation depthTransformation = new DepthTransformation();
After doing this you just set your transformation to view pager
ViewPager viewPager.setPageTransformer(true, DepthTransformation);
Zoom Out Transformation
Have you use this : Infinite Cycle ViewPager
public class ZoomOutTransformation implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.65f;
private static final float MIN_ALPHA = 0.3f;
@Override
public void transformPage(View page, float position) {
if (position <-1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <=1){ // [-1,1]
page.setScaleX(Math.max(MIN_SCALE,1-Math.abs(position)));
page.setScaleY(Math.max(MIN_SCALE,1-Math.abs(position)));
page.setAlpha(Math.max(MIN_ALPHA,1-Math.abs(position)));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Clock Spin Transformation
Hello guys here i will tell you how you can apply Clock Spin Transformation on Viewpager.
See this too : HollyViewPager – Android Navigation Animation
First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.
public class Clock_SpinTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position * page.getWidth());
if (Math.abs(position) <= 0.5) {
page.setVisibility(View.VISIBLE);
page.setScaleX(1 - Math.abs(position));
page.setScaleY(1 - Math.abs(position));
} else if (Math.abs(position) > 0.5) {
page.setVisibility(View.GONE);
}
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0) { // [-1,0]
page.setAlpha(1);
page.setRotation(360 * Math.abs(position));
}
else if (position <= 1) { // (0,1]
page.setAlpha(1);
page.setRotation(-360 * Math.abs(position));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Now creating object of your transformation class
Clock_SpinTransformation clockSpinTransformation = new Clock_SpinTransformation();
After doing this you just set your transformation to view pager
ViewPager viewPager.setPageTransformer(true, clockSpinTransformation);
AntiClock Spin Transformation
Hello guys here i will tell you how you can apply AntiClock Spin Transformation on Viewpager.
Recommended : Parallax ViewPager
First you have to implement ViewPager.PageTransformer in your class then check for position value, if position < -1 or position > 1 then set Alpha to 0 otherwise for position <= 0 you code for page which is currently visible to you and for position <= 1 you code for the page which is going to be visible to you.
public class AntiClockSpinTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position * page.getWidth());
if (Math.abs(position) < 0.5){
page.setVisibility(View.VISIBLE);
page.setScaleX(1-Math.abs(position));
page.setScaleY(1-Math.abs(position));
}
else if (Math.abs(position) > 0.5){
page.setVisibility(View.GONE);
}
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0){ // [-1,0]
page.setAlpha(1);
page.setRotation(360*(1-Math.abs(position)));
}
else if (position <= 1){ // (0,1]
page.setAlpha(1);
page.setRotation(-360*(1-Math.abs(position)));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Now creating object of your transformation class
AntiClockSpinTransformation antiClockSpinTransformation = new AntiClockSpinTransformation();
After doing this you just set your transformation to view pager
ViewPager viewPager.setPageTransformer(true, antiClockSpinTransformation);
Fidget Spin Transformation
Card layout : ViewPager cards animation
public class FidgetSpinTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position * page.getWidth());
if (Math.abs(position) < 0.5) {
page.setVisibility(View.VISIBLE);
page.setScaleX(1 - Math.abs(position));
page.setScaleY(1 - Math.abs(position));
} else if (Math.abs(position) > 0.5) {
page.setVisibility(View.GONE);
}
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0) { // [-1,0]
page.setAlpha(1);
page.setRotation(36000*(Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)));
}else if (position <= 1){ // (0,1]
page.setAlpha(1);
page.setRotation(-36000 *(Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)*Math.abs(position)));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Vertical Flip Transformation
public class VerticalFlipTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position * page.getWidth());
page.setCameraDistance(12000);
if (position < 0.5 && position > -0.5) {
page.setVisibility(View.VISIBLE);
} else {
page.setVisibility(View.INVISIBLE);
}
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0) { // [-1,0]
page.setAlpha(1);
page.setRotationY(180 *(1-Math.abs(position)+1));
}
else if (position <= 1) { // (0,1]
page.setAlpha(1);
page.setRotationY(-180 *(1-Math.abs(position)+1));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Horizontal Flip Transformation
public class HorizontalFlipTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position*page.getWidth());
page.setCameraDistance(20000);
if (position < 0.5 && position > -0.5){
page.setVisibility(View.VISIBLE);
}
else {
page.setVisibility(View.INVISIBLE);
}
if (position < -1){ // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
}
else if (position <= 0 ){ // [-1,0]
page.setAlpha(1);
page.setRotationX(180*(1-Math.abs(position)+1));
}
else if (position <= 1){ // (0,1]
page.setAlpha(1);
page.setRotationX(-180*(1-Math.abs(position)+1));
}
else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
Pop Transformation
public class PopTransformation implements ViewPager.PageTransformer {
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position * page.getWidth());
if (Math.abs(position) < 0.5) {
page.setVisibility(View.VISIBLE);
page.setScaleX(1 - Math.abs(position));
page.setScaleY(1 - Math.abs(position));
} else if (Math.abs(position) > 0.5) {
page.setVisibility(View.GONE);
}
}
}
Fade Out Transformation
public class FadeOutTransformation implements ViewPager.PageTransformer{
@Override
public void transformPage(View page, float position) {
page.setTranslationX(-position*page.getWidth());
page.setAlpha(1-Math.abs(position));
}
}
List is not end here. I’ll come with next part. Hope you enjoy this tutorial.
Nuur Hasan
Share your thoughts