An Android library introducing a stack of Views with the first item being flippable.

Overview

FlippableStackView

License Android Arsenal Maven Central

An Android library introducing a stack of Views with the first item being flippable.

Views inside the stack remain the aspect ratio of the FlippableStackView.

Library in action

Usage

For a working implementation of this library see the sample/ folder.

  1. Include the view inside your layout xml

    <com.bartoszlipinski.flippablestackview.FlippableStackView
      android:id="@+id/stack"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
  2. FlippableStackView is based on the specific PageTransformer used with the ViewPager. Therefore to fill the View you can use just a typical implementation of a PagerAdapter. In your onCreate method (or onCreateView for a fragment), setup all the parameters of the FlippableStackView.

    FlippableStackView stack = (FlippableStackView) findViewById(R.id.stack);
    stack.initStack(2);
    stack.setAdapter(mStackAdapter); //assuming mStackAdapter contains your initialized adapter

Important Note: The current implementation of the library will display the elements from the Adapter in the reverse order. In other words: view at position 0 of your adapter will be displayed at the bottom of the stack and view at position adapter.getCount()-1 will be visible first (available for the first flip).

Customization

The FlippableStackView is highly customizable to provide you with just the visual effect you really wanted.

There are three methods that allows for initialization of the stack:

  1. First one sets up the stack in the default way (scale-wise and orientation-wise):

    public void initStack(int numberOfStacked)
  2. The second one sets up the stack in the default way (scale-wise) but let's you choose the orientation of it:

    public void initStack(int numberOfStacked, StackPageTransformer.Orientation orientation)
  3. And the last one... a bit more advanced (lets you customize all the scale-related, orientation-related and alignment-related parameters):

    public void initStack(int numberOfStacked,
                          StackPageTransformer.Orientation orientation,
                          float currentPageScale,
                          float topStackedScale,
                          float overlapFactor,
                          StackPageTransformer.Gravity gravity)

Be sure to read about all the parameters in Javadoc before using the last one.

Including In Your Project

You can grab the library via Maven Central. Just add a proper dependency inside your build.gradle. Like this:

dependencies {
    compile 'com.bartoszlipinski.flippablestackview:library:1.2.1'
}

Developed by

  • Bartosz Lipiński

Credits

Maven Central deployment was performed using an awesome Gradle script by Chris Banes. This made things so much easier.

License

Copyright 2015 Bartosz Lipiński

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • OnClicListener() && OnLongClicListener() doesn't work?

    OnClicListener() && OnLongClicListener() doesn't work?

    Hi!

    i have some problems to listen to this events, i tried to set clickable propertie in xml, also tried programattically "setClickacle(true)" but anything occurs. I only get working with OnTouchListener and then i have to play with ACTION_DOWN, ACTION_UP and ACTION_MOVE.

    Anyone has tried?

    WontFix NotABug 
    opened by mscdroidlabs 6
  • Display the elements in normal order

    Display the elements in normal order

    Hi @blipinsk! The current implementation display the elements in reverse order. It`s possible to display in normal order?

    I`m having problem when trying to paging an List<> used in adapter. I'm trying to add new elements on start of the list so they can show on bottom. But what happens is strange: when I reach the end of first page, the new elements are inserted on top of stack, not on the bottom.

    I tried to implement normal order on FlippableStackView but was not successful. You know how I can do this?

    Thanks!

    Question 
    opened by adrielcafe 4
  • [SOLVED] FlippableStackView doesn't is showing in multiple fragments

    [SOLVED] FlippableStackView doesn't is showing in multiple fragments

    Hi @blipinsk! First of all, congrats for this great lib :)

    So, I have this layout below. The first 3 tabs must show the same FlippableStackView layout, but with different content. Each tab has a different Fragment instance that handles an FlippableStackView separately.

    Problem is: only first tab is showing FlippableStackView layout. It's like only one instance of FlippableStackView could exist.

    More strange part is: if I put the second or third tab as first tab, FlippableStackView will init normally on that tab, but on the other tabs will not.

    Layout and classes are below.

    Thanks in advance!

    2015-11-19 20 49 26

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context=".ui.MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:tabMode="fixed"
                app:tabIndicatorColor="@android:color/white"/>
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/main_bg"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </android.support.design.widget.CoordinatorLayout>
    

    fragment_stack.xml

    <com.bartoszlipinski.flippablestackview.FlippableStackView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/stack"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/main_bg" />
    

    FeedFragment.java (that handles FlippableStackView)

    public class FeedFragment extends Fragment {
        private List<Moment> moments = new ArrayList<>();
        private List<FeedItemFragment> momentsFrag = new ArrayList<>();
    
        @Bind(R.id.stack)
        FlippableStackView stackView;
    
        public FeedFragment() {
    
        }
    
        public static FeedFragment newInstance(List<Moment> moments) {
            Bundle args = new Bundle();
            args.putSerializable(Constant.EXTRA_MOMENTS, moments);
            FeedFragment frag = new FeedFragment();
            frag.setArguments(args);
            return frag;
        }
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            moments = (List<Moment>) getArguments().getSerializable(Constant.EXTRA_MOMENTS);
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_feed, container, false);
            ButterKnife.bind(this, rootView);
            updateMoments();
            return rootView;
        }
    
        @Override
        public void onDestroyView() {
            super.onDestroyView();
            ButterKnife.unbind(this);
        }
    
        private void updateMoments(){
            for (Moment moment : moments) {
                momentsFrag.add(FeedItemFragment.newInstance(moment));
            }
            FeedAdapter feedAdapter = new FeedAdapter(getFragmentManager());
            stackView.setAdapter(feedAdapter);
            stackView.initStack(4);
        }
    
        private class FeedAdapter extends FragmentStatePagerAdapter {
    
            public FeedAdapter(FragmentManager fm) {
                super(fm);
            }
    
            @Override
            public Fragment getItem(int position) {
                return momentsFrag.get(position);
            }
    
            @Override
            public int getCount() {
                return momentsFrag.size();
            }
    
        }
    }
    
    WontFix NotMyBug 
    opened by adrielcafe 4
  • Crash on Lollipop

    Crash on Lollipop

    Hey guys,

    with android 6.0 (sdk 23) we have this issue every time we swipe on a card...

    E/OpenGLRenderer﹕ resultIndex is -1, the polygon must be invalid! A/libc﹕ Fatal signal 7 (SIGBUS), code 1, fault addr 0xaa in tid 13796 (hwuiTask1)

    Any clue?

    WontFix NotMyBug 
    opened by Prayer-RecycleSmart 3
  • Move items programatically

    Move items programatically

    Hi,

    Not really an issue, just a question. Would it be possible to move the items inside the StackView programatically? Imagine I have a button and once I click it I want to see the next item on the array.

    Any ideas?

    Thank you!

    Question 
    opened by RobertoAlvarezCeballos 2
  • Crashed on android 6.0

    Crashed on android 6.0

    Hi sir, Somehow i got crashed when testing on simulator 6.0. It works fine on my phone 4.x The crash log:

    03-14 13:48:09.027 12923-12965/myapp W/EGL_emulation: eglSurfaceAttrib not implemented 03-14 13:48:09.027 12923-12965/myapp W/OpenGLRenderer: Failed to set EGL_SWAP_BEHAVIOR on surface 0x9ee09a20, error=EGL_SUCCESS 03-14 13:48:09.111 12923-12965/myapp E/Surface: getSlotFromBufferLocked: unknown buffer: 0x9f2a0eb0 03-14 13:48:10.947 12923-12987/myapp A/OpenGLRenderer: Error: Spot pair overflow!!! used 29, total 18 03-14 13:48:10.947 12923-12987/myapp A/libc: Fatal signal 6 (SIGABRT), code -6 in tid 12987 (hwuiTask1)

    Any idea why? Thanks :)

    Not Enough Information 
    opened by sleith 2
  • Infinite View Pager And Swiping Effect

    Infinite View Pager And Swiping Effect

    Hi I am using these library, couple of additional enhancements i need here

    1. with Orientation Vertical i need horizontal swiping effect how to achieve these

    2. Suppose i has 4 items in Flippable stack view after swiping the 4 item again if i swipe i should able to go to first item again its a kind of infinite view pager

    Please tell me how can i achieve these two enhancements

    Question 
    opened by naveenvenkannagari 2
  • Card aligned on left

    Card aligned on left

    Hi All,

    I m having an issue when i relaod the stack: basically when Im reloading the stack, and it doesnt respect my layout. I get that only card aligned on the left. Then if put more elements on the stack and i relaod it everything seems to be fine and all my cards are aligned as expected.

    I really cant fix this misalignment, can anyone help me with this?

    Investigating 
    opened by thepelican 2
  • StackAlways Aligned Center

    StackAlways Aligned Center

    I just want to make it aligned to quite right of my Layout.But it always aligned to centered only.Even though i make some changes like layout:gravity:start and so on

    opened by trinadhkoya 1
  • Stack Position changing

    Stack Position changing

    Hi, Thanks for the great Library. I need a help in the stack of the library. Currently in Horizontal orientation of the library the stack are in left side of the view. My requirement is that i need that stack in the Top of the view like in the orientation Vertical. How can I achieve that.Please Help.

    Duplicate 
    opened by renjithkrish89 1
  • Infinite loop

    Infinite loop

    Thanks for the great library.

    I have two questions:

    • how to implement infinite loop to allow to swipe indefinitely?
    • how to make horizontal swipes in both direction - left or right? Both loads next card.

    Thanks!

    Question 
    opened by edbond 1
  • Implement infinite scroll.

    Implement infinite scroll.

    I have implemented the library in a horizontal orientation, I have two items in my list, what I want is that both the items should be shown initially, one below the other, also when I swipe, the top view must come below the new one. Can this be implemented? The library has solved 90 per cent of my problems.

    opened by AtharvaAbsolute 1
  • Include it with scale Animation

    Include it with scale Animation

    Hi Blipinsk Thaks for this helpful library it give me exactly what i wanted but there's a little problem when i add it to layout then i use tag then i scale up the view then the Stackview doesn't appear and here's the code:

    <FrameLayout 
        android:id="@+id/timeLineContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/backgroundColor"
        android:clipChildren="false"
        tools:context=".fragments.TimeLineFragment">
     <RelativeLayout
            android:id="@+id/prayerContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="50dp"
            android:clipChildren="false"
            android:orientation="vertical">
     <include
                android:id="@+id/Fajr"
                layout="@layout/prayer_dialog"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="2dp" />
       </RelativeLayout>
    </FrameLayout>
    
    opened by meMuhammadkamal 1
  • 4.1.2 click problem

    4.1.2 click problem

    I have samsung galaxy s3, with os 4.1.2. When i click on the button at a card, the click is not go to that shown card, instead somehow the click listener went to other card. I test on other devices but works fine. Any idea? thx

    Bug Investigating 
    opened by sleith 5
  • How to show StakView with increased overlap height without bottom clip

    How to show StakView with increased overlap height without bottom clip

    Hi Blipinsk,

    Thanks for wonderful library. I could able to achieve Stack of Cards UI with more overlap height in between the cards. I have referred the code from branch "feature/Stack_Anchoring". The implementation is in the exact way I wanted. But I have stuck with a problem with this implementation. With overlap factor of 10.0f, the bottom part of the Stack View is clipped. But items will be shown as it is in the master branch implementation with much smaller overlap height. I want to have larger overlap height as in Stack_Anchoring branch implementation without bottom part of the Stack clipped. How can I achieve this? Please help me.

    Regards Varnesh

    Question 
    opened by Varnesh 3
Owner
Bartek Lipinski
android engineer @reddit | former android tech lead @thefabulous | recovering feature creep💉| amateur air-drummer 🥁
Bartek Lipinski
WizardTower - What will eventually be a Roguelike about being a powerful wizard, with a tower.

Wizard Tower Roguelike by sgibber2018 Description: This is a Roguelike I've been wanting to make for a long time. The premise is really simple: you ar

Sam Gibson 0 Jan 5, 2022
Customizable Item Setting View Android

ItemSettingView Simple ItemSettingView and Custom Installation Add it in your root build.gradle at the end of repositories: allprojects { reposito

Andhika Yuana 15 Aug 19, 2022
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
A tinder like swipeable card stack component

AndroidSwipeableCardStack Change log: provide option to infinitly swipe in a loop card rotation setting card gravity setting undo animation Thanks for

wenchao jiang 824 Nov 10, 2022
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 flip

Emil Sjölander 924 Nov 10, 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
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
💳 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
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
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.

Android StackBlur Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. Th

Enrique López Mañas 3.6k Dec 29, 2022
Android library providing bread crumbs to the support library fragments.

Hansel And Gretel Android library providing bread crumbs for compatibility fragments. Usage For a working implementation of this project see the sampl

Jake Wharton 163 Nov 25, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Dec 6, 2022
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023