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)
Related
I am using viewpager2 with fragmentStateAdapter.
Also, setting page transformer as DepthPageTransformation(transition is working correctly the way I want)
But when I swipe up the pages, the on click events on that fragment works on double click(event works after clicking twice on it)
If I remove pageTransformation from the viewPager, then it works fine.
So, not able to understand that why is transformation causing click event problem.
private static final float MIN_SCALE = 0.75f;
public void transformPage(#NonNull View view, float position) {
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0f);
Log.d("batman",position+" <-1");
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1f);
view.setTranslationY(0f);
view.setScaleX(1f);
view.setScaleY(1f);
Log.d("batman",position+" <=0");
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationY(pageHeight * -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);
Log.d("batman",position+" <=1");
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0f);
Log.d("batman",position+" else");
}
}
}
HomeFragment(adapter setting):
mAdapter = new ViewPagerAdapter(this);
setPageChangeListener();
mViewPager.setAdapter(mAdapter);
// mViewPager.setOffscreenPageLimit(3);
mViewPager.setPageTransformer( new DepthPageTransformer());
I want that button click event should work at one click when the page is swiped up.
The clicks of the previous fragment were getting disabled on swipe up because I was updating my fragment which is added in view pager from onPageSelected() listener, so that was making the button work on double click.
#Override
public void onPageSelected(int position) {
homePresenter.onPageSelected();
currentPg = position;
}
Maybe we cannot update our fragment from this listener.
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!
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.