https://github.com/anitaa1990/OnboardingSample
I want ZoomOut tranformation animation on ImageView in ViewPager. Only ImageView should be have ZoomOut Animation and other element of ViewPager should have default animation.
Here in your activity.
The main code is at ZoomOutPageTransformer look at the transformPage() method. (if it answers your question mark as answer. Thanks)
public class ScreenSlidePagerActivity extends FragmentActivity {
/**
* The number of pages (wizard steps) to show in this demo.
*/
private static final int NUM_PAGES = 5;
/**
* The pager widget, which handles animation and allows swiping horizontally to access previous
* and next wizard steps.
*/
private ViewPager mPager;
/**
* The pager adapter, which provides the pages to the view pager widget.
*/
private PagerAdapter mPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_screen_slide);
// Instantiate a ViewPager and a PagerAdapter.
mPager = (ViewPager) findViewById(R.id.pager);
mPagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mPagerAdapter);
// watch and understand what this code does
mPager.setPageTransformer(true, new ZoomOutPageTransformer());
}
#Override
public void onBackPressed() {
if (mPager.getCurrentItem() == 0) {
// If the user is currently looking at the first step, allow the system to handle the
// Back button. This calls finish() on this activity and pops the back stack.
super.onBackPressed();
} else {
// Otherwise, select the previous step.
mPager.setCurrentItem(mPager.getCurrentItem() - 1);
}
}
/**
* A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
* sequence.
*/
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// return your fragment here
return new ScreenSlidePageFragment();
}
#Override
public int getCount() {
return NUM_PAGES;
}
}
}
Here is your ZoomOutPager class
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 CurentView, float position) {
ImageView view = (ImageView)CurrentView.findViewById(// the id of the image view you would like)
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);
}
}
}
The main code is at ZoomOutPageTransformer look at the transformPage() method
Related
I have to implement cover flow feature in my app similar to
mobikwik app cover flow
and .
I have already tried with Android CoverFlow widget library and few others. But nothing working as expected.
How i can achieve this type of view using ViewPager?
I have created my class ZoomOutPageTransformer,which is implementing PageTransformer and this set into the pager using setPageTransformer() method.
Please check bellow ZoomOutPageTransformer.class -
public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 1f;
private static final float MIN_ALPHA = 0.7f;
public ZoomOutPageTransformer(boolean isZoomEnable) {
if (isZoomEnable) {
MIN_SCALE = 0.85f;
} else {
MIN_SCALE = 1f;
}
}
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
float vertMargin = pageHeight * (1 - MIN_SCALE) / 2;
float horzMargin = pageWidth * (1 - MIN_SCALE) / 2;
view.setScaleX(MIN_SCALE);
view.setScaleY(MIN_SCALE);
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(MIN_ALPHA);
view.setTranslationX(horzMargin - vertMargin / 2);
} 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));
vertMargin = pageHeight * (1 - scaleFactor) / 2;
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(MIN_ALPHA);
view.setTranslationX(-horzMargin + vertMargin / 2);
}
}
}
and in PagerActivity.java -
public class PagerActivity extends Activity {
ViewPager pager;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
pager = (ViewPager) findViewById(R.id.viewPager);
// mContainer.setViewPager(pager);
PagerAdapter adapter = new MyPagerAdapter();
pager.setPageTransformer(true, new ZoomOutPageTransformer(true));
pager.setAdapter(adapter);
//Necessary or the pager will only have one extra page to show
// make this at least however many pages you can see
// pager.setOffscreenPageLimit(adapter.getCount());
pager.setOffscreenPageLimit(3);
//A little space between pages
pager.setPageMargin((int) getResources().getDimension(R.dimen.dimen_20));
//If hardware acceleration is enabled, you should also remove
// clipping on the pager for its children.
pager.setClipChildren(false);
}
//Nothing special about this adapter, just throwing up colored views for demo
private class MyPagerAdapter extends PagerAdapter {
#Override
public Object instantiateItem(ViewGroup container, int position) {
TextView view = new TextView(PagerActivity.this);
view.setText("Item " + position);
view.setGravity(Gravity.CENTER);
view.setBackgroundColor(Color.argb(255, position * 50, position * 10, position * 50));
container.addView(view);
return view;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
#Override
public int getCount() {
return 9;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
}
}
in main.xml -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/pager_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#CCC"
android:clipChildren="false">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginLeft="#dimen/dimen_50"
android:layout_marginRight="#dimen/dimen_50" />
</FrameLayout>
</RelativeLayout>
it works for me.
I am very new to android ,i trying to implement vertical view pager with zoom out page transformer my vertical view pager working fine when i come for zoomout page transformer it will scroll horizontally ,it was not scrolling vertically
my vertical view pager class
VerticalViewPager.class
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 ViewPager.PageTransformer {
#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));
}
}
my zoomout animation class
AnimationViewPager.class
public class AnimationViewPager implements VerticalViewPager.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);
}
}
}
here my sample image i am trying to like this,please any one help me how to get this
firstly use this lib. it's the most closet to the out of box one ,
link given below
github.com/castorflex/VerticalViewPager
then create a new class
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);
}
}
}
in your mainactivity class, set the animation on verticalviewpager class like this
verticalViewPager=(VerticalViewPager)findViewById(R.id.verticalview);
verticalViewPager.setPageTransformer(false,new DepthPageTransformer());
verticalViewPager.setAdapter(pager);
that's it, thank you and please rate my answer :)
I implemented a viewpager with a DepthPageTransformer , in pages I have some inputs ( radio , check boxs , select options ... ). It works fine except one wired bug: Sometimes when I click on position(x,y) on a page P1 the input in that position of page P2 gets triggered.
P1:
P2( the one after P1):
Now when I click on this position on page P1 :
I get the select options displayed of page P2:
It's similar to z-index problem in web development.
The code of the DepthPage Transformer is the same as in the documentation : http://developer.android.com/training/animation/screen-slide.html#pagetransformer.
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#Override
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);
}
}
}
Any idea on how to solve this overlapping problem ?
Try this:
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
#Override
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);
// -------- THIS LINE ---
view.bringToFront();
// -------- THIS LINE ---
} 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);
}
}
}
You just need to reverse draw order:
mPager.setPageTransformer(true, new DepthPageTransformer());
In any case you can play with code sample here
Other solution is use OnPageChangeListener:
pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { }
#Override public void onPageSelected(final int position) {
pager.postDelayed(new Runnable() {
#Override
public void run() {
pagerAdapter.getItem(position).getView().bringToFront();
}
}, 300);
}
#Override public void onPageScrollStateChanged(int state) { }
});
is more efficient.
Had a little problem. My animation does not work. I don't get any kind of errors. Simply my animation does not work.
This is my code.
public class MainActivity extends FragmentActivity {
private PagerAdapter mPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.initialisePaging();
}
private void initialisePaging() {
List<Fragment> fragments = new Vector<Fragment>();
fragments.add(Fragment.instantiate(this, Tab1Fragment.class.getName()));
fragments.add(Fragment.instantiate(this, Tab2Fragment.class.getName()));
fragments.add(Fragment.instantiate(this, Tab3Fragment.class.getName()));
this.mPagerAdapter = new PagerAdapter(super.getSupportFragmentManager(), fragments);
ViewPager pager = (ViewPager)super.findViewById(R.id.pager);
pager.setAdapter(this.mPagerAdapter);
pager.setPageTransformer(true, new ZoomOutPageTransformer());
}
public static class Tab1Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag1_layout, container, false);
}
}
public static class Tab2Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag2_layout, container, false);
}
}
public static class Tab3Fragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
if (container == null) {
return null;
}
return (ImageView)inflater.inflate(R.layout.tab_frag3_layout, container, false);
}
}
public static class PagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public PagerAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
#Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
#Override
public int getCount() {
return this.fragments.size();
}
}
public static 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);
ViewHelper.setAlpha(view, 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);
ViewHelper.setTranslationX(view, horzMargin - vertMargin / 2);
} else {
// view.setTranslationX(-horzMargin + vertMargin / 2);
ViewHelper.setTranslationX(view, -horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
// view.setScaleX(scaleFactor);
// view.setScaleY(scaleFactor);
ViewHelper.setScaleX(view, scaleFactor);
ViewHelper.setScaleY(view, scaleFactor);
// Fade the page relative to its size.
// view.setAlpha(MIN_ALPHA +
// (scaleFactor - MIN_SCALE) /
// (1 - MIN_SCALE) * (1 - MIN_ALPHA));
ViewHelper.setAlpha(view, 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);
ViewHelper.setAlpha(view, 0);
}
}
}
}
Every thing else is working fine. I want to implement this. please help me.
Before i implemented without using NineOldroids. But even after implementing this, it didn't work.
I also have that problem check out this answer. Using nineoldandroid should work but PageTransform is ignored in pre 11 (Heneycomb) although it's in the support library. I'm thinking of moving to view flipper just to do the animation. But i'm still searching for another way.
EDIT: CHeck out my answer in that Question to see how i resolved the issue. I basicly copied the viewpager class and removed the if statement that checked the SDK version in setPageTransformer
It did not work in emulator with android 2.2 platform, but when i checked in my Phone Sony Xperia Tipo Dual having ICS as platform, it worked.
I need to write a custom transition for a ViewPager on an app with android:minSdkVersion="9".
I'm trying to run the ZoomOutPageTransformer given here.
I get no compiling error, and on a Samsung Galaxy S running Android 2.3.3 (API 10), the line
pager.setPageTransformer(true, new ZoomOutPageTransformer());
does not give any error, but the code in ZoomOutPageTransformer's transformPage is never executed.
The code works perfectly if I set android:minSdkVersion="11" and use my Nexus 4 (API 17).
Can these PageTransformers be used with API 9 and 10? Otherwise, how can I create custom transitions for ViewPager?
EDIT
Here's the code I use:
public class HomeFragment extends Fragment{
ViewPager mNewsTitlePager;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_content, container, false);
}
#Override
public void onActivityCreated (Bundle savedInstanceState){
super.onActivityCreated(savedInstanceState);
mNewsTitlePager = (ViewPager) getView().findViewById(R.id.news_title_pager);
mNewsTitlePager.setPageTransformer(true, new ZoomOutPageTransformer());
mNewsTitlePager.setAdapter(new NewsPagerAdapter(news_item_list));
}
private class NewsPagerAdapter extends PagerAdapter {
private List<News> news_item_list;
private LayoutInflater inflater;
NewsPagerAdapter(List<News> news_item_list) {
this.news_item_list = news_item_list;
inflater = getActivity().getLayoutInflater();
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
#Override
public void finishUpdate(View container) {
}
#Override
public int getCount() {
return this.news_item_list.size();
}
#Override
public Object instantiateItem(ViewGroup view, int position) {
TextView news_title = (TextView) inflater.inflate(R.layout.news_title_item, view, false);
news_title.setText(news_item_list.get(position).title);
((ViewPager) view).addView(news_title, 0);
return news_title;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view.equals(object);
}
#Override
public void restoreState(Parcelable state, ClassLoader loader) {
}
#Override
public Parcelable saveState() {
return null;
}
#Override
public void startUpdate(View container) {
}
}
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private float MIN_SCALE = 0.85f;
private 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);
}
}
}
}
I copied the ViewPager class from here and removed the if statement for the version and called it TransformableViewPager
public void setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) {
if (Build.VERSION.SDK_INT >= 11) {
final boolean hasTransformer = transformer != null;
final boolean needsPopulate = hasTransformer != (mPageTransformer != null);
mPageTransformer = transformer;
setChildrenDrawingOrderEnabledCompat(hasTransformer);
if (hasTransformer) {
mDrawingOrder = reverseDrawingOrder ? DRAW_ORDER_REVERSE : DRAW_ORDER_FORWARD;
} else {
mDrawingOrder = DRAW_ORDER_DEFAULT;
}
if (needsPopulate) populate();
}
}
I also had to change all PageTransformer to ViewPager.PageTransformer. Then did the transformations in ZoomOutPageTranformer like this,
if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){
// > 11 version
view.setAlpha(0);
}
else
{
// Nine Old Androids version
ViewHelper.setAlpha(view, 0);
}
This worked even for 2.2
Ok: I got the answer at the beginning of the doc:
As property animation is only supported as of Android 3.0 and forward, setting a PageTransformer on a ViewPager on earlier platform versions will be ignored.
I'll use ViewFlipper instead.
None of the answers above are the correct answer even if they work,
Here is mine, do not forget to add nineoldandroids.jar to your libs folder:
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) {
ViewHelper.setAlpha(view, 0);
} else if (position <= 1) { // [-1,1]
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) {
ViewHelper.setTranslationX(view,horzMargin - vertMargin / 2);
} else {
ViewHelper.setTranslationX(view,-horzMargin + vertMargin / 2);
}
ViewHelper.setScaleX(view,scaleFactor);
ViewHelper.setScaleY(view, scaleFactor);
ViewHelper.setAlpha(view, MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else {
ViewHelper.setAlpha(view,0);
}
}
}