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.

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.

 

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.