It seems like a challenging animation, but I have a feeling this can be done very easily. I am trying to achieve an animation between Fragments like below (see 2nd and 3rd quadrant)
Enter and exit are not difficult, but pre-displaying next and previous card's screen and seamless transition to next card is out of my knowledge scope. Please, if anyone has worked on a similar animation, give me some pointers.
EDIT
The official documentation of Android transitions on click i.e. when user clicks page is zoomed out to show last and previous page and swipe moves it to next one. My requirement is to leave the page at zoomed out level and transition on button clicks:
Question: How will be the view default out to x zoom level to show previous next page parts and transition on click.
You can customize the transition animation between fragments using PageTransformer.
ZoomOutPageTransformer
import android.support.v4.view.ViewPager;
import android.view.View;
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
Usage
viewPager.setPageTransformer(true, new ZoomOutPageTransformer());
Official documentation.
Checkout this and this for showing boundaries of near one.
For folks who come to this question looking for similar requirement:
As Anoop suggests, official documentation is great. Simply implement viewPager.PagerTransform and supply the class to your viewPager. Also, transformPage (the implemented function) is very important in animation transition.
Next part, was to show corners of next and previous fragments. This can be acheived through xml of fragments. Reference : Android tip viewpager with protruding children
Hopes this helps someone to create interactive apps.
UPDATE
This post shared by Anoop makes this transformation a breeze. cheers!
Related
I need to set up a ViewPager with the following requirements:
- at any given time, 3 pages must be visible in the screen
- the center page isn't scaled and the behind pages are 60% of the center page;
- center page, must overlap a bit the behind pages.
From what I saw in other questions I've tried to do this:
viewPager.setClipToPadding(false);
int padding = (metrics.widthPixels - centerViewSize) / 2;
viewPager.setPadding(padding, 0, padding, 0);
viewPager.setPageMargin(-(padding / 2));
viewPager.setCurrentItem(10);
viewPager.setOffscreenPageLimit(3);
Doing this got me here:
This is what I was expecting. Just need to bring to front the current selected item.
I've then tried to scale the view with:
public static final float SCALED_SIZE = 0.6f;
viewPager.setPageTransformer(false, new PageTransformer() {
#Override
public void transformPage(final View page, final float position) {
if (position < -1) {
page.setScaleX(SCALED_SIZE);
page.setScaleY(SCALED_SIZE);
} else if (position <= 1) {
float scaleFactor = Math.max(SCALED_SIZE, 1 - Math.abs(position));
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else {
page.setScaleX(SCALED_SIZE);
page.setScaleY(SCALED_SIZE);
}
}});
But that gives me some problems.
The first item that should be selected is not the correct one.
Animation chopy.
At some points, there are more than 3 pages on the screen.
Scale is from the bottom and I would like to be from the center.
Any idea how I can solve my issues?
use Library UltraViewPager. It have very nice effects.
I have a ViewPager and a SlidingTabLayout (uses com.jpardogo.materialtabstrip:library:1.1.0) that works fine. The transition used is the DepthPageTransformer. My question is how could I have a different color for every tab/fragment and when I change tabs it smoothly blends to the tab color. I would also like the same thing to happen to the tabs, toolbar, and the very top bar. Help would be very appreciated!
An example would be the 360 Security App (https://play.google.com/store/apps/details?id=com.qihoo.security&hl=en)
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);
}
}
}
I'm trying to change my ViewPager transition animation.
I'd like to have the same behavior as the default gallery, when you switch from one photo to the next one. It's basically an animation where the current page goes to the left while the next one comes from behind it and grows larger.
I've seen that I can change the animation with a PageTransformer.
pager.setPageTransformer(false, new PageTransformer() {
#Override
public void transformPage(View page, float position) {
if (position < 0) {
} else {
final float normalizedposition = Math.abs(Math.abs(position) - 1);
page.setScaleX(normalizedposition / 2 + 0.5f);
page.setScaleY(normalizedposition / 2 + 0.5f);
}
}
});
With that, I have the current page sliding to the left, that's ok.
The new page starts small in size and grows, that's also ok. But, the page comes from the right to center. I'd like to remove the translation and have it already in the middle, but small, hidden by the current page.
If I add page.setTranslationX(1080 * (-(position))); then the next pages stays in the middle of the screen, but they are visible at all time above the current page. If I also add alpha to the page, the page appearing isn't hidden behind the old one.
I've tried to check in the source code of the gallery app but I didn't found any reference to the transformPage function.
Turns out to be easy. It is in the demos in the android developper website.
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);
}
}
}
See here (Depth page transformer).
Not sure what is going on here but I have implemented the Zoom features on an image-gallery in a ViewPager, ImagePagerAdapter using TouchImageView. On all my other phones and tablets the code works perfect, for zooming and page flipping. On 3 of our Motorola Razrs the Zooming acts funny on the first image. By funny I mean that when you try and zoom nothing happens on picture #1. But if you pan to the next image the zooming from image 1 has affect image 2. If you flip back to image 1 it still doesn't zoom. If you pan to image #3 then back to #1 the first image will zoom just fine. Not sure how to tackle this issue or even debug it. I have added custom animation, DepthPageTransformer, from the examples in API. This is the culprit, but not sure what in the code is causing this behavior.
import android.annotation.SuppressLint;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
public class DepthPageTransformer implements PageTransformer {
private static final float MIN_SCALE = 0.55f;
// suppress compiler warning...lower Api use standard slide in but
// APIs higher than 10 will use the transform page function
#SuppressLint("NewApi")
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);
}
}
}
Apparently the animation was causing this weird behavior. Not sure why but until I figure it out I had to remove the setting of this animation.
galleryViewPager.setClickable(true);
//galleryViewPager.setAnimation(new DepthPageTransformer());
galleryViewPager.setOnClickListener(new OnClickListener() {...
Now the fling animation is using the standard. Must be the way the Motorola Razr implements the adapter fling animation that messes up the listener order.
friends....
I got a problem with animation in betwen versions...So i will give description about the requirements of my app and problem im facing
1.My consists of animation which consists viewpager.
2.And this animation must work in lower versions such as 2.2.
3.So for this i have found a awsome library ninoldandroid.
4.I have used animation proxy for my animation.
5.It waa working fine in 4.2.
6.But when coming to 2.2 the animation was not working and the viewpager was moving with its default feature.
My code for animation is...
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();
AnimatorProxy proxy = AnimatorProxy.wrap(view);
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
proxy.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
proxy.setAlpha(1);
proxy.setTranslationX(0);
proxy.setScaleX(1);
proxy.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
proxy.setAlpha(1 - position);
// Counteract the default slide transition
proxy.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
proxy.setScaleX(scaleFactor);
proxy.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
proxy.setAlpha(0);
}
}
}
Can u tell what i have to implement to make this anim ation work in 2.2.
If u feel that the question is insuffient please let me know..Thnaq
There is a Animated view pager by jfeinstein JazzyViewPager which is used by nineoldandroid. which work from 2.2.
(Sorry for late replay)