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

Overview

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 ;)

Comments
  • FlipView with ViewPager inside misbehaves

    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

    bug 
    opened by rahulkapoor1 15
  • mAdapter.getItemViewType nullPointException

    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 
    opened by redwind 12
  • Bug on emulator and Galaxy SIII i9300

    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:

    screenshot_2014-03-03-19-22-53

    This one is swipping from page 1 to 0:

    screenshot_2014-03-03-19-23-03

    opened by sebastian-ziegler 6
  • Sometimes I have an error

    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 ?

    opened by hoangpn412 5
  • Flip error with galaxy nexus

    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.

    opened by hoangpn412 5
  • 怎样才能将执行的mCamera.rotationX的那个View弄为圆角呢

    怎样才能将执行的mCamera.rotationX的那个View弄为圆角呢

    我改了这里面的代码,但并没有效果,还是矩形:

    private void drawFlippingShadeShine(Canvas canvas) {
    		final float degreesFlipped = getDegreesFlipped();
    		if (degreesFlipped < 90) {
    			final int alpha = (int) ((degreesFlipped / 90f) * MAX_SHINE_ALPHA);
    			mShinePaint.setAlpha(alpha);
    			canvas.drawRoundRect(isFlippingVertically() ? mBottomRect : mRightRect,
    					30,30,mShinePaint);
    		} else {
    			final int alpha = (int) ((Math.abs(degreesFlipped - 180) / 90f) * MAX_SHADE_ALPHA);
    			mShadePaint.setAlpha(alpha);
    			canvas.drawRoundRect(isFlippingVertically() ? mTopRect : mLeftRect,30,30,
    					mShadePaint);
    		}
    	}
    
    opened by negier 4
  • Getting glitches in between as the middle half renders

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

    opened by ashoksinghal 3
  • Center Cropped ImageView is Expanding on Page Turn

    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.

    opened by btate 3
  • Flipping effect color control

    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?

    opened by JYMatta 2
  • Scroll for long content

    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.

    opened by rafaelekol 2
  • Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR)

    Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR)

    I am getting this error Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR) and app got crashed on some devices like one plus 6 (Android 10) and moto g 10 (Android 11) . Would you please look into this issue when we are playing exoplayer video .

    opened by IamArmaan 1
  • Proposal to update build configuration and res attr

    Proposal to update build configuration and res attr

    Hi, it seems that your awesome library is not updated for too long. I tried to open it with Android Studio but failed to build. I updated the configurations –especially the build configuration– in my fork fikr4n:android-FlipView/master.

    I use your library in my project and it conflicts with others, so I added fv prefix to the attrs, in fikr4n:android-FlipView/attr-prefix.

    Have a look if you're not busy.

    opened by fikr4n 0
  • Unable to add in dependencies

    Unable to add in dependencies

    opened by sanket-salvi 1
  • Remove item from FlipView

    Remove item from FlipView

    Hi,

    I have tried different ways to remove item from flipview adapter like as listview. But it misbehaves.

    Any proper way of removing items from flipview.

    Thanks in advance.

    opened by reversecoder 0
  • Adapter should not preload next page

    Adapter should not preload next page

    Is there a way to prevent the adapter to preload the next page ? I want to load the next page ONLY ONCE the flip action has been completed...Is it possible ?

    opened by ClaudeHangui 0
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
Releases(1.1.0)
Owner
Emil Sjölander
Emil Sjölander
Janishar Ali 2.1k Jan 1, 2023
Highly customizable SlidingLayer as you have seen in Wunderlist

6Wunderkinder SlidingLayer for Android This repository hosts a library that provides an easy way to include an autonomous layer/view that slides from

Microsoft Archive 942 Nov 28, 2022
Highly customizable SlidingLayer as you have seen in Wunderlist

6Wunderkinder SlidingLayer for Android This repository hosts a library that provides an easy way to include an autonomous layer/view that slides from

Microsoft Archive 942 Nov 28, 2022
Android library implementing a poppy view on scroll, similar to the one found in the Google Plus app

PoppyView PoppyView is a library which implements view on the bottom which come and go relative to the user scroll. It can be seen in the Google plus

Flavien Laurent 409 Nov 23, 2022
The CustomCalendarView provides an easy and customizable calendar to create a Calendar. It dispaly the days of a month in a grid layout and allows to navigate between months

Custom-Calendar-View To use the CustomCalendarView in your application, you first need to add the library to your application. You can do this by eith

Nilanchala Panigrahy 113 Nov 29, 2022
💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

The article on how this library was created is now published. You can read it on this link here. →. ?? EasyFlipView Built with ❤︎ by Wajahat Karim and

Wajahat Karim 1.3k Dec 14, 2022
⚡️A highly customizable, powerful and easy-to-use alerting library for Android.

Flashbar A highly customizable, powerful and easy-to-use alerting library for Android. Specs This library allows you to show messages or alerts in you

Aritra Roy 1.7k Dec 7, 2022
This is a library to help creating expanding views with animation in Android

About the Library inspiration This library is strongly inspired in this concept from Hila Peleg in dribble. See it below Working example For more deta

Diego Bezerra 944 Dec 27, 2022
An Android library introducing a stack of Views with the first item being flippable.

FlippableStackView An Android library introducing a stack of Views with the first item being flippable. Views inside the stack remain the aspect ratio

Bartek Lipinski 812 Dec 7, 2022
Name UI states, navigate between them, remember where you've been.

Deprecated Flow had a good run and served us well, but new use is strongly discouraged. The app suite at Square that drove its creation is in the proc

Square 2.8k Dec 29, 2022
This library offers a simple method to add a small badge icon to your ActionBar-MenuItem

Android-ActionItemBadge ActionItemBadge is a library which offers a simple and easy to use method to add a badge to your action item! Screenshots Incl

Mike Penz 1.3k Jan 1, 2023
A simple, customizable and easy to use swipeable view stack for Android.

SwipeStack A simple, customizable and easy to use swipeable view stack for Android. QuickStart Include the Gradle dependency dependencies { compil

Frederik Schweiger 1.5k Dec 30, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022
Dead simple Android Tooltip Views

TooltipView A dead simple way to to add tooltips to your Android app. <com.venmo.view.TooltipView android:layout_width="wrap_content"

Venmo 489 Dec 12, 2022
Animation View to Highlight particular Views 🎯 for Android

TargetView Animation View to Highlight particular Views ?? for Android, it can be Used with Views that you see important (Like CountDownTimer), And al

Anas Altair 53 Aug 7, 2021
ScratchView 7.0 0.0 L4 Java repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
Glass-break effect for views

BrokenView Glass-break effect for views. Demo Download APK Usage Android Studio dependencies { compile 'com.zys:brokenview:1.0.3' } Eclipse Just pu

null 858 Jan 6, 2023
ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal.

ScratchView Intro ScratchView repo is UX Design involving scratch cards like views which are scratched to reveal the information they conceal. There a

Harish Sridharan 1.1k Dec 24, 2022
Draggable views with rotation and skew/scale effects

DraggableView Draggable views with rotation and skew/scale effects. Usage Implement DragController.IDragViewGroup Create instance of DragController Ov

Eugene Levenetc 562 Nov 11, 2022