ViewPager cards inspired by Duolingo

Last update: Aug 2, 2022

ViewPagerCards

ViewPager cards inspired by Duolingo

From my blog post: https://rubensousa.github.io/2016/08/viewpagercards

This is just a sample project.

There's support included for Fragments and normal Views. Check the CardPagerAdapter and CardFragmentPagerAdapter classes.

Left - Duolingo implementation

Right - This sample

What you could do with this:

  1. Showcasing premium features
  2. An app intro
  3. A small gallery of images

License

Copyright 2016 Rúben Sousa

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.

GitHub

https://github.com/rubensousa/ViewPagerCards
Comments
  • 1. Card align left

    Hi, great library.

    Is it possible to make the first card align to the left rather than center ?

    I try this, but does not work;

    <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/line_color"
                android:layout_gravity="start"
                android:gravity="start"
                android:clipToPadding="false"
                android:overScrollMode="never"
                android:paddingEnd="@dimen/card_padding"
                android:paddingLeft="@dimen/card_padding"
                android:paddingRight="@dimen/card_padding"
                android:paddingStart="@dimen/card_padding" />
    
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:card_view="http://schemas.android.com/tools"
        android:id="@+id/cardView"
        app:cardUseCompatPadding="true"
        android:layout_width="436dp"
        android:layout_height="match_parent"
        android:layout_gravity="left">
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="1"
                android:gravity="start|left"
                android:layout_gravity="left">
    ...
    

    Thanks

    Reviewed by MrThiago at 2016-08-25 04:16
  • 2. Setting different texts to each card

    Hello,

    Thanks for the implementation, it is of great help.

    I am having some trouble with changing the content of each card dynamically. not from the layout xml. I would like to set different texts to each card. How can I achive this by using the adapter you've designed?

    Thank you

    Reviewed by azeyneloglu at 2016-09-23 15:21
  • 3. Display multiple view-pages at the same time.

    Hi,

    Thank you for the lovely implementation. I was trying around with the code aiming to display 2 or more views at the same time and all the centre views having scaling enables.

    I tried with @Override public float getPageWidth(int position) { return super.getPageWidth(position) / 2; }

    in the adapter, but it isn't working as intended.

    So if you get a chance to look into this, do share. Thanks

    Reviewed by prashant-webonise at 2016-08-24 14:09
  • 4. Issue #20 - Adding a click button for each CardView

    This is based on events. The library green-robot was added. Now it's able to go next Card by clicking the button inside each of them. Swipe is still enable.

    Reviewed by pabloki at 2018-03-11 10:12
  • 5. Added AndroidX Support. Do Check!

    I added androidX and latest gradle Support here at https://github.com/aminPial/ViewPagerCards. You can check that for latest dependencies for this repo. Cheers!

    Reviewed by aminPial at 2020-07-12 14:13
  • 6. Button Config

    Sorry to disturb Ruben, but I had 1 more question. for example: When u click on cool card it should open another page or print toast. if clicked some other card it does something else.

    I have been trying it since you added array list system but no luck

    // Fixed it

    Reviewed by EpicNav at 2016-12-19 07:04
  • 7. How to add new fragment

    I want to add a new Card Fragment named CardFragment2 , how do i add like similier:

    addCardFragment(new CardFragment2)); for(int i = 0; i< 2; i++){ addCardFragment(new CardFragment()); }

    Reviewed by ashu9g at 2021-03-01 13:34
  • 8. How do add button click for each card view ?

    Hi, i use this ... Great ! but how to add onclick listener for each card view !? i need go to another activity when click on each card view button ! thanks

    Reviewed by RahgoshafanGroup at 2017-11-17 10:24
  • 9. How do you Know the swiped card details

    How do you Know the swiped card details. when i swipe cards i want know the card details EX: card name like 1 , 2 , 3, 4 ..... when i swipe need show the card name in toast ..help me

    Reviewed by ThiruSoft at 2017-10-24 11:10
Android auto scroll viewpager or viewpager in viewpager
Android auto scroll viewpager or viewpager in viewpager

Android Auto Scroll ViewPager ViewPager which can auto scrolling, cycling, decelerating. ViewPager which can be slided normal in parent ViewPager. Att

Aug 7, 2022
UltraViewPager is an extension for ViewPager to provide multiple features in a single ViewPager.

UltraViewPager 中文文档 ProjectUltraViewPager is a ViewPager extension that encapsulates multiple features, mainly to provide a unified solution for multi

Aug 3, 2022
Don't write a ViewPager Adapter! Hook up your ViewPager to your data model using Android Data Binding Framework. With Kotlin support!
Don't write a ViewPager Adapter! Hook up your ViewPager to your data model using Android Data Binding Framework. With Kotlin support!

Don't write a ViewPager Adapter! Hook up your ViewPager to your data model using Android Data Binding Framework. Show some ❤️ ?? Sweet and short libra

Dec 2, 2021
Endless full-screen card ViewPager inspired by apple iBook for Android
Endless full-screen card ViewPager inspired by apple iBook for Android

FullScreenCardViewPager for Android Endless full-screen card ViewPager inspired by apple iBook for Android. ✅ We are open to any new feature request,

Jul 19, 2022
Library containing common animations needed for transforming ViewPager scrolling for Android v13+.
Library containing common animations needed for transforming ViewPager scrolling for Android v13+.

ViewPagerTransforms Library containing common animations needed for transforming ViewPager scrolling on Android v13+. This library is a rewrite of the

Aug 8, 2022
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.

Android ViewPagerIndicator Paging indicator widgets that are compatible with the ViewPager from the Android Support Library to improve discoverability

Aug 1, 2022
A custom ViewPager title strip which gives continuous feedback to the user when scrolling
A custom ViewPager title strip which gives continuous feedback to the user when scrolling

SmartTabLayout A custom ViewPager title strip which gives continuous feedback to the user when scrolling. This library has been added some features an

Aug 12, 2022
A Material Design ViewPager easy to use library
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Aug 7, 2022
A different beautiful ViewPager, with quick swipe controls
A different beautiful ViewPager, with quick swipe controls

HollyViewPager Usage Add a HollyViewPager in your layout <com.github.florent37.hollyviewpager.HollyViewPager android:id="@+id/hollyViewPager"

May 28, 2022
An interactive indicator to navigate between the different pages of a ViewPager
An interactive indicator to navigate between the different pages of a ViewPager

Android PagerSlidingTabStrip (default Material Design) This library is not maintained anymore and there will be no further releases. For most of the c

Jul 21, 2022
Combine ViewPager and Animations to provide a simple way to create applications' guide pages.
Combine ViewPager and Animations to provide a simple way to create applications' guide pages.

WoWoViewPager WoWoViewPager combines ViewPager and Animations to provide a simple way to create applications' guide pages. When users are dragging WoW

Aug 9, 2022
An android ViewPager extension allowing infinite scrolling

NO LONGER MAINTAINED LoopingViewPager An android ViewPager extension allowing infinite scrolling. You can use it with "standart" PagerAdapter (inflati

Jul 25, 2022
Augment Android's ViewPager with wrap-around functionality.

Infinite View Pager Augment Android's ViewPager with wrap-around functionality. Original StackOverflow question: http://stackoverflow.com/questions/75

Aug 8, 2022
ViewPager that slides vertically.
ViewPager that slides vertically.

ExpandablePager Layout that contains a ViewPager and can slide vertically between 2 states (expanded and collapsed). #Requirements Android 4.0+ (Ice C

May 18, 2022
[Development stopped in 2014. Unfinished and not stable - not recommended to use.] An easy-to-use ViewPager subclass with parallax background effect for Android apps.

Development stopped in 2014 Not developed since 2014. Unfinished and not stable - not recommended to use. ParallaxViewPager An easy-to-use ViewPager s

Dec 31, 2021
Android - A ViewPager page indicator that displays the current page number and (optionally) the page count
Android - A ViewPager page indicator that displays the current page number and (optionally) the page count

NumericPageIndicator A ViewPager page indicator that displays the current page number and (optionally) the page count. It can also display buttons to

Aug 8, 2022
Pager (especially for ViewPager) indicator in two styles: circle & fraction.
Pager (especially for ViewPager) indicator in two styles: circle & fraction.

PagerIndicator Pager (especially for ViewPager) indicator in two styles: circle & fraction. Demo circle fraction Dependency implementation 'me.liangfe

May 11, 2022
Android ViewPager template with cool animation.
Android ViewPager template with cool animation.

glazy-viewpager ViewPager template with cool animation. Preview Dependencies compile 'com.android.support:palette-v7:25.2.0' Usage Refer the implement

May 13, 2022