Endless full-screen card ViewPager inspired by apple iBook for Android

Overview

FullScreenCardViewPager for Android

License Generic badge Generic badge Generic badge CodeFactor Quality Gate Status

Endless full-screen card ViewPager inspired by apple iBook for Android.

We are open to any new feature request, bug fix request, and pull request.


Demo

Endless cards Scale on scroll up Float actionbar
endless scale_2 ezgif-1-fee8937288b4

Download sample APK File 📥



Features

  • Scale cards on scroll up.
  • Endless (from server or database).
  • Show loading card.
  • Floating actionbar.
  • Save position when fragments are changed or onConfigurationChanged() called.
  • Lock horizontal scroll after card expanded.
  • Push side cards on card scale.
  • Support RTL.
  • Support java and kotlin projects.
  • Easy to use (3 tiny steps).
  • Support API > 16.


How to install? Maven Central

Add the following line to the app-level build.gradle file, in dependencies scope:

dependencies {
    ...
    // add this line:
    implementation "com.dolatkia:full-screen-card-viewpager:1.0.0"
}


How to use it in 3 steps?

Our library is based on RecyclerView, we need a RecyclerView.Adapter for each card. So let's start:

Step 1

Add FullScreenCardViewPager to your Fragment/Activity layout xml file:

    <com.dolatkia.horizontallycardslibrary.FullScreenCardViewPager
        android:id="@+id/fullScreenCardViewPager"
        android:background="@color/cards_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />


Step 2

Create adapter class that extends fromFullScreenCardViewPagerAdapter and override 3 abstract methods:

class MyFullScreenCardViewPagerAdapter(private val activity: Activity) :
    FullScreenCardViewPagerAdapter(activity) {
    
    // list of products that you should fill it yourself
    private val productsList = arrayListOf<Product>()

    // you should create your own RecyclerView.Adapter<RecyclerView.ViewHolder> for each card with the given position
    //data in this adapter will save
    override fun getCardRecyclerViewAdapter(position: Int): RecyclerView.Adapter<RecyclerView.ViewHolder> {
        return InnerRecyclerAdapter(activity, position, productsList[position])
    }

    // return number of cards (except loading card, loading card will add with the library)
    override fun getCardsCount(): Int {
        return productsList.size
    }

    // return View.OnClickListener to call when close button clicked
    override fun getOnCloseClickListener(position: Int, context: Context): View.OnClickListener {
        return View.OnClickListener { activity.onBackPressed() }
    }    
}

productsList = list of products that you should fill it yourself, each product is for one card.
InnerRecyclerAdapter = is your custom RecyclerView.Adapter to display in each card. for more details see sample app.


Step 3

Set adapter created in step 2 for FullScreenCardViewPager created in step 1.

// set customize adapter to fullScreenCardViewPager
// 0 = start position
// adapter = your customize adapter (for more details see sample app)
adapter = MyFullScreenCardViewPagerAdapter(this)
binding.fullScreenCardViewPager.setAdapter(adapter, 0)

All done :)


Some other settings and customization:

Action bar:

If you need actionbars for cards override these two methods in your adapter:

// create and return actionbar view
override fun onCreateActionBarCustomView(): View {
  return ItemActionbarBinding.inflate(activity.layoutInflater).root
}

// update actionbar view with relevant data
override fun onBindActionBarCustomView(position: Int, customView: View) {
  ("Beautiful Chair " + (position + 1).toString()).also {
    ItemActionbarBinding.bind(customView).title.text = it
  }
}


Endless cards:

override these two methods in your adapter:

override fun hasMoreData(): Boolean {
  return true
  // return true if you have endless cards and your data is incomplete,
  // return false if you don't have endless cards or you get all data or 
}

// load data (from server or db) in this method and add it to the adapter
// you should  manage your load data sequence yourself
override fun loadData() {
  Handler(Looper.getMainLooper()).postDelayed(
    {
      addFakeItems()
     // call this method when new data is ready
      dataLoaded()
    },
    1000 // value in milliseconds
  )
}


Save positions:

To save cards position and inner card scroll position when fragments are changed or onConfigurationChange() called (land<->portrate), Just create customize FullScreenCardViewPagerAdapter instance in onCreate() method of the fragment to avoid recreate it. for more information see the sample app. Demo


RTL (Right To Left) scroll:

call setRTL() method of fullScreenCardViewPager ,before set it's adapter

binding.fullScreenCardViewPager.setRTL()
// setAdapter() after setRtl()
binding.fullScreenCardViewPager.setAdapter(adapter, 0)

setRTL() doesn't work properly on API 28, contact me for the solution.


Customize UI:

To customize UI override these methods in your adapter:

// customize distance from top to enter actionbar
open fun getActionBarStartAnimationOffsetThreshold(
  recyclerView: RecyclerView,
  customActionBarView: View?
  ): Int {
  return PresentationUtils.convertDpToPixel(50, recyclerView.context)
}

// customize cards background-color
open fun getCardsColor(position: Int, context: Context): Int {
  return Color.parseColor("#ffffff")
}

// customize cards top-radius 
open fun getCardRadius(context: Context): Int {
  return PresentationUtils.convertDpToPixel(15, context)
}

// customize close icon
open fun getCloseResId(position: Int, context: Context): Int {
  return R.drawable.ic_close
}

// customize close color
open fun getCloseColor(position: Int, context: Context): Int {
  return Color.parseColor("#444444")
}

More Demo

Inner card horizontal scroll Save position
all_f ezgif-2-f999221f9053

Stargazers

Stargazers repo roster for @imandolatkia/FullScreenCardViewPager_Android

Forkers

Forkers repo roster for @imandolatkia/FullScreenCardViewPager_Android

You might also like...
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

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

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

Android Parallax-ViewPager

ParallaxViewPager Demo Usage com.github.ybq.parallaxviewpager.ParallaxViewPager android:id="@+id/viewpager" android:layout_width="ma

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

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

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"

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

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

Comments
  • [Feature] Fullscreen card onClick

    [Feature] Fullscreen card onClick

    💡 Describe the solution you'd like

    I think users expect to view the card in fullscreen after they tap the card. currently its not doing anything. if you think its a good idea , i can submit a pull request

    🤚 Do you want to develop this feature yourself?

    • [x] Yes
    • [ ] No
    opened by MrSatan 4
Releases(1.0.0)
Owner
Iman Dolatkia
Android Lover
Iman Dolatkia
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 180 Nov 18, 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

Alibaba 5k Dec 20, 2022
Pixplicity 915 Nov 8, 2022
Persons cards list viewpager - Persons cards list viewpager using kotlin

persons_cards_list_viewpager Дизайн и условие взяты из https://github.com/appKOD

Mironov Ury 1 Mar 1, 2022
ViewPager cards inspired by Duolingo

ViewPagerCards ViewPager cards inspired by Duolingo From my blog post: https://rubensousa.github.io/2016/08/viewpagercards This is just a sample proje

Rúben Sousa 4.1k Dec 22, 2022
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 Dec 31, 2022
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 Jan 3, 2023
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 992 Nov 10, 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

Antony Tran 692 Dec 14, 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

Andras Kindler 437 Dec 29, 2022