Yalantis: iOS, Android And Web App Development Company

Our FlipViewPager Animation on Android

We are all familiar with user interactions and how they happen in mobile apps. A usual scenario looks like that: you tap on something clickable and an app takes you to another screen. Nothing new here. Don’t you think it’s a bit trite and someone needs to set a new trend?

We got bored with typical UI/UX flow and created our own component called FlipViewPager. This component allows you to literally have three pages on one. We decided to play with user profiles, a typical thing for any social app which has a friends list. See the project on Dribbble and GitHub.

All user profiles are organized in a custom list, which has left and right columns. When a user swipes left/right on one of the profiles, the component allows to see some information associated with this profile, such as interests, hobbies, jobs and so on.

There is an idiom “read someone like a book” and this is exactly what our component does. By the way, all the folks you see on the screen are our guys from Yalantis. They all have made up names, though.

The component was created by Dmitry Prudnikov, UI/UX designer, and implemented by Roman Herasymenko, our Android developer.

How we developed FlipViewPager

In fact, our component can do two things -- flip profiles and scroll the whole list. When you flip profiles, the component shows you three pages, which display:

  1. Information associated with one profile.
  2. Two profile pictures.
  3. Information associated with the other profile.

The FlipViewPager is based on a standard Android ViewPager component, which has a similar functionality to navigate between pages, but doesn’t know how to handle all challenges our component has to offer. Now let’s take a closer look at what we had to deal with.

How we built flipping pages

As I already mentioned, our component has one page divided into two rectangles - left and right. When a user swipes through one of these rectangles, we track the movement of a pointer. If the pointer moves along X axis, we lock the parent’s possibility to scroll the list and start our animation instead.

We also calculate an angle at which we must turn a rectangle based on the pointer’s moving distance on the X axis.  

How we developed a custom list

Since our list of profiles has two columns, and neither ListView nor GridView allows to implement this, we had to find another solution.

I decided to go my own way and created an adapter for ListView. It helps to imitate GridView and combines two elements in one row. This was a pretty challenging task, since my adapter for ListView had to:

  • Recycle vertical items
  • Handle rows with even and odd number of items
  • Create a  horizontal adapter
  • Recycle the horizontal adapter

I even drew this picture to make things clearer:

IMG_0005.jpg

Read also: How We Created a Tab Bar Animation

How does the adapter for ListView work?

1. BaseFlipAdapter does the calculations. It counts the total number of items in the vertical list and combines them in couples. It also handles the situation when there is an odd number of items in the list. After all calculations are done, BaseFlipAdapter inflates the view which contains our custom component FlipViewPager:

public int getCount() {
// Checking if we need an additional row for single item
return items.size() % 2 != 0 ? ((items.size() / 2) + 1) : (items.size() / 2);
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
// Trick to split list into 2 parts
T item1 = getItem(position * 2);
// Used for cases when we have not an even size in incoming list
T item2 = items.size() > (position * 2 + 1) ? getItem(position * 2 + 1) : null;
….

}

2. Then our adapter implements ViewHolder to make sure we create only a few FlipViewPager elements for visible items.

3. For each row in our ListView we built an instance of an internal secondary adapter called MergeAdapter. It receives two items to merge.

public MergeAdapter(T item1, T item2) {
 this.item1 = item1;
 this.item2 = item2;
}

4. When it’s high time we rendered pages, our adapter calls an abstract method getPage(...) from the parent adapter.

We extend BaseFlipAdapter and implement getPage(...). This method receives two items to merge in a single view, and to provide some additional pages with information for each of the items. ViewHolder for horizontal pages is implemented manually.

Read also: Converting iPhone App to Android: Get Money, Power and Fame

The result

As you can see, our FlipViewPager looks pretty cool! If you would like to use this library, you can design horizontal pages any way you like it.

Our component is basically a friends list in a social app. But we can also suggest a few more use cases:

  • Color picker for a background color
  • Images with filters like in Instagram (the first page contains an original image and every next page shows how it changes with different filters)
  • Fashion apps that allow to “try on” clothes
  • Real estate apps with lists of homes and their pictures or detailed information inside the pager
  • Readers with article headlines and their quick previews

We can continue this list, but I guess you get the idea!

You can check the project here:

Tech

Customizable Constructor for Designers of Android Wear

Tech

The Dark Side of Android App Widgets

Design

How We Developed the Guillotine Menu Animation for Android

Excited to create something outstanding?

We share the same interests.

Let's team up!