Develop Reference

DepthPageTransformer from both side same effect?

The code for dept page transformation animation appears when slide to left, to achieve the similar effect when sliding to right I did work around but have no success.
Depth Page Tranfomer
I want the same effect when I back to previous image that is the coming image must zoom out and current image slide to right. Any solution or fix for this?

This code solves the problem, but is written in C#,i use Xamarin.Android, but it should be easy to translate to java, because it is translated from Java.
It is a class derived from RecyclerView.ViewHolder because in my code I use a RecyclerView to display multiple ViewPager.
I implement the interfaces
ViewPager.IPageTransformer
ViewPager.IOnPageChangeListener
In Java are
ViewPager.PageTransformer
ViewPager.OnPageChangeListener
In the same class to know if this dragging to the right or to the left.
And the transformation change in the direction
public class PhotoPaisViewHolder : RecyclerView.ViewHolder,
ViewPager.IPageTransformer,
ViewPager.IOnPageChangeListener
{
private static AtomicInteger sNextGeneratedId = new AtomicInteger(1);
/**
* Generate a value suitable for use in {#link #setId(int)}.
* This value will not collide with ID values generated at build time by aapt for R.id.
*
* #return a generated ID value
*/
public static int GenerateViewId()
{
for (;;)
{
int result = sNextGeneratedId.Get();
// aapt-generated IDs have the high byte nonzero; clamp to the range under that.
int newValue = result + 1;
if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0.
if (sNextGeneratedId.CompareAndSet(result, newValue))
{
return result;
}
}
}
public ViewPager Pager { get; private set; }
// Get references to the views defined in the CardView layout.
public PhotoPaisViewHolder(View itemView)
: base(itemView)
{
// This for support multiple pagers in the same RecyclerView
Pager = itemView.FindViewById<ViewPager>(Resource.Id.pager);
if (Build.VERSION.SdkInt < BuildVersionCodes.JellyBeanMr1)
{
Pager.Id = PhotoPaisViewHolder.GenerateViewId();
}
else
{
Pager.Id = View.GenerateViewId();
}
Pager.AddOnPageChangeListener(this);
Pager.SetPageTransformer(reverse, this);
}
//For control the transformation
private static float MIN_SCALE = 0.75f;
private int currentPos;
private bool reverse;
private bool dragging;
public void TransformPage(View view, float position)
{
// Console.WriteLine(position);
int pageWidth = view.Width;
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.Alpha = 0;
}
else if (position <= 0)
{ // [-1,0]
// Use the default slide transition when moving to the left page
if (reverse)
{
TransformUpView(view);
}
else
{
TransformDownView(view, position, pageWidth);
}
}
else if (position <= 1)
{ // (0,1]
// Fade the page out.
if (reverse)
{
TransformDownView(view, position, pageWidth);
}
else
{
TransformUpView(view);
}
}
else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.Alpha = 0;
}
}
private static void TransformDownView(View view, float position, int pageWidth)
{
view.Alpha = 1 - Math.Abs(position);
// Counteract the default slide transition
view.TranslationX = pageWidth * -position;
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.Abs(position));
view.ScaleX = scaleFactor;
view.ScaleY = scaleFactor;
}
private static void TransformUpView(View view)
{
view.Alpha = 1;
view.TranslationX = 0;
view.ScaleX = 1;
view.ScaleY = 1;
}
public void OnPageScrollStateChanged(int state)
{
dragging = state == ViewPager.ScrollStateDragging;
}
public void OnPageScrolled(int position, float positionOffset, int positionOffsetPixels)
{
if (dragging)
{
if (position < currentPos)
{
if (reverse)
{
reverse = !reverse;
Pager.SetPageTransformer(reverse, this);
}
}
else
{
if (!reverse)
{
reverse = !reverse;
Pager.SetPageTransformer(reverse, this);
}
}
}
}
public void OnPageSelected(int position)
{
currentPos = position;
}
}

How to implement stack transformation in vertical viewpager

How to implement stack transformation in VerticalViewPager,Here is my code which i have implemented VerticalViewPager with stack transformation but the issue is it is fading out, I want to remove fading out while swipe up the page.
public class VerticalViewPager extends Activity {
private static final float MIN_SCALE = 0.75f;
PagerAdapter adapter;
private static final float MIN_ALPHA = 0.75f;
private boolean a;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.verticalviewpager);
final fr.castorflex.android.verticalviewpager.VerticalViewPager verticalViewPager = (fr.castorflex.android.verticalviewpager.VerticalViewPager) findViewById(R.id.verticalviewpager);
adapter = new MyCustomAdapter(VerticalViewPager.this, SplashScreen.newsidArray, SplashScreen.newsdescArray, SplashScreen.newstitleArray,
SplashScreen.newsimageArray, SplashScreen.newsdateArray, SplashScreen.newsauthorArray, SplashScreen.newsurlArray);
verticalViewPager.setOffscreenPageLimit(1);
verticalViewPager.setAdapter(adapter);
verticalViewPager.setPageTransformer(false, new PageTransformer() {
#Override
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 <= 0) { // [-1,0]
view.setAlpha(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1F-position);
view.setTranslationY((int) ((float) (pageHeight) * -position));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
});
verticalViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
public void onPageScrollStateChanged(int state) {
}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int page = verticalViewPager.getCurrentItem();
Log.e("page",String.valueOf(page));
if((page+1)== MyCustomAdapter.nodata){
// Toast.makeText(VerticalViewPager.this,"No News Available To Swipeup",500).show();
final Toast toast = Toast.makeText(getApplicationContext(), "No News Available To Swipeup", Toast.LENGTH_SHORT);
toast.show();
Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
toast.cancel();
}
}, 500);
}
}
public void onPageSelected(int position) {
SplashScreen.myCustomPosition = position;
}
});
}
}

Android ViewPager - Smooth Transition for this Design

I can't really figure out the math to do smooth transition for the following design. Any help would be greatly appreciated :).
During transition, the pages are jumping up and down but I would like them to be smooth instead.
Design
Transition
Relavent ViewPage code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
viewPager.setOffscreenPageLimit(3);
viewPager.setPageMargin(100);
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(-pageHeight / 10);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
});
}
Note: 'transformPos' is used to address this bug - https://code.google.com/p/android/issues/detail?id=64046
My ViewPager
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="260dp"
android:layout_centerInParent="true"
android:clipToPadding="false"
android:paddingLeft="80dp"
android:paddingRight="80dp"/>
Full Source - https://github.com/krishnaraj/ViewPagerSample

Try this
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
int max = -pageHeight / 10;
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(max * (1-Math.abs(transformPos)));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
});

Change your if to:
float upTranslation = -pageHeight / 10f;
if (transformPos < -1) {// [-Infinity,-1)
page.setTranslationY(0);
} else if (transformPos < 0) { // [-1,0)
float translationY = upTranslation * (transformPos + 1f);
page.setTranslationY(translationY);
} else if (transformPos == 0) { // 0
page.setTranslationY(upTranslation);
} else if (transformPos <= 1) { // (0,1]
float translationY = upTranslation * (1f - transformPos);
page.setTranslationY(translationY);
} else { // (1,+Infinity]
page.setTranslationY(0);
}

If you really not need the pageTransformer, use below code
viewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
if(position==1){
int pageWidth = viewPager.getMeasuredWidth() - viewPager.getPaddingLeft() - viewPager.getPaddingRight();
int pageHeight = viewPager.getHeight();
int paddingLeft = viewPager.getPaddingLeft();
float transformPos = (float) (page.getLeft() - (viewPager.getScrollX() + paddingLeft)) / pageWidth;
final float normalizedposition = Math.abs(Math.abs(transformPos) - 1);
page.setAlpha(normalizedposition + 0.5f);
if (transformPos < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setTranslationY(0);
} else if (transformPos <= 1) { // [-1,1]
page.setTranslationY(-pageHeight / 10);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setTranslationY(0);
}
}
}
});
and try again...

How to set the point, after which the ViewPager swipes to another View?

If more than 50% of the follower of View B is visible,
on release the ViewPager will animate to the View B instead of goind back to View A.
How can I change this point of switching from 50% to x%?

You can do this by overriding the onScrollChanged() function, here's an example:
#Override
public void onScrollChanged(ViewPager vp, int x, int y, int oldx, int oldy) {
// We take the last son in the ViewPager
View view = (View) vp.getChildAt(vp.getChildCount() - 1);
if (diff < view.getBottom()/2) {
// do the animation
}
}
Let me know if that worked or not (in order for me to know if I should remove the Answer from here).
Thanks

You can build your own customized ViewPager and override the proper method with your own float-value. something like :
public CustomViewpager extends ViewPager {
#Override
private int determineTargetPage(int currentPage, float pageOffset, int velocity, int deltaX) {
int targetPage;
if (Math.abs(deltaX) > mFlingDistance && Math.abs(velocity) > mMinimumVelocity) {
targetPage = velocity > 0 ? currentPage : currentPage + 1;
} else {
//change your values here for whatever you need for your purposes
final float truncator = currentPage >= mCurItem ? 0.4f : 0.6f;
targetPage = (int) (currentPage + pageOffset + truncator);
}
if (mItems.size() > 0) {
final ItemInfo firstItem = mItems.get(0);
final ItemInfo lastItem = mItems.get(mItems.size() - 1);
// Only let the user target pages we have items for
targetPage = Math.max(firstItem.position, Math.min(targetPage, lastItem.position));
}
return targetPage;
}
}

Issue using ViewPager and PageTransformer with Android API <11

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);
}
}
}