Skip to content
Simple paging indicator widget with pager dataset ovewflow effect à la Instagram behavior
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/images
gradle/wrapper Migrate to Android X Oct 15, 2018
library
sample-app
.gitignore First public release Oct 8, 2017
LICENSE
README.md
build.gradle
gradle.properties Migrate to Android X Oct 15, 2018
settings.gradle First public release Oct 8, 2017

README.md

Overflow Pager Indicator widget

Download license

Simple widget for recycler view - displaying dots indicators of currently selected page - with some fancy animation when dataset is large.

Large dataset displays only fixed amount of dots centered around currently selected page with a nice little scaling animation of indicators on the edges. Provides fluent animation of selecting new page.

Small dataset displays classic dot indicators line with currently selected page highlighted.

RecyclerView should be configured with snapping to pages vie PagerSnapHelper subclass ~ simulates behavior of classic ViewPager

Widget preview

✔️ Overflowed indicators Classic confusing indicators
Widget effect animation preview Classic

Disclaimer: Having too many pages in recycler means that user needs to swipe a lot. Different layout/ui may be more user friendly.

Usage

Gradle dependency

In your gradle add dependency:

compile "cz.intik:overflow-pager-indicator:$latestVersion"

Layout

Some layout with RecyclerView and OverflowPagerIndicator

<FrameLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   >

   <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="120dp"
      />

   <cz.intik.overflowindicator.OverflowPagerIndicator
      android:id="@+id/view_pager_indicator"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal|bottom"
      app:dotFillColor="#FF0000"
      app:dotStrokeColor="#0000FF"
      />

</FrameLayout>

Code

Attach OverflowPagerIndicator (usually after LayoutManager and Adapter setup) to RecyclerView - for listening to dataset changes

overflowPagerIndicator.attachToRecyclerView(recyclerView);

Attach SimpleSnapHelper to recycler view which will change selected page in indicator view as items in recycler view are snapped

SimpleSnapHelper snapHelper = new SimpleSnapHelper(overflowPagerIndicator);
snapHelper.attachToRecyclerView(recyclerView);

Or use any other implementation of PagerSnapHelper or even some custom logic which will call:

OverflowPagerIndicator#onPageSelected(int position)

Customization

You can easily change dot fill color and dot stroke color via xml attributes like this:

<cz.intik.overflowindicator.OverflowPagerIndicator
    app:dotFillColor="#FF0000"
    app:dotStrokeColor="@color/heavenlyBlue"
    />

Changelog

2.0.0 Migrate to AndroidX, add color customization options (big thanks Javi Chaqués)

1.2.1 bugfix (thanks Sajad Abasi)

You can’t perform that action at this time.