flipboard style animation on android

flipboard style animation on android

https://github.com/openaphid/android-flip/tree/master/FlipView

-> has some bugs.

http://www.techrepublic.com/blog/software-engineer/use-androids-scale-animation-to-simulate-a-3d-flip/

http://www.studyoverflow.org/2013/08/how-to-add-details-dynemically-in.html

http://www.ahotbrew.com/how-to-implement-flipboard-animation-on-android-tutorial/

Preview

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

I’ve played around with the library and created the app FlipNote,
a simple note taking app. Check it out in Google Play.

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

@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.
Note: You can tell FlipView to start from a different position, by passing in an index

1	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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

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.

http://openaphid.github.io/blog/2012/05/21/how-to-implement-flipboard-animation-on-android/

http://stackoverflow.com/questions/9374608/how-to-use-flipboard-effect-on-android?rq=1