FlipViewPager in List View - by JMK Android





This tutorial aims to provide a working page flip implementation for usage in ListView.

Compatibility :  Android 4.0+

Source code from : https://github.com/Yalantis/FlipViewPager.Draco

For a working implementation, Have a look at the Live Demo and download the Sample Project - attached :)  

 To achieve the same grid-looking view you should :

1. I have implemented the library in same project if this is not convenient, you can create a lib and reference it to the project

2. Create your main layout, it will be the view with 2 items merged together

friends_merge_page.xml
<!-- ... -->
   
    <ImageView 
        android:id = "@+id/first"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"
        android:contentDescription = "left image"
        android:scaleType = "fitXY"/>
    <LinearLayout
        android:layout_width = "1dp"
        android:layout_height = "fill_parent"
        android:layout_weight = "0"
        android:background = "#000000" /> 

    <ImageView 
        android:id = "@+id/second"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:layout_weight = "1"

        android:contentDescription = "right image"
        android:scaleType = "fitXY"/>

<!-- ... -->

3. Create layout for displaying an additional info for each merged item

                                friends_info.xml

<!-- ... -->
       <com.androiddelight.flip.sample.views.FontTextView
        style = "@style/TextView.Nickname"
        android:id = "@+id/nickname" />
    <LinearLayout
        android:layout_below = "@+id/nickname"
        android:id = "@+id/interestsPrimary"
        style = "@style/LinearLayout.Interests">
    <com.androiddelight.flip.sample.views.FontTextView 
        style = "@style/TextView.Interest"
        android:id = "@+id/interest_1" /> 
<!-- ... -->
</LinearLayout>

4. Create your adapter and extend it from BaseFlipAdapter<T>
  
 class FriendsAdapter extends BaseFlipAdapter<Friend> {
     @Override
         public View getPage(int position,
                 View convertView,
                 ViewGroup parent,
                 Friend friend1,
                 Friend friend2){
             // ...
     }
class FriendsHolder {
        // ...
    }
}

5. Set your adapter in ListView

final ListView friends = (ListView) findViewById(R.id.friends);
friends.setAdapter(new FriendsAdapter(this, Utils.friends, settings)); 

6. You can handle clicks just like in regular ListView

friends.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    
 @Override
 public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    Friend friend = (Friend) friends.getAdapter().getItem(position);
    Toast.makeText(FriendsActivity.this, friend.getNickname(), 
    Toast.LENGTH_SHORT).show();
    }
});
 
Live Demo :

Source code : Click here to download.

As always, Thanks a lot for reading...
Don't forget to share this post if you found it interesting!

If you find something to add to this post? or any other quick thoughts/hints that you think people will find useful? Share it in the comments & feedback's are most welcome.

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : FlipViewPager in List View - by JMK Android

1 comments: