How To Implement Flipboard Animation On Android Tutorial

How To Implement Flipboard Animation On Android Tutorial

(image source: github.com/openaphid/android-flip)

This tutorial will show you how to implement the FlipView Animation library to accomplish the flip effect.

I’ve played around with the library and created the app FlipNote, a simple note taking app. Check it out on Google Play if you’re interested on how the flip effect looks on a real device.

Add FlipView Animation Library

Download the amazing library from openaphid and add it to your eclipse project.

Click on File -> New -> Other -> Android Project from  Existing Code and select the FlipView Library and then hit Finish.

ImportProject

Now all we need to do is to link the library to your project. Right click on your project, then go to properties -> android and add it as a library. Make sure is Library is not checked.

Library

 

How To Use The FlipView Library

Create a simple activity_main.xml layout with one TextView.

File: activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/note"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

This is how your OnCreate method in your MainActivity should look like.

File: MainActivity.xml

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
        
    ArrayList<String> notes = new ArrayList<String>();
    notes.add("Come");
    notes.add("On");
    notes.add("Flip");
    notes.add("Me");
        
    //You can also use FlipViewController.VERTICAL
    FlipViewController flipView = new FlipViewController(this, FlipViewController.HORIZONTAL);
        
    //We're creating a NoteViewAdapter instance, by passing in the current context and the
    //values to display after each flip
    flipView.setAdapter(new NoteViewAdapter(this, notes));
        
    setContentView(flipView);
}

We are creating here our data and passing it to our custom adapter. Hover over the red underlined classes and import the missing classes. You can tell FlipView to start from a different position, by passing in an index flipView.setAdapter(new NoteViewAdapter(this, notes), currentIndex);

Let’s fix the last error by creating the missing NoteViewAdapter class. Add this code after your OnCreate method.

File: MainActivity.xml

public class NoteViewAdapter extends BaseAdapter {
        private LayoutInflater inflater;        
        private ArrayList<String> notes;

        public NoteViewAdapter(Context currentContext, ArrayList<String> allNotes) {
            inflater = LayoutInflater.from(currentContext);        
            notes = allNotes;
        }

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

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View layout = convertView;

            if (convertView == null) {
                layout = inflater.inflate(R.layout.activity_main, null);
            }            

            //Get's value from our ArrayList by the position
            String note = notes.get(position);

            TextView tView = (TextView) layout.findViewById(R.id.note);

            tView.setText(note);
            return layout;
        }
    }

Our getView method is called on every flip and all we’re doing here is setting the TextView with the next value.

Sit back, take a sip from your hot brew and run your project.

Don’t forget to join or newsletter and get free android tutorials to enjoy with your hot brew.

  • do you have a twitter that i can follow

    • Swaroop Lal

      Hi I tried to implement it but I cant install the library inside the studio.can you pls sugest any tutorials for installing openahphid library

  • gurisingh

    I’ve added the twitter button to the posts.

    • Swaran Godla

      hello gurisingh,

      i’m using flip view controller in my app. Everything is working fine, but getview method calls twice at first time, when app loads. and current view returns the position or id of next view. I want to make it more usable. would u like to help me to get the position or id of current view? i’ll really thankful to u.

      • gurisingh

        Hi Swaran,

        I think I fixed a similar issue like this.

        1. Open FlipViewController.java
        1.1. add this line to the Controller properties on top.
        public static View currentView = null;

        1.2. In the setSelection method on line 320 add this
        currentView = selectedView; after line
        bufferedViews.add(selectedView);

        2. Open your MainActivity.java
        2.1 Add this to the properties list on top
        private static View currentView = null;
        You can probably set this to a not-static property if you don’t use it outside the
        activity.

        2.2 Reset the properties always to null in the OnCreate method

        currentView = null;
        FlipViewController.currentView = null;

        2.3 In the getView method of your main activity you can do this:

        if (convertView == null) {
        layout = inflater.inflate(R.layout.activity_create_note, null);
        currentView = FlipViewController.currentView;
        } else {
        currentView = layout;
        }

        – When you create the flipView instance set a listener to keep updating the
        current view

        flipView.setOnViewFlipListener(new FlipViewController.ViewFlipListener() {
        @Override
        public void onViewFlipped(View view, int position) {
        currentView = view;
        }
        });

        This will make sure you always have the correct view in the static property currentView

        • Swaran Godla

          Thanks for giving me ur precious time. Sir , but still it’s working as before. Sir can u plz mail me demo project which will help me to understand better.
          my email id is “godla91@gmail.com”.

        • Swaran Godla

          Hello #Gurisingh in this library everything is working perfectly. But here is minor problem , when i flip for the next page , after completion of animation, it generates a blink. would u like to help me for resolve this problem. thanks

  • Deepak Ror

    you make it very simple ..but can it work with 2.3 to above android versions.

    Thanku very much.

  • Ajay

    Great Library you found buddy…

  • Pravinsingh Waghela

    Great Job done. You made it so simple and easy to implement. Many thanks to you from the bottom of the heart…

  • Muhammad Abdusamad

    When I run the code I get a nullpointer exception after the 3rd page loads. The error points to setupAdapterView on line 471 of FlipViewController? Anyone else having this problem?

    • gurisingh

      Hi Muhammad

      I am not having any errors in regards to this.

      Make sure your GetView method, in your MainActivity is not is not causing the error.

  • Simran Bakshi

    hi, how do i use it on a gradle project?

  • Arash Abbasi

    Hi, i want to use this effect on muPDF. would you like to help me? My Completed question is here: http://stackoverflow.com/questions/30858689/using-mupdf-with-curl-flip-effect

  • Pingback: Openaphid Flipview Implementation - BlogoSfera()

  • makeinfo14

    Flipboard like demo app using openaphid + retrofit in Android Studio:
    http://themakeinfo.com/2015/08/flipview-retrofit/

  • Noha

    How can I use GridView with this library? thanks.

    • Gurinder

      Have you tried using a GridView in your activity_main.xml instead of the RelativeLayout? You should be able to setup the GridView in your GetView method.

      • Noha

        I did setup the Gridview in getView method, but what happens is that whenever I flip it calls GridView from the beginning, not what’s next.

  • Gaurang Talati

    Hello Gurinder.. Can you plz help me in this animation.. rather than gesture.. i want to make animation on a click event.. so what are the changes i have to make and in which file??

  • Gaurang Talati

    Hey Gurinder.. Just needed a help in this animation.. Rather then Gesture.. i want to make animation on a click event.. Can you tell me the changes i have to make and in which files… Thanks

  • Amit Tumkur

    Hey i am able to use your library very well for adapters but is there any possibility that i can use flip animation for a single fragment screen and i guess its possible because i saw vertical flip animation used by Havells mCatalogue app on play store. And flip works for each item of adapter but i want vertical flip for a single screen showing several visible items of gridview. Please let me know soon, i have an urgent requirement.

  • Natheem Safin

    hello guys i need dainagual flip in android ?? plz help