I recently created an iOS app for a client which used the UICollectionView to create a coverflow which was used as a navigation element. The client has now requested an Android version of the app which is to match (as far as possible) the look, feel and functionality of the iOS version.
Most of this is straightforward enough but I'm having a few issues with replicating the Coverflow which needs to display 3 - 5 navigation tiles on screen and be swipable to reveal additional options.
After kicking a few ideas around I've got almost what I want, a 'swipable' row of tiles which I can tap on to navigate to the appropriate section of the app. What I can't seem to replicate is the animation which zooms the center tile slightly.
I've used a PageTransformer and have the effect that I want, but it is applied to the left-most tile (see attachment) and for the life of me I cannot see how to apply it to the central tile.
ViewPager view looks like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false" />
</LinearLayout>
and the PageTransformer like this:
`
private const float MIN_SCALE = 0.85f;
private const float MIN_ALPHA = 0.5f;
public void TransformPage(View page, float position)
{
int pageWidth = page.Width;
int pageHeight = page.Height;
if (position < -1)
{
// [-Infinity,-1)
// This page is way off-screen to the left.
page.Alpha = 0;
Console.WriteLine("1.Position: " + position);
}
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)
{
page.TranslationX = (horzMargin - vertMargin / 2);
}
else {
page.TranslationX = (-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
page.ScaleX=(scaleFactor);
page.ScaleY=(scaleFactor);
// Fade the page relative to its size.
page.Alpha = (MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
Console.WriteLine("2.Position: " + position);
}
else {
// (1,+Infinity]
// This page is way off-screen to the right.
page.Alpha = 0;
Console.WriteLine("3.Position: " + position);
}
}
`
Can anyone point me in the right direction?
Thanks in advance