A simple, customizable and easy to use swipeable view stack for Android.

Related tags

UI/UX SwipeStack
Overview

SwipeStack

A simple, customizable and easy to use swipeable view stack for Android.

Download License Apache Android Arsenal

Demo screen 1 Demo animation Demo screen 2

QuickStart

Include the Gradle dependency

dependencies {
    compile 'link.fls:swipestack:0.3.0'
}

Use it in your layout file

  1. Use the link.fls.swipestack.SwipeStack view in your XML layout file
  2. Set the parent view's clipChildren attribute to false

Example:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false">

    <link.fls.swipestack.SwipeStack
        android:id="@+id/swipeStack"
        android:layout_width="320dp"
        android:layout_height="240dp"
        android:padding="32dp"/>

</FrameLayout>

Create an adapter

Create an adapter which holds the data and creates the views for the stack.

Example:

public class SwipeStackAdapter extends BaseAdapter {

    private List<String> mData;

    public SwipeStackAdapter(List<String> data) {
        this.mData = data;
    }

    @Override
    public int getCount() {
        return mData.size();
    }

    @Override
    public String getItem(int position) {
        return mData.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        convertView = getLayoutInflater().inflate(R.layout.card, parent, false);
        TextView textViewCard = (TextView) convertView.findViewById(R.id.textViewCard);
        textViewCard.setText(mData.get(position));

        return convertView;
    }
}

Assign the adapter to the SwipeStack

Last, but not least, assign the adapter to the SwipeStack.

Example:

SwipeStack swipeStack = (SwipeStack) findViewById(R.id.swipeStack);
swipeStack.setAdapter(new SwipeStackAdapter(mData));

That's it!

Callbacks

Currently SwipeStack implements the following callbacks:

  • the SwipeStackListener notifies you when a view was swiped to the left / right or when the stack becomes empty.
  • the SwipeProgressListener notifies you about the progress when the user starts / stops dragging a view around.

Attributes

All attributes are optional.

allowed_swipe_directions specifies the allowed swipe directions. Default: both

animation_duration specifies the duration of the animations. Default: 300ms

stack_size specifies the maximum number of visible views. Default: 3

stack_spacing specifies the vertical distance between two views. Default: 12dp

stack_rotation specifies the maximum random ratation (in degrees) of a card on the stack. Default: 8

swipe_rotation specifies the rotation (in degrees) of the view when it gets swiped left / right. Default: 15

swipe_opacity specifies the opacity of the view when it gets swiped left / right. Default: 1.0

scale_factor specifies the scale factor of the views in the stack. Default: 1.0

disable_hw_acceleration set to true disables hardware acceleration. Default: false

Copyright Notice

Copyright (C) 2016 Frederik Schweiger

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
  • Vertical scrollbars disables swipe

    Vertical scrollbars disables swipe

    The stack is not responsive to swipes when and item of the stack has a TextView with scrollbars="vertical"attribute. Moreover, SwipeHelper's requestDisallowInterceptTouchEvent makes it difficult to customize a behavior.

    opened by RanyAlbegWein 1
  • stack is not refreshing

    stack is not refreshing

    mAdapter.setData(cardsList);

    public void setData(List<Card> cards) { this.mData = cards; notifyDataSetChanged(); }

    At first my cards list size was 3 then i removed 1 card from list and set it again to adapter and call notifyDataSetChanged(); but it is not refreshing list. It should show two cards stack. but still it is showing 3 cards in stack.

    opened by sagargoqii 1
  • Nativescript implementation

    Nativescript implementation

    This isn't so much of an issue, but a enhancement suggestion.

    Do you know if SwipeStack has ever been used in a Nativescript application? I think it would benefit a lot of users if a 'port' was created that was compatible with Nativescript.

    opened by mikeres0 1
  • SwipeStack not visible when converted to fragment

    SwipeStack not visible when converted to fragment

    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //return super.onCreateView(inflater, container, savedInstanceState); return inflater.inflate(R.layout.activity_cards, null); }

    opened by nixondevph 0
  • Adapter not triggered on my phone

    Adapter not triggered on my phone

    Everything works fine on my emulator (API 19, API 22, API 24) but when I install the application on my phone (API 24), adapter is never triggered...

    Is this a bug or is there a simple solution to this?

    opened by TriggerHappyHr 0
  • ViewPager inside adapter

    ViewPager inside adapter

    Hello.

    I don't have a strong knowledge about view processing in android but maybe this helps someone because library seems unsupported. If someone want to create complex layout, in my case it was ViewPager inside adapter of swipe stack, note that the layout processing doing in wrong order: At SwipeStack.addNewView() which called on onLayout() for children nodes performing following:

    bottomView.measure(measureSpecWidth | width, measureSpecHeight | height);
    addViewInLayout(bottomView, 0, params, true);
    

    But after several hours of reviewing android code and googling i found that right order is:

    addView(bottomView, 0, params);
    bottomView.measure(measureSpecWidth | width, measureSpecHeight | height);
    bottomView.layout(0, 0, width, height);
    

    If someone has deep knowledge about it and know on what exactly it affects, please explain. Hope that it helps someone.

    opened by panekzogen 2
  • How to use recycle view for every swipe card

    How to use recycle view for every swipe card

    @Frederik Schweiger you have made really nice swipe cards i'm currently using this in my one of the projects So using these cards i'm creating recycle view on every card but the data is been repeating for every card

    So my question is how to use recycle view with these swipe cards with non repeating values on every card...

    opened by snehalgongle 0
  • SwipeStack is not Visible

    SwipeStack is not Visible

    I would like to implement Swipe Stack View in my layout I have done all the things perfect yet I cant the SwipeStackView is not visible in my layout... Should the StackVIew be single in the Activity?

    Stack View inside layout and i have set android:clipChildren="false" in parent View.

    <link.fls.swipestack.SwipeStack
            android:layout_gravity="center"
            android:id="@+id/swipe_deck"
            app:disable_hw_acceleration="false"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            app:stack_rotation="10"
            app:stack_size="3" />
    
    

    This is how i have installed in my java file

    swipeDeck = findViewById(R.id.swipe_deck);
     swipeDeck.setAdapter(new SwipeLayoutAdapter(todayMeetingModelList));
            swipeDeck.setListener(new SwipeStack.SwipeStackListener() {
                @Override
                public void onViewSwipedToLeft(int position) {
    
                }
    
                @Override
                public void onViewSwipedToRight(int position) {
    
                }
    
                @Override
                public void onStackEmpty() {
                    swipeDeck.resetStack();
                }
            });
    

    and this is how i set the adapter

    public class SwipeLayoutAdapter extends BaseAdapter{
          private List<TodayMeetingModel> todayMeetingModelList;
    
          public SwipeLayoutAdapter(List<TodayMeetingModel> todayMeetingModelList) {
              this.todayMeetingModelList = todayMeetingModelList;
          }
    
    
          @Override
          public int getCount() {
              return todayMeetingModelList.size();
          }
    
          @Override
          public Object getItem(int position) {
              return todayMeetingModelList.get(position);
          }
    
          @Override
          public long getItemId(int position) {
              return position;
          }
    
          @Override
          public View getView(int position, View convertView, ViewGroup parent) {
    
              if (convertView==null) convertView = getLayoutInflater().inflate(R.layout.card_view_today_club_meeting,parent,false);
    
              TodayMeetingModel todayMeetingModel = todayMeetingModelList.get(position);
    
              TextView clubNameTV = convertView.findViewById(R.id.clubMeetingNameTV);
              clubNameTV.setText(todayMeetingModel.getClub_name());
    
              TextView timeTV = convertView.findViewById(R.id.timeTV);
              timeTV.setText(todayMeetingModel.getClub_meeting_time());
    
              TextView dateTV = convertView.findViewById(R.id.dateTV);
              dateTV.setText(todayMeetingModel.getDay_name());
    
              TextView addressTV = convertView.findViewById(R.id.clubAddressTV);
              addressTV.setText(todayMeetingModel.getClub_address());
    
              return convertView;
    
          }
      }
    

    My problem is the SwipeStackView is not Visible on the screen...

    opened by SimonPeter1909 10
  • Not working with object list

    Not working with object list

    JsonObjectRequest jsonObjectRequest = new JsonObjectRequest (Request.Method.GET, url, null, new Response.Listener() {

                    @Override
                    public void onResponse(JSONObject response) {
                        try {
    
                            JSONArray jsonArray = response.getJSONArray("articles");
                            Log.e("e1",""+jsonArray.toString());
                            List<NewsApiOrgCard> topHeadlinesArray = new ArrayList<>();
                            for(int i=0;i<jsonArray.length();i++){
                                JSONObject headline = jsonArray.getJSONObject(i);
                                NewsApiOrgCard card = new NewsApiOrgCard();
                                card.setAuthor(headline.getString("author"));
                                card.setDescription(headline.getString("description"));
                                card.setTitle(headline.getString("title"));
                                card.setUrl(headline.getString("url"));
                                card.setUrlToImage(headline.getString("urlToImage"));
                                card.setPublishedAt(headline.getString("publishedAt"));
                                topHeadlinesArray.add(card);
                            }
    
                            swipeStack.setAdapter(new NewsApiOrgSwipeAdapter(topHeadlinesArray));
                            }catch (JSONException e){
                            e.printStackTrace();
                        }
                    }
                }, new Response.ErrorListener() {
    
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        // TODO: Handle error
    
                    }
                });
    
         // Add the request to the RequestQueue.
        // Access the RequestQueue through your singleton class.
        MySingleton.getInstance(this).addToRequestQueue(jsonObjectRequest);
    }
    

    public class NewsApiOrgSwipeAdapter extends BaseAdapter { private List mData ; private Context context ;

    public NewsApiOrgSwipeAdapter(List<NewsApiOrgCard> data) {
        this.mData = data;
    }
    
    @Override
    public int getCount() {
        return mData.size();
    
    }
    
    @Override
    public NewsApiOrgCard getItem(int position) {
        return mData.get(position);
    }
    
    @Override
    public long getItemId(int position) {
        return position;
    }
    
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.news_api_org_news_card, parent, false);
        TextView stackCardTitle = (TextView) convertView.findViewById(R.id.stackcardtitle);
        TextView stackCardDescription = (TextView) convertView.findViewById(R.id.stackcarddescription);
        TextView stackCardAuthor = (TextView) convertView.findViewById(R.id.stackcardauthor);
        TextView stackCardPublishedAt = (TextView) convertView.findViewById(R.id.stackcardpublishedat);
        NewsApiOrgCard newsApiOrgCard = mData.get(position);
        stackCardTitle.setText(newsApiOrgCard.getTitle());
        stackCardDescription.setText(newsApiOrgCard.getDescription());
        stackCardAuthor.setText(newsApiOrgCard.getAuthor());
        stackCardPublishedAt.setText(newsApiOrgCard.getPublishedAt());
        return convertView;
    }
    

    }

    opened by Durgaprasad1541996 0
  • Adapter not called for the second time

    Adapter not called for the second time

    Adapter fills out nicely when I run it for the first time but when I run it for the second time without reloading the activity the adapter doesn't show up at all...

    Any thoughts?

    opened by TriggerHappyHr 1
Releases(0.3.0)
Owner
Frederik Schweiger
Freelance Flutter Engineer 👨‍💻 I have a thing for animations and nice UIs ✨ Let's build something great. Together.
Frederik Schweiger
⚡️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
A simple and customizable two or three states Switch View

RMSwitch A simple View that works like a switch, but with more customizations. With the option to choose between two or three states. (from v1.1.0) **

Riccardo Moro 656 Dec 2, 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
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
A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications

Tweaks A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications To include the library add

Guillermo Merino Jiménez 4 Jan 14, 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
Fully customizable implementation of "Snowfall View" on Android.

Android-Snowfall Fully customizable implementation of "Snowfall View" on Android. That's how we use it in our app Hotellook Compatibility This library

Jetradar Mobile 1.2k Dec 21, 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
Android View for displaying and selecting values in a circle-shaped View, with animations and touch gestures.

CircleDisplay Android View for displaying and selecting (by touch) values / percentages in a circle-shaped View, with animations. Features Core featur

Philipp Jahoda 287 Nov 18, 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
A nicer-looking, more intuitive and highly customizable alternative for radio buttons and dropdowns for Android.

SwipeSelector Undergoing for some API changes for a 2.0 major version, see example usage in the sample module! What and why? Bored of dull looking rad

Iiro Krankka 1.1k Dec 30, 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
:balloon: A lightweight popup like tooltips, fully customizable with an arrow and animations.

Balloon ?? A lightweight popup like tooltips, fully customizable with arrow and animations. Including in your project Gradle Add below codes to your r

Jaewoong Eum 2.8k Jan 5, 2023
FloatingView can make the target view floating above the anchor view with cool animation

FloatingView FloatingView can make the target view floating above the anchor view with cool animation Links 中文版 README Blog about FloatingView demo.ap

UFreedom 1.8k Dec 27, 2022
用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View.

PathAnimView 用于做Path动画的自定义View。 I have a path.I have a view. (Oh~),Path(Anim)View. 现已经找到图片->SVG->PATH的正确姿势, Now i have a pic.I have a view. Oh~,Path(A

张旭童 1.1k Oct 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
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
Snake View is a simple and animated linear chart for Android.

Snake View Snake library is a simple and animation line chart for Android. Latest Version How to use Configuring your project dependencies Add the lib

Txus Ballesteros 339 Dec 14, 2022
A simple and Elegant Showcase view for Android

Tuto Showcase A simple and Elegant Showcase view for Android TutoShowcase.from(this) .setContentView(R.layout.tuto_sample) .on(R.id.about) //

Florent CHAMPIGNY 509 Nov 25, 2022