emilsjolander / android-flipview

A small, easy to use android library for implementing flipping between views as seen in the popular Flipboard application

FlipView

About

This library is made to be very easy to use and at the same time be feature complete. With only a few lines of code you can have a flipping animation between your views, this looks and acts very much like the Flipboard application.

All flipping animations should be very smooth and i have added lighting effects so the flipping look more realistic.

Honeycomb (api lvl 11) or above is required for this library to work properly, however it will compile (and run, though without good performance) for much lower versions with just a few tweaks.

Download a compiled version of the sample here: https://www.dropbox.com/s/tvmdhre4ra8l41p/sample-debug-unaligned.apk

Installing

###Gradle Add the following gradle dependency exchanging x.x.x for the latest release.

dependencies {
    compile 'se.emilsjolander:android-flipview:x.x.x'
}

Usage

After installing, create a layout file container a something similar to this:

<se.emilsjolander.flipview.FlipView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:flipview="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/flip_view"
    flipview:orientation="vertical"
    flipview:overFlipMode="glow" />

In your activity/fragment you should do somthing like this:

FlipView flipView = (FlipView) findViewById(R.id.flip_view);
MyAdapter adapter = new MyAdapter();
flipView.setAdapter(adapter);

MyAdapterin this case is just a normal adapter, nothing different from on you would use with a ListView.

Api

I have designed the api to be as similar as possible to that of a ListView.

FlipView uses a regular ListAdapter, get and set the adapter with the following methods:

void setAdapter(ListAdapter adapter);
ListAdapter getAdapter();

Use the following methods to get the number of pages and what the current visible page is.

int getPageCount();
int getCurrentPage();

The following methods work like scrollTo, smoothScrollTo, scrollBy and smoothScrollBy from ListView.

void flipTo(int page);
void smoothFlipTo(int page);
void flipBy(int pageDelta);
void smoothFlipBy(int pageDelta);

Peaking is a way to inform the user that there is more content, or to teach the user how to interact with your application. Peaking can be done either once or until the FlipView has been interacted with.

void peakNext(boolean once);
void peakPrevious(boolean once);

FlipView supports both vertical (default) and horizontal flipping. I feel it would be wrong to change the orientation dynamically so i have limited it to being set via xml.

boolean isFlippingVertically();

This is how to set a listener on the FlipView to recieve callbacks.

void setOnFlipListener(OnFlipListener onFlipListener);

There are multiple over flip modes. The 2 that exists now are GLOW and RUBBER_BAND. GLOW is using the edge glow effect seen in all android lists and is the default over flip mode. RUBBER_BAND is more like the iOS way to inform of the end of lists, this is also a lot like the flipboard app informs users that they are on the first/last page. This can be set in xml using the following attribute. The mode can be either "glow" or "rubber_band".

flipview:overFlipMode="glow"

Here are the corrosponding java method calls. The OverFlipMode enum contains GLOW and RUBBER_BAND values.

void setOverFlipMode(OverFlipMode overFlipMode);

There is also a listener for detecting over flip. This is usefull when wanting to implement pull-to-refresh functionality or just detecting that the user is intressted in seeing more data.

void setOnOverFlipListener(OnOverFlipListener onOverFlipListener);

Much like AdapterView subclasses you can set a view that will be shown/hidden depending on if the FlipView has any data.

void setEmptyView(View empty);

Remember that you are responsible for adding the view that you pass into this method into the view hierarchy. A typical way of using this method is to include a view in your layout file with android:id="@+id/empty_view" and then putting the following code in your onCreate() method.

mFlipView.setEmptyView(findViewById(R.id.empty_view));

Contributing

Pull requests and issues are very welcome!

Feature request are also welcome but i can't make any promise that they will make it in. I would like to keep the library as general as possible, if you are unsure you can just ask before you code ;)

android-flipview's Issues

Problem when running in tablet 10"

When run in a 10" tablet (Galaxy Tab 3), the screen is half white. See the following image as example

refresh page OnCheckListener()

First i want to thank for this great library. I tried also the openaphid, but here no flickers at all.
On my FlipPages are a CheckBox and Switch, at OnCheckListener() a TextView should change.
But it changes always the next Page. Only at last Page works like i wish, because no next Page available.

My BaseAdapter uses ViewHolder() and OnCheckListener() implemented in getView().
Its the only View which changes his content dynamically on every Page.

Another thing, maybe they are coherent. By OverFlip on first/last Page a TextView ("start"/"end") become visible at FlipView (means behind FlipPage). On last Page TextView is in front of FlipPage and on first behind like i promised.

Thanks for your attention
Cheers

Add rubber band overscroll mode

Api to set overscroll mode. Settings should be OVER_SCROLL_RUBBER_BAND and OVER_SCROLL_GLOW (this is as it is now and should be the default value)

fragment support

Bug in sample code

please add the following features

Thanks for your great job and wish to add the following
1 flipview.disable() that disables touching the flipview
2 fliptoposition(int pos)
3 setadapter(new adapter(), initial position)
4 rubber band to be more flexable
5 replacing glow effect with gradient and shadow effects making it more realistic
6 there is a bug on flipping, some black noise appears
7 flipview.getcurrentview()
8 flipview.continousflipping(int delay)

please post code that helps in starting flipview at position 0 until you add the new features
Finally,i would like to thank you again for the great job you have made until now

Refresh FlipView to update screen

In my adapter I fetch images from the Internet via the Picasso library and I use a placeholder image while the download is in progress. In some cases, the placeholder image is overlayed on top of the downloaded image. If I touch the image and start a flip, the overlay disappears and everything is OK.

Is there a way to refresh the FlipView when the image has been downloaded in order to update the screen?

Initial state is non-functional

When we initialize the FlipView with basic TextViews, the initial load state shows the bottom part flapping back and forth. In this state, when we call flipTo it will not go to that page, and if we call smoothFlipTo it will flip to that page, then immediately return to the initial page, as though it was reset.

Curiously, if we force it to flip by hand once when it first loads, the hanging behavior stops (it becomes static), then both flipTo and smoothFlipTo work more or less as expected.

It also seems to wrap around to -1 when we go over the top.

Edit: we've tracked the error, and it appears that the peekNext (spelled peakNext) was running indefinitely, and it was resetting the flipDistance value to 0. Recommendation: halt the peek behavior as soon as flipping is started. I would do a pull request but Gradle won't build the project on my computer for some reason.

add test for updated adapter

Save state on orientation change

How to getView in exibition

I'm using your library and am very happy with it .

But I have a problem , I 'm loading images on the internet .

I need to load the image by index , and the method which I believe is what comes back to me is the onFlippedToPage method.

But when I try to get the corresponding view to display page it returns me null

@Override
public void onFlippedToPage(FlipView v, int position, long id) {
    Log.i("pageflip", "Page: " + position);
    View _view = null;
   _view = v.getChildAt(position);
    if(_view != null){
        ImageView img_left = (ImageView) _view.findViewById(R.id.imgLeftBook);
        if(img_left != null){
            img_left.setImageDrawable(getResources().getDrawable(R.drawable.ic_book_reload));
        }else{
            Log.i("pageflip", "img_left empty: " + position);
        }
    }else{
        Log.i("pageflip", "View empty: " + position);
    }
}

hardwareaccelated="true" doesnt work with ViewHolder

I am using you library , and inside the flip adapter i use the ViewHolder pattern . reuse the recycled views . it doesn't update the textview text . when i use the recycled view .

Getting glitches in between as the middle half renders

Hi emilsjolander,

I am using your library for making an application. And its working very good. But i am having some glitches in between when the second haff of the next page appears while filpping.

Please give me some solution for that.

Thanks in Advance....

FlipView with ViewPager inside misbehaves

Thanks for your nice library. But if i use ViewPager inside FlipView then the content of the ViewPager is not visible till i touch the area of ViewPager. I didnot changed your code, I just try to implement ViewPager inslide Flip. That Issue is happening every time when i go the next page.
And is that possible to stop the movement of first page.
I upload video on youtube to show that only the VewPager's text appears when i touched the pager's area. Here is the link https://www.youtube.com/watch?v=4YY4MeIl4rI&feature=youtu.be

Horizontal mode

When i put flipview:orientation="horizontal" the effect remains vertical...

No glow when trying to flip at top/bottom

Add a "end of list" glow

How does FlipView compare to android-flip?

It seems that android-flip (https://github.com/openaphid/android-flip) aims to achieve the same goals, so how does FlipView compare to android-flip?

Add support for setEmptyView(View) similar to that of a listview

add rtl support

languages from right to left ,fli pages from right to left

4.3 rendering issues

the flip doesn't render right anymore. if you have no 4.3 device I can make a video.

Peak animation does not end if touch was consumed by child view

Crashes with empty datasets

View lose content while flipping

Remove the flipping animation at first view

There's an animation when at the first item at first view and I want to remove that but don't know how to.

Issue when use flip, he cut when i do flip

Hello, please any one could help me, i attach 2 pictures, when i start flip move he "cut" one part and only show half "image", could any one give any idea if need i put my source code

Sticking page

Sometimes there is a sticky page.
Page flipped, but the onFlippedToPage method is not called and the shadow remains (visible when view has transparent elements)

Pull to refresh

Hi emilsjolander,
thank you for sharing great lib.
I has use this lib in my app. This working fine, however, if you could train for me. How can i implement pull to refresh like flipboard.
Thanks in advance!

Access to mIsFlippingEnabled field

Hi, is it possible to create setter (and maybe getter) for this field? I have to steal touch event of FlipView and this field allows me to do it, but its marked as private and i dont have access to it. I am now setting it via reflection but i dont like it for obvious reason. Thanks

Scroll for long content

In my project some content is long, so it needs scrolling to be viewed.
For android-FlipView I use this item layout

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ScrollView01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <RelativeLayout
        android:id="@+id/RalativeLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="30dp"
        android:background="#dfdfdf" >

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:maxWidth="600dp"
            android:padding="5dp"
            android:paddingBottom="1dp"
            android:textColor="#615F5C"
            android:textSize="35sp" />

        <ImageView
            android:id="@+id/newsImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/title"
            android:layout_centerHorizontal="true"
            android:adjustViewBounds="true"
            android:contentDescription="@string/img_dsc"
            android:maxWidth="600dp" />

        <TextView
            android:id="@+id/contentTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/newsImage"
            android:layout_centerHorizontal="true"
            android:maxWidth="600dp"
            android:padding="5dp"
            android:paddingBottom="1dp"
            android:textColor="#615F5C"
            android:textSize="19sp" />
    </RelativeLayout>

</ScrollView>

Problem here is that when I scroll one content to bottom and then flip to another content and then back this page in same state(shows the bottom side of content)
How I can fix it? I need to show always the top of content when flipping.

Flipping effect color control

How do I control the color of the effect, in the sample app, the effect starts with a glowing light color then flips over.

I tried to add to my application but it starts with a black color that looks ugly on the white background, I even tried to put a red background, but same thing.

Is it customizable?

smoothFlipTo

I want to display a specific page when my FlipActivity is displayed.
I tried to use smoothFlipTo (at the end of FlipActivity.onCreate) but it doesn't work... it's always the first page which is displayed...
How could I do that?

Stay on same page if ids are stable

When the adapter data changes, stay on the same page(Id) if the adapter has stable ids and the id still exists in the dataset

Bug on emulator and Galaxy SIII i9300

Hi, when the sample app opens in my cellphone (Galaxy SIII - i9300), the upper half keeps white and the other one is displaying correctly, after you swipe to the next page, you look all correctly. This bug happens even when you're swiping up or down, it looks a half correct and the otherone looks white. This happens with the Android Emulator too, I'm compiling with 3.0 and I'm testing it over Android 4.3 on both devices.

There is a way to make the flipview look good in all devices? Thanks

This one is when you open the app:

This one is swipping from page 1 to 0:

Out of memory issue with many pages (40-50) holding hi-res images

I think there's something wrong with recycling views, or pages are not recycled at all, is it possible to add an option to recycle after X-Pages before/after the current page,
I think that this would affect smooth flip to, but at least that would be better than running out of memory

Sometimes I have an error

java.lang.NoSuchMethodError: android.view.View.getLayerType
at com.epic.flipview.FlipView.setDrawWithLayer(FlipView.java:874)
at com.epic.flipview.FlipView.dispatchDraw(FlipView.java:643)

I don't know that error is ?
Sometimes I have it.

I have another question: in your sample code, the min sdk is 8. With devices have sdk < 8, can lib run well ?

I'm using u'r library,I'm loading data from a webservice it consists of images when it comes to middle of the flip it's strucking and fliping...that to i'm loading images using picaso library..

Flip error with galaxy nexus

I have an app that use your library.
When I flip a page, that has a image full screen. => Flip error
Screenshot:
https://mail-attachment.googleusercontent.com/attachment/u/0/?ui=2&ik=ae94870c41&view=att&th=140a915e0f839259&attid=0.1&disp=inline&realattid=1444125400424775680-local0&safe=1&zw&saduie=AG9B_P8ObSoejVAbNJOZAW24Q-6Q&sadet=1377244806426&sads=2C5IaCOMP7RKd7Hw_75yvBxUBjU&sadssc=1

https://mail-attachment.googleusercontent.com/attachment/u/0/?ui=2&ik=ae94870c41&view=att&th=140a915e0f839259&attid=0.2&disp=inline&realattid=1444125400424775680-local1&safe=1&zw&saduie=AG9B_P8ObSoejVAbNJOZAW24Q-6Q&sadet=1377244827570&sads=NfFqx_cEo3Ojxck1JJq4lfac6zQ

In other device, my app is good.

mAdapter.getItemViewType nullPointException

Hi emilsjolander !

I don't know why but i use a conplex layout include textView,ImageView, it's has problem in viewForPage at line final int viewType = mAdapter.getItemViewType(page);

I've tried to set view type in adapter, it's still happend. But if i replace by final int viewType= 0;
It's work fine.

another question : i want to add two pages for first and last page, and user only flip 3/4 of view like flipboard do, so what can i do to make it ?

Thanks for your library !

Bug in sample code

Can't make it work with a SimpleCursorAdapter

Hi,

I can't make it work with a SimpleCursorAdapter. I got a nullpointerexception

java.lang.NullPointerException
at SimpleCursorAdapter.bindView(SimpleCursorAdapter.java:118)
at android.support.v4.widget.CursorAdapter.getView(CursorAdapter.java:256)
at se.emilsjolander.flipview.FlipView.getView(FlipView.java:417)
at se.emilsjolander.flipview.FlipView.fillPageForIndex(FlipView.java:382)
at se.emilsjolander.flipview.FlipView.setFlipDistance(FlipView.java:367)
at se.emilsjolander.flipview.FlipView.flipTo(FlipView.java:1124)
at se.emilsjolander.flipview.FlipView.dataSetChanged(FlipView.java:226)
at se.emilsjolander.flipview.FlipView.access$000(FlipView.java:33)
at se.emilsjolander.flipview.FlipView$1.onChanged(FlipView.java:86)
at android.database.DataSetObservable.notifyChanged(DataSetObservable.java:37)
at android.widget.BaseAdapter.notifyDataSetChanged(BaseAdapter.java:50)
at android.support.v4.widget.CursorAdapter.swapCursor(CursorAdapter.java:347)

The "from" in the SimpleCursorAdapter is null.
It works well when i use a ListView instead of FlipView.

Rubber band overflipper should be a bit more elastic

The rubber band overflipper has a bit too much tension

How to set start page

I have 100 page, and i want startpage at 50. How to set start page?

Thanks

screen scrolls 2 pages instead of 1

if the "horizontal" orientation is used and the screen is in landscape mode, then a full swipe on the screen scrolls 2 pages instead of 1

flipview:orientation="horizontal"

Scroll after Flip

First of all, great library!

what I'm up to is to start to scroll after flipping once. For this reason i implemented a ScrollView for the second Page. I disabled the FlipViews touchevent methods and when i start to swipe over the display a scrollbar becomes visible. Unfortunenately the view does not scroll corresponding. It might be an issue with the view-hierachy, any idea?

Greetings from germany,

JackDanyels

Center Cropped ImageView is Expanding on Page Turn

I have a bunch of image views on my flipview page that are center cropped. As I'm turning the page the image view is expanding. I have a horizontal page turn and the image is expanding upward. The image being exposed while it is expanding is the part of the image being cropped out.

This doesn't happen with the squares that contain web views or the square that contains image views with bitmaps not larger than their container.

Any thoughts on that? Library is excellent btw. Only issue I've had.

Maven central

Flip Webview

How can I flip with webview adapters ?
I design a layout that have a web view -> flip error

Adapter should preload next page

Hi,

great Library but I'm missing a way to force the adapter to preload the next page by calling getView? Is there a way to do this?

thanks in advance and greetings from germany,

JackDanyels

use gradients for shadow/lighting

Improve the look of shadow / lighting of pages by using a gradient instead of a solid color overlay

Images not displayed

I have images on every page, and images on the 1st page are visible when the flipview loads at the start. But when I start to flip thru pages, images on every page cannot be seen.

I'm testing this on a Genymotion emulator, it's a Nexus 4 virtual machine with Android 4.

Hope this can be fixed!