Hi there! I am an undergraduate student at the University of Waterloo in Computer Science, and currently work as the Android developer at the random chat app Chatous. I plan to use this blog to post about interesting android problems that I solve, so hopefully it's an interesting or helpful read!

Tag: pagetransformer

This adventure in Android came about as part of my work for Chatous. As part of a visual redesign, I wanted to create the effect of cards rotating to animate from one to the other. This is a bit hard to describe, so I recommend checking out this video to see what I’m talking about.

One thing I really liked about this project was that it gave me a chance to do some math. It was simply trigonometry that I’d learned in high school, but it was still nice to have an application for this stuff. You can see some of my work on the side, but the underlying question was this:

For a regular polygon with side length and inner degrees all equal to , what is the distance from an outer edge to the centre in terms of ?

On the right you can see what this shape looks like for an inner degree of 160, this shape has 18 sides. By drawing lines from a vertex and the middle of the edge to the centre, we form a right triangle. We can then use the properties of right triangles to find that this distance is generally equal to . This will be useful later.

The key to achieving the effect is to use a PageTransformer attached to a ViewPager. This is part of the support package, but since it uses property animation, it will only work with Honeycomb (Api 11) and higher. There are two notable aspects to the transformation: 1) as views shift, they rotate in and out, and 2) the views are also shifted over, so that they appear on the edges of the centred view.

The latter effect is achieved by setting padding on the Fragments shown in the ViewPager and using a negative value for the setPageMargin function of ViewPager. I derived my implementation of this from a post by Paul Lammertsma, and hats off to him for making this simple and elegant solution.

To create the rotation involves using the math above. The centre of the imaginary polygon, upon whose edges these views are resting, is given by that expression, and is used as the pivot centre for our rotation. The full code of my PageTransformer class is this