blipinsk / flippablestackview

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

flippablestackview's Issues

[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!

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

    }
}

How to make views appear from the bottom?

I want to make the views appear from the bottom rather than from the top. Is that possible?

StackView Position issue

I want to get stack position but " return this.fragments.size();" this code not get true postion what can I do

After Pagination, few cards go invisible, but yet swipeble.

After last card is reached,I populate 10 more cards, but many cards seems to be invisible in between, yet still behaves the same(still swipeable, the back card comes front,if it is swiped down).

Thanks.

Any function to disable swipe?

Is there any function or method to disable swiping of stacks?

Flip stacks at the run-time

How can we flip stacks at the run-time, for example setCurrentItem(...) should behave but it's not working!

Any ideas?

Is it possible to add the multiple fragments?

Is it possible to add the multiple fragments in skackview?

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 able to get child view inside StackPageTransform

I was trying to get a child view from my ViewPager, but it returning error saying "cannot find symbol variable layout_divider".

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?

PageChangeListener not available?

How can I listen for the page(stack View) change listener as we get in normal view pager in android?

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

Not working inside scroll view

I added this in the scroll view, The whole page scrolling rather that particular item scroll.

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!

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>

Changing Stack anchoring

Horizontal gravity only allows for swiping the views to right. I would like to swiping view to left. Basically how to change the anchoring?

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

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

Horizontal page scroll.

Can you please suggest me the necessary changes for implementing horizontal page scroll?

How to show items in a loop?

In a default implementation i cannot scroll out of bounds.
How can I scroll items in a loop?
For example:
I have items 1,2,3,4. Now app shows item 4. I cannot scroll bottom (to item 1). How I can do it?
In a OrientedViewPager there are checks for the first and the last items.

Thanks.

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!

How can i set selection at particular index.

I am unable to set index .

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?

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.

How can I remove space from left and right of cards. It is leaving space on both ends

I am trying to reduce the space around the layout but don't know how to do it.

Restrict Scrolling

Is there a way I can restrict the scrolling between the pages.
I only want to scroll when some condition is fullfilled.

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?

Few cards not visible.

My cards are generated based on the position of the recyclerview clicked...So when I click the last item from recyclerview , cards are generated (list is reversed and passed to adapter) and I set the current card to last item using setCurrentItem() but when i scroll backwards, I face a few "invisible cards", it doesnt happen when I select first item in recyclerview though.

Thanks.

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!

Want to achieve the overlap padding height like the below snapshot .But unable to achieve due to overlap limitation 1.0

How to set display top stack but swipe to right?

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

How to increase the overlap height above 1.0f for the stackview ???

Init with gravity does not react on Lolipop 5.0.1

Hi, I want to place fragments of stack in direction from top to bottom, just in oppopsite as in example on the main page https://github.com/blipinsk/FlippableStackView/blob/master/FlippableStackView.gif
I call init like so
mFlippableStack.initStack(2, StackPageTransformer.Orientation.VERTICAL, 0.9f, 0.5f, 1f, StackPageTransformer.Gravity.BOTTOM);
Also I change to StackPageTransformer.Gravity.TOP but it seems the 'init' does not react to this parameter.
May I receive some suggestion please

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.

How to set Image Instead of the colors

I have been trying to set image instead of the color fragment but not able to do so can anyone help