[Java for Android App Development] :
Customize the Animation with PageTransformer - How to add Zoom-out page transformer

Reference here: http://developer.android.com/training/animation/screen-slide.html#pagetransformer

- What you need:

- NineOldAndroids library:

>>>Download here<<<

Site>>>http://nineoldandroids.com/<<<Site

- ZoomOutPageTransformer.java

>>>Download here<<<​

1) First you need to extract "library" folder from the zip and save it in your documents folder, like the picture below:

​

2) Now drag & drop "library" folder to your Documents directory,i will rename it "library_1":

​

3) Import downloaded NineOld Library to your workspace:

GO TO FILE > NEW > OTHER > ANDROID > ANDROID PROJECT FROM EXISTING CODE

4) Click next button and browse directory to select the downloaded Library:

(1) CLICK BROWSE...

(2) AND SELECT "LIBRARY" FOLDER, GO TO Libraries > My Documents > Library_1, click OK.

5) Now give a name to this project (for example "Library_1 or "NineOld") and check "Copy project into workspace"

follow the first post to understand "how import libs": http://xdaforums.com/showpost.php?p=45742000&postcount=1

EXAMPLE APP:

Copy the ZoomOutPageTransformer.java to your src/com.example.viewpagertest/ folder or create a class named ZoomOutPageTransformer:

package com.example.viewpagertest;
import android.support.v4.view.ViewPager.PageTransformer;
import android.view.View;
[COLOR="green"]import com.nineoldandroids.view.ViewHelper;[/COLOR]

public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.85f;
private static 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.
[COLOR="green"]ViewHelper[/COLOR].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) {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, horzMargin - vertMargin / 2);
} else {
[COLOR="green"]ViewHelper[/COLOR].setTranslationX(view, -horzMargin + vertMargin / 2);
}

// Scale the page down (between MIN_SCALE and 1)
[COLOR="green"]ViewHelper[/COLOR].setScaleX(view, scaleFactor);
[COLOR="green"]ViewHelper[/COLOR].setScaleY(view, scaleFactor);

// Fade the page relative to its size.
[COLOR="green"]ViewHelper[/COLOR].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.
[COLOR="green"]ViewHelper[/COLOR].setAlpha(view, 0);
}
}
}

If you have deleted the "libs" folder of your project, go to workspace/ViewPagerTest/ make a new folder called "libs" and put the android-support-v4.jar (you will find it in sdk/extras/android/support/v4 folder), copy the same file (android-support-v4.jar) in workspace/ViewPagerIndicator/libs folder.

Now go to library_1 options and check the correct project build target and "Is library":

​

Load the library into your project.

THE CODE​

blue = add

red = delete

Now i will make an xml file called "colors" in res/values folder:

[COLOR="Blue"]<?xml version="1.0" encoding="UTF-8"?>

<resources>

<color name="red">#F75D59</color>
<color name="blue">#0000FF</color>
<color name="orange">#dc5a1e</color>

</resources>[/COLOR]

add the following code to layout1:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/red"[/COLOR]>
</LinearLayout>

layout2:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/blue" >[/COLOR]
</LinearLayout>

layout3:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
[COLOR="blue"]android:background="@color/orange">[/COLOR]
</LinearLayout>

Now open the MainActivity.java:

package com.example.viewpagertest;

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {

FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;

[MENTION=439709]override[/MENTION]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mAdapter = new FragmentAdapter(getSupportFragmentManager());

mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);

mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);

}

[MENTION=439709]override[/MENTION]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

and add the blue lines like this:

package com.example.viewpagertest;

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.TitlePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import com.example.viewpagertest.R;

public class MainActivity extends FragmentActivity {

FragmentAdapter mAdapter;
ViewPager mPager;
PageIndicator mIndicator;
int Number = 0;

[MENTION=439709]override[/MENTION]
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mAdapter = new FragmentAdapter(getSupportFragmentManager());

mPager = (ViewPager)findViewById(R.id.pager);
mPager.setAdapter(mAdapter);

mIndicator = (TitlePageIndicator)findViewById(R.id.indicator);
mIndicator.setViewPager(mPager);

[COLOR="blue"]mPager.setPageTransformer(true, new ZoomOutPageTransformer ());[/COLOR]

}

[MENTION=439709]override[/MENTION]
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}