Xamarin Android - ViewPager & PageTranformers

This post looks at how to use a ViewPager to let users swipe between fragments and how to make some cool animations during the swipe. The source code for these examples is available here.

ViewPager Basics

To set up a basic view pager we need:

• A Layout with a ViewPager widget.
• Some fragments to use as pages.
• A PagerAdapter which managers the fragments.
• An Activity to tie everything together.

The layout for the ViewPager is really simple - it just has a ViewPager in it:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

In this example the page fragments are simple as well, the layout is contains a TextView and the fragment class just picks up the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:background="@drawable/Fragment">
    <TextView
        android:text="textView1"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:textColor="#ff000000" />
</LinearLayout>

public class PagerFragment : Fragment
{
    public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View view = inflater.Inflate(Resource.Layout.DemoFragment, container, false);
        return view;
    }
}

We need a PagerAdapter to manage the fragments, this is simple in the demo but would be more complicated in real life.

internal class DemoPagerAdapter : Android.Support.V13.App.FragmentStatePagerAdapter
{
    private const int PageCount = 5;

    public DemoPagerAdapter(FragmentManager fm) : base(fm)
    {
    }

    public override Fragment GetItem(int position)
    {
        return new PagerFragment();
    }

    public override int Count
    {
        get { return PageCount; }
    }
}

Finally we need an activity to tie it all together. The activity uses the view pager layout and ties it up to the pager adapter.

[Activity(Label = "PagerDemo", Icon = "@drawable/icon")]
public class PagerActivity : Activity
{
    private ViewPager viewPager;
    private PagerAdapter pagerAdapter;

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        this.SetContentView(Resource.Layout.PagerActivity);
        
        pagerAdapter = new DemoPagerAdapter(this.FragmentManager);

        viewPager = this.FindViewById(Resource.Id.pager);
        viewPager.Adapter = pagerAdapter;
    }
}

After putting it all together you get an activity which looks like this. This is great but now we'll look at making the transitions between the pagers much cooler.

Animations with Page Transformers

To spice up the animation between the fragments we need a class that implements ViewPager.IPageTransformer. This will let us customise the animation as the pages change in pretty much any way we like. We’ll also need to set the page transformer against the view pager using SetPageTransformer. The interface has a single method called TransformPage which accepts the view from the pages fragment and a float called position. The position variable will change from -1 to 1 as the page changes. -1 is off screen to the right, 1 is off screen to the left, and 0 means that the page is fully in the centre of the screen.

First of all we’ll fade the fragments out as they go off screen, this is what the FadeTransformer class looks like when it’s running:

Here’s the code for the transformer. You can see it calculates the alpha value and then apply it to the view. We also need to set the alpha value to 0 when the view is fully of screen (positions 1 and -1).

/// <summary>
/// This FadeTransformer fades fragments in and out as they are swiped.
/// </summary>
public class FadeTransformer : Java.Lang.Object, ViewPager.IPageTransformer
{
 private float MinAlpha = 0.3f; // Minimum alpha value.

 public void TransformPage(View view, float position)
 {
  if (position < -1 || position > 1) 
  {
   view.Alpha = 0; // The view is offscreen.
  } 
  else 
  {
   float scale = 1 - Math.Abs (position); // The scale should be 1 at position 0, and 0 at positions 1 and -1
   float alpha = MinAlpha + (1 - MinAlpha) * scale; // Calculate the alpha value
   view.Alpha = alpha; // Apply the value to the view

   view.FindViewById<TextView> (Resource.Id.textView1).Text = string.Format ("Position: {0}\r\nAlpha: {1}", position, alpha);
  }
 }
}

Here’s another page transformer - this time we’ll shrink the views as they go offscreen:

And here’s the code. Calculating the scale is fairly simple. We also need to set the views TranslateX property, this keeps the edges of the old and new pages nice and close together:

/// <summary>
/// This ScaleTransformer zooms fragments in and out as they are swiped.
/// </summary>
public class ScaleTransformer : Java.Lang.Object, ViewPager.IPageTransformer
{
 private float MinScale = 0.5f; // Minimum scale value.

 public void TransformPage(View view, float position)
 {
  if (position < -1 || position > 1) 
  {
   view.Alpha = 0; // The view is offscreen.
  } 
  else 
  {
   view.Alpha = 1;

   // Scale the view.
   float scale = 1 - Math.Abs (position) * (1 - MinScale);
   view.ScaleX = scale;
   view.ScaleY = scale;

   // Set the X Translation to keep the views close together.
   float xMargin = view.Width * (1 - scale) / 2;

   if (position < 0) 
   {
    view.TranslationX = xMargin  / 2;
   } 
   else 
   {
    view.TranslationX = -xMargin  / 2;
   }

   view.FindViewById<TextView> (Resource.Id.textView1).Text = string.Format ("Position: {0}\r\nScale: {1}", position, scale);
  }
 }
}

In Android you can apply 3d effects to views easily. Here’s a page transformer that has a 3d ‘wheel’ effect.

Here’s the code, we need to set the pivots for the rotation - the y pivot is half way down the view and the x pivot can be on either edge. The x pivots should be on adjacent edges of the old and new views. The rotation values is calculated by multiplying the position by the maximum rotation value.

internal class WheelPageTransformer : Java.Lang.Object, ViewPager.IPageTransformer
{
    private const float MaxAngle = 30F;

    public void TransformPage(View view, float position)
    {
  if (position < -1 || position > 1) 
  {
   view.Alpha = 0; // The view is offscreen.
  } 
  else 
        {
   view.Alpha = 1; 

   view.PivotY = view.Height / 2; // The Y Pivot is halfway down the view.

   // The X pivots need to be on adjacent sides.
            if (position < 0)
            {
                view.PivotX = view.Width;
            }
            else
            {
                view.PivotX = 0;
            }

            view.RotationY = MaxAngle * position; // Rotate the view.

   view.FindViewById<TextView> (Resource.Id.textView1).Text = string.Format ("Position: {0}\r\nPivotX: {1}\r\nRotationY {2}", position, view.PivotX, view.RotationY);
        }
    }
}

Here’s the final transformer, in this one pages from the right of the screen are treated normally but pages on the left sink into the background.

This transformer is slightly different to the other as the pages are drawn in the opposite order so that the z-indexs are correct. We control this in the call to SetPageTransformer. The other difference is that the transformer only really does anything when the pages are to the left of the screen.

internal class SinkAndSlideTransformer : Java.Lang.Object, ViewPager.IPageTransformer
{
    public void TransformPage(View view, float position)
    {
  if (position < -1 || position > 1) 
  {
   view.Alpha = 0; // The view is offscreen.
  } 
  else 
  {
   view.Alpha = 1;

   if (position < 0) 
   {
    // 'Sink' the view if it's to the left.
    // Scale the view.
    view.ScaleX = 1 - Math.Abs (position);
    view.ScaleY = 1 - Math.Abs (position);

    // Set the translationX to keep the view in the middle.
    view.TranslationX = view.Width * Math.Abs (position);
   } 
  }
    }
}