ViewPager cards inspired by Duolingo

Overview

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.
Issues
  • Card align left

    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

    help wanted question 
    opened by MrThiago 5
  • ViewPager card distance

    ViewPager card distance

    Hi, great tutorial you wrote!

    I was wondering if it's possible to increase the distance between the fragments in the viewpager?

    opened by CedricVandelaer 5
  • Is it possible to make selected fragment big but other fragments small

    Is it possible to make selected fragment big but other fragments small

    Is it possible to make selected fragment big but other fragments small smoothly just like this screenshot_2016-08-23-17-33-06 there is the link of this app http://fir.im/tle2

    enhancement help wanted 
    opened by ijustyce 2
  • Display multiple view-pages at the same time.

    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

    help wanted 
    opened by prashant-webonise 2
  • Data confusion   Use  CardPagerAdapter

    Data confusion Use CardPagerAdapter

    question 
    opened by sunqi1006 2
  • Setting different texts to each card

    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

    opened by azeyneloglu 2
  • How to add new fragment

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

    opened by ashu9g 0
  • 为什么使用了两种方式实现?

    为什么使用了两种方式实现?

    一个card 一个 Fragment ,有什么优缺点 请解释一下?

    opened by jj89757hhb 0
  • Listeners when move from one Card to other

    Listeners when move from one Card to other

    Hi, is there is any listeners when i swap from one card to next?

    opened by saadbzu 0
  • it occurs a problem when data.Size = 1

    it occurs a problem when data.Size = 1

    i used enableScaling = true but not become effective when data.Size = 1

    opened by Kevin222 1
  • How do add button click for each card view ?

    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

    help wanted 
    opened by RahgoshafanGroup 7
  • How do you Know the swiped card details

    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

    opened by ThiruSoft 0
  • how set item width?Disable the item width

    how set item width?Disable the item width

    how set item width? Disable the item width

    opened by fenggit 0
Owner
Rúben Sousa
Rúben Sousa
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,

Iman Dolatkia 98 Nov 27, 2021
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

Alibaba 5k Nov 24, 2021
Pixplicity 921 Nov 16, 2021
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

Rakshak R.Hegde 181 Nov 18, 2021
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

Ian Thomas 2.5k Nov 17, 2021
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

Jake Wharton 10.2k Nov 28, 2021
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

ogaclejapan 7k Nov 24, 2021
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

Florent CHAMPIGNY 8.2k Nov 20, 2021
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"

Florent CHAMPIGNY 1.1k Nov 9, 2021
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

JPARDOGO 2.2k Nov 18, 2021
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

黄伟平 2.7k Nov 28, 2021
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

Leszek Mzyk 1k Nov 27, 2021
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

Antony Tran 688 Oct 23, 2021
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

Telenav Inc 717 Nov 4, 2021
[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

Andras Kindler 441 Aug 9, 2021
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

Manuel Peinado Gallego 255 Mar 20, 2021
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

Fei Liang 214 Nov 1, 2021
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

Kannan Anbarasan 253 Nov 8, 2021
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

Jake Wharton 10.2k Nov 28, 2021