Page Flip animation in Android

    As we can see at some reading book apps, they usally have page flipping animation, give us the feeling like reading real book! So, this design is more common in iOS. In Android, by customizing AdapterView - a view type contains subviews, we have a "flipable ListView" with animation. By searching on Internet, we find out that there are a lot of external libraries help us making this design. Through this post, I want to introduce one of them: Android-Flip. This is a useful ones, solving our requiment so well, please see this DEMO VIDEO first for easy visualize output:

Import libary

    Unfortunately, this lib is not avaiable in MavenCentral and it was build by Eclipse. So, you must download project as ZIP file from Github page.
    After that, do these follow step after creating a new own Android project:
- Extract ZIP file, you will see FlipLibrary folder inside FlipView.
- Import this folder as a new module to our project, see this post to learning this process step by step.
- After import it, this libarary become aphidFlipViewLibrary module, goto it's build.gradle file and change compileSdkVersion, builToolsVersion, minSdkVersion,... same as module app. In this project, it will be like this:

apply plugin: 'com.android.library'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        minSdkVersion 14
        targetSdkVersion 23
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}

Designing layouts

    This view which making this effect is FlipViewController. Make an activity layout contains it like this:
    Note: as you see in above layout, set flip:orientation="horizontal", view will flip horizontally:

 
    Another, if this property is "vertical", flip animation will be:

    Layout for each FlipViewController item view (only contains a TextView below ImageView):

Programmatically code

    The most important in this project is customizing an adapter (extends from BaseAdapter) for this view. Nothing complicated at all, we'll make this like a ListView simple adapter, provide a ViewHolder class to make scrolling smoother:

package info.devexchanges.pageflip;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class FlipperAdapter extends BaseAdapter {

    private AppCompatActivity appCompatActivity;
    private List<String> strings;
    private int[] drawableIds = {R.mipmap.black_cat, R.mipmap.cat, R.mipmap.cat_2, R.mipmap.cat_3,
            R.mipmap.cute_kittens, R.mipmap.cute_white_kitten, R.mipmap.explorer_cat, R.mipmap.funny_cat,
            R.mipmap.happy_caturday};

    public FlipperAdapter(AppCompatActivity appCompatActivity, List<String> strings) {
        super();
        this.strings = strings;
        this.appCompatActivity = appCompatActivity;
    }

    @Override
    public int getCount() {
        return strings.size();
    }

    @Override
    public String getItem(int position) {
        return strings.get(position);
    }

    @Override
    public long getItemId(int position) {
        return strings.indexOf(getItem(position));
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        LayoutInflater inflater = (LayoutInflater) appCompatActivity.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

        // If holder not exist then locate all view from UI file.
        if (convertView == null) {
            // inflate UI from XML file
            convertView = inflater.inflate(R.layout.item_page, parent, false);
            // get all UI view
            holder = new ViewHolder(convertView);
            // set tag for holder
            convertView.setTag(holder);
        } else {
            // if holder created, get tag from view
            holder = (ViewHolder) convertView.getTag();
        }

        holder.textView.setText(getItem(position));
        holder.imageView.setImageResource(drawableIds[position]);

        return convertView;
    }

    private static class ViewHolder {
        private TextView textView;
        private ImageView imageView;

        public ViewHolder(View v) {
            imageView = (ImageView)v.findViewById(R.id.image);
            textView = (TextView) v.findViewById(R.id.text);
        }
    }
}

    In activity code, I read a dummy text file to get data (Strings) and save in ArrayList, source is so light:

package info.devexchanges.pageflip;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;

import com.aphidmobile.flip.FlipViewController;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private FlipViewController flipViewController;
    private FlipperAdapter adapter;
    private ArrayList<String> stringArrayList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        flipViewController = (FlipViewController)findViewById(R.id.flip_view);
        stringArrayList = new ArrayList<>();
        readDataFromAssets();

        //create and attach adapter to flipper view
        adapter = new FlipperAdapter(this, stringArrayList);
        flipViewController.setAdapter(adapter);
    }

    private void readDataFromAssets() {
        BufferedReader reader = null;
        try {
            reader = new BufferedReader(new InputStreamReader(getAssets().open("loremipsum.txt")));
            String line;
            while ((line = reader.readLine()) != null) {
                stringArrayList.add(line);
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (reader != null) {
                try {
                    reader.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

    Over here, we have done for this project. After running we will have result as shown in the DEMO VIDEO.

Conclusions - References

    In this post, I've introduce a external libary can make flipping animation. By searching on Internet, we can see a lot of similar ones, like android_page_curl or android-FlipView, ... Each has its own strengths and weaknesses, you can choose the suitable ones.
    References:
- Official libary page on Github: https://github.com/openaphid/android-flip
- Author team blog: http://openaphid.github.io/

Author : Hong Thai

Share