Three material Dots Indicators for view pagers in Android !

Overview

Material View Pager Dots Indicator

Android Arsenal awesome Download

This library makes it possible to represent View Pager Dots Indicator with 3 different awesome styles ! It supports ViewPager and ViewPager2

materialdots

Check out the sample demo: sampledemo

Don't forget to star the project if you like it! star == heart

Feel free to submit issues and enhancement requests !

ezgif com-optimize ezgif com-crop 8

How to

Gradle

dependencies {
    implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'
}

DotsIndicator

ezgif com-crop 1 ezgif com-crop 3

In your XML layout

<com.tbuonomo.viewpagerdotsindicator.DotsIndicator
    android:id="@+id/dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/material_white"
    app:dotsCornerRadius="8dp"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsWidthFactor="2.5"
    app:selectedDotColor="@color/md_blue_200"
    app:progressMode="true"
    />

Custom Attributes

Attribute Description
dotsColor Color of the dots
selectedDotColor Color of the selected dot (by default the dotsColor)
progressMode Lets the selected dot color to the dots behind the current one
dotsSize Size in dp of the dots (by default 16dp)
dotsSpacing Size in dp of the space between the dots (by default 4dp)
dotsWidthFactor The dots scale factor for page indication (by default 2.5)
dotsCornerRadius The dots corner radius (by default the half of dotsSize for circularity)

In your Java code

    dotsIndicator = (DotsIndicator) findViewById(R.id.dots_indicator);
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    adapter = new ViewPagerAdapter();
    viewPager.setAdapter(adapter);
    dotsIndicator.setViewPager(viewPager);

In your Kotlin code

    val dotsIndicator = findViewById<WormDotsIndicator>(R.id.dots_indicator)
    val viewPager = findViewById<ViewPager>(R.id.view_pager)
    val adapter = ViewPagerAdapter()
    viewPager.adapter = adapter
    dotsIndicator.setViewPager(viewPager)

SpringDotsIndicator

ezgif com-crop 4 ezgif com-crop 5

In your XML layout

<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
    android:id="@+id/spring_dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dampingRatio="0.5"
    app:dotsColor="@color/material_white"
    app:dotsStrokeColor="@color/material_yellow"
    app:dotsCornerRadius="2dp"
    app:dotsSize="16dp"
    app:dotsSpacing="6dp"
    app:dotsStrokeWidth="2dp"
    app:stiffness="300"
    />

Custom Attributes

Attribute Description
dotsColor Color of the indicator dot
dotsColor Color of the stroke dots (by default the indicator color)
dotsSize Size in dp of the dots (by default 16dp)
dotsSpacing Size in dp of the space between the dots (by default 4dp)
dotsCornerRadius The dots corner radius (by default the half of dotsSize for circularity)
dotsStrokeWidth The dots stroke width (by default 2dp)
dampingRatio The damping ratio of the spring force (by default 0.5)
stiffness The stiffness of the spring force (by default 300)

In your Java code

    springDotsIndicator = (SpringDotsIndicator) findViewById(R.id.spring_dots_indicator);
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    adapter = new ViewPagerAdapter();
    viewPager.setAdapter(adapter);
    springDotsIndicator.setViewPager(viewPager);

In your Kotlin code

    val springDotsIndicator = findViewById<WormDotsIndicator>(R.id.spring_dots_indicator)
    val viewPager = findViewById<ViewPager>(R.id.view_pager)
    val adapter = ViewPagerAdapter()
    viewPager.adapter = adapter
    springDotsIndicator.setViewPager(viewPager)

WormDotsIndicator

ezgif com-crop 6 ezgif com-crop 7

In your XML layout

<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
    android:id="@+id/worm_dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/material_blueA200"
    app:dotsStrokeColor="@color/material_yellow"
    app:dotsCornerRadius="8dp"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsStrokeWidth="2dp"
    />

Custom Attributes

Attribute Description
dotsColor Color of the indicator dot
dotsStrokeColor Color of the stroke dots (by default the indicator color)
dotsSize Size in dp of the dots (by default 16dp)
dotsSpacing Size in dp of the space between the dots (by default 4dp)
dotsCornerRadius The dots corner radius (by default the half of dotsSize for circularity)
dotsStrokeWidth The dots stroke width (by default 2dp)

In your Java code

    wormDotsIndicator = (WormDotsIndicator) findViewById(R.id.worm_dots_indicator);
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    adapter = new ViewPagerAdapter();
    viewPager.setAdapter(adapter);
    wormDotsIndicator.setViewPager(viewPager);

In your Kotlin code

    val wormDotsIndicator = findViewById<WormDotsIndicator>(R.id.worm_dots_indicator)
    val viewPager = findViewById<ViewPager>(R.id.view_pager)
    val adapter = ViewPagerAdapter()
    viewPager.adapter = adapter
    wormDotsIndicator.setViewPager(viewPager)

Support of ViewPager2

Use setViewPager2(viewPager2) instead of setViewPager(viewPager)

Help Maintenance

If you could help me to continue maintain this repo, buying me a cup of coffee will make my life really happy and get much energy out of it.

Buy Me A Coffee

Changelog

4.1.2

Fix #55 and #56

4.1.1

Fix crash

4.1

  • Support RTL (fix #32 and #51)

4.0

  • Support of ViewPager2 (fix #40)
  • Convert all the project to Kotlin
  • Migration to AndroidX
  • Fix #37: findViewById, causing missing adapter error

3.0.3

  • Fix #20: Dots indicator initialises with the wrong number of dots initially

3.0.2

  • Add attribute selectedDotColor and progressMode to DotsIndicator
  • Fix RTL issues and improve DotsIndicator globally

2.1.0

  • Add attribute dotsStrokeColor to SpringDotsIndicator and WormDotsIndicator

License

Copyright 2016 Tommy Buonomo

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
  • Select particular position of dot

    Select particular position of dot

    View Pager + WormDotsIndicator The viewpager is selected to current item (which can be any position), but I am not able to select the dot indicator to that position of viewpager programatically.

    image

    bug 
    opened by akankshapaul048 11
  • RTL not working (view isn't visible)

    RTL not working (view isn't visible)

    I'm using the WormDotsIndicator My App is only in English but I have supportRtl=true in my manifest

    When the device is in an RTL language the the view isn't visible (Although I can see it's taking the correct space when I do "Show layout bounds" on the device

    bug help wanted 
    opened by Shailevy 11
  • Dots indicator initialises with the wrong number of dots initially

    Dots indicator initialises with the wrong number of dots initially

    I have 2 items in my viewpager and the dots indicator initialises with 3 dots

    I can't see why - but if is set the viewpager to the second page then it initialises with 2 dots.

    i think the problem is that in refreshDots() you call buildDot which adds a child view (dot) to the layout - if dotIndicatorView is not initialised.

    You need to remove this view after you find that the viewpager adapter has pages - in that same refreshDots() method

    bug 
    opened by createS0ftware 10
  • Dotsindicator not refreshed when viewpager2 change size

    Dotsindicator not refreshed when viewpager2 change size

    Hi, we have a problem with the library when we have a view pager 2 that changes his size.

    At start we have 3 items and everything is good. After that i delete the central item and i slide programmatically my view pager to the first item, but the indicator doesn't refresh. It shows two dots correctly, but when i am in the first item of the pager it doesn't show any dot selected and when i move to the Second and last item the indicator shows the first dot as selected.

    The only way to return to normal situation is go back to another activity and open again the one that contains the DotsIndicator.

    We have also tried with tab layout and we see that it works, so we think is a Library problem. Can you send us some instruction or make a new release for avoid this?

    Thank you so much.

    Matteo

    bug 
    opened by bruzzers 9
  • WormDotsIndicator - Wrong position [Android 9 api 28]

    WormDotsIndicator - Wrong position [Android 9 api 28]

    Steps to reproduce:

    Viewpaper + WormDotsIndicator

    • Swipe to the last item
    • Swipe back to the first item => always show the second dot instead of the first dot.
    waiting_for_closing 
    opened by KohFujimura 8
  • position not retained when coming back from another fragment

    position not retained when coming back from another fragment

    Hi, I use navigation graph in my app and when I leave fragment which contains viewpager and come back (click on "skip" button in attached gif), viewpager's position is retained, but dots indicator is reset. I know that view is recreated when leaving and coming back, but I noticed ViewPager2.OnPageChangeCallback's onPageSelected is called with last position, but dots indicator somehow doesn't react. But when I scroll , indicator jumps to correct position. Please have a look at attached video. Thanks ezgif-1-d6bbe5d48bf5

    this is how it's initialised in onActivityCreated() method:

            val pagerAdapter = MyViewPagerAdapter(activity!!)
            viewPager.adapter = pagerAdapter
            pagerIndicator.setViewPager2(viewPager)
    
    bug 
    opened by palicka 6
  • How to update dotsIndicator adapter ?

    How to update dotsIndicator adapter ?

    I don't see any notifyDataSetChanged() method that updates items in dotsIndicator adapter ?

    When i add new item in my main viewpager adapter my app get crash. See below logs

    10.09.19 14:57
    Version: 1.0.43 (1043tackTrace)
    Thread[main,5,main]
    Exception: java.lang.ArrayIndexOutOfBoundsException
    Message: length=10; index=-1
    Stacktrace:
    	java.util.ArrayList.get(ArrayList.java:439)
    	com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator$buildOnPageChangedListener$1.onPageScrolled$viewpagerdotsindicator_release(SpringDotsIndicator.kt:161)
    	com.tbuonomo.viewpagerdotsindicator.OnPageChangeListenerHelper.onPageScrolled(OnPageChangeListenerHelper.kt:17)
    	com.tbuonomo.viewpagerdotsindicator.BaseDotsIndicator$setViewPager$2$addOnPageChangeListener$1.onPageScrolled(BaseDotsIndicator.kt:218)
    	androidx.viewpager.widget.ViewPager.dispatchOnPageScrolled(ViewPager.java:1930)
    	androidx.viewpager.widget.ViewPager.onPageScrolled(ViewPager.java:1904)
    	androidx.viewpager.widget.ViewPager.pageScrolled(ViewPager.java:1842)
    	androidx.viewpager.widget.ViewPager.completeScroll(ViewPager.java:1988)
    	androidx.viewpager.widget.ViewPager.scrollToItem(ViewPager.java:692)
    	androidx.viewpager.widget.ViewPager.setCurrentItemInternal(ViewPager.java:670)
    	androidx.viewpager.widget.ViewPager.setCurrentItemInternal(ViewPager.java:631)
    	androidx.viewpager.widget.ViewPager.dataSetChanged(ViewPager.java:1086)
    	androidx.viewpager.widget.ViewPager$PagerObserver.onChanged(ViewPager.java:3097)
    	androidx.viewpager.widget.PagerAdapter.notifyDataSetChanged(PagerAdapter.java:291)
    
    bug 
    opened by manishpatelgt 6
  • findViewById, causing missing adapter error

    findViewById, causing missing adapter error

    When I execute DotsIndicator dotsIndicator = findViewById(R.id.dots_indicator_view_pager_insights);, getting an error message straight away

    DotsIndicator: You have to set an adapter to the view pager before !

    I do set the adapter right after the findViewById, shouldn't the message appear later on, if no adapter has yet been set?

    opened by DiogoTheCoder 6
  • Dot indicator resets to the first page after the activity is rotated

    Dot indicator resets to the first page after the activity is rotated

    As the title states. I set the ViewPager2 object for the SpringDotsIndicator in the onCreate() method of my activity, and don't do anything else with the SpringDotsIndicator:

        @Override
        protected void onCreate(final Bundle savedInstanceState) {
            ...
            final ViewPager2 viewPager = findViewById(R.id.tutorial_pager);
            final FragmentStateAdapter pageAdapter = new MyPageAdapter(this);
            viewPager.setAdapter(pageAdapter);
            final SpringDotsIndicator dotsIndicator = (SpringDotsIndicator) findViewById(R.id.spring_dots_indicator);
            dotsIndicator.setViewPager2(viewPager);
            ...
    

    It behaves correctly normally. However, if I'm on e.g. my third fragment and rotate the screen, when the activity is recreated the fragment shown in the new orientation is still the third one, but the dot indicates that we are on the first fragment.

    As soon as I slide the fragment slightly the dot catches up and goes to the correct position.

    Is this a bug or am I missing some code in order to handle these cases?

    bug 
    opened by nachogoro 5
  • How to set the dotIndicator point position 2 when viewPager2 currentItem = 2

    How to set the dotIndicator point position 2 when viewPager2 currentItem = 2

    viewPager2.setCurrentItem(2, false) dotIndicator.setViewPager2(viewPager2)

    the viewPager2 currentItem is 2 but the dotIndicator point always on first

    my current version is 4.1.2

    opened by lic2050 5
  • Dots : Random Size when looping banner

    Dots : Random Size when looping banner

    Hi, thankss for this Awesome Library, i love it :D, hi dev i have issue when looping banner with ViewPager + DotsIndicator....

    in my case, for example i have 10 banner auto looping, and when reaching last banner , viewPager set banner position to 0 again, and the issue coming, Dots Size are become randomizing sized after the last banner....

    Untitled

    im sorry for my broken english :D

    opened by ghost 5
  • cant applied staging env

    cant applied staging env

    Execution failed for task ':app:dataBindingMergeDependencyArtifactsStaging'.

    Could not resolve all files for configuration ':app:stagingCompileClasspath'. Could not resolve com.tbuonomo:dotsindicator:4.3.

    opened by rahmativan 0
  • How to make dots align start to the parent view

    How to make dots align start to the parent view

    As far I can see dots are center aligned. I can see padding at starting and ending. I have a requirement of showing dots from the start of view without any padding. How to d it

    opened by shaiksalam9182 0
  • Selected Dot flickers when changing selectedDotColor in onPageSelected of view pager

    Selected Dot flickers when changing selectedDotColor in onPageSelected of view pager

    I think it is because of the change and of the current color through a callback (onPageSelected). Similar to

    setcolor to red delay(100 ms) setcolor to blue.

    opened by oia05 0
  • Error related to build variants

    Error related to build variants

    Hello !! i update the library from 4.1.2 to 4.3 but i the project doent recognize the library i was investiganting the problem and i can see is asociated to the build variants for reason uknown.

    when the project is compiled in "debug" or "release" the library is reconigze but in other variants not, i found this error in de build log :

    No matching variant of com.tbuonomo:dotsindicator:4.3 was found. The consumer was configured to find an API of a component, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'develop', attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' but:
              - Variant 'debugVariantMavenApiPublication' capability com.tbuonomo:dotsindicator:4.3 declares an API of a component:
                  - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'develop'
    

    i appreciate your help

    opened by ederdoski 4
Owner
Tommy Buonomo
Android Architect at Lydia
Tommy Buonomo
Custom Tabs with Material Design effects

MaterialTabs Custom Tabs with Material Design animations for pre-Lollipop devices       Download example apk It requires 14+ API and android support v

Fabio Biola 1.4k Dec 29, 2022
PagedGrid - Custom android view composed by multiple page grids with custom content and layout

PagedGrid A PagedGrid is a ViewPager which pages are GridLayout with equal distributed rows and columns. This project is an Android library, written i

Matteo Pellegrino 1 Jan 23, 2019
A pager for Android with parallax effect

ParallaxPagerTransformer A pager transformer for Android with parallax effect Installation in your build.gradle file dependencies { // ... com

Javier Gonzalez 654 Dec 29, 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
ViewPagers library for Android

freepager Ready-to-use view pagers for your project. Based on Swipes navigation demo repository Usage: Gradle: dependencies { compile 'pro.alexza

Alex Zaitsev 460 Nov 25, 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 9, 2022
Android library for fluid tablayout animation as seen on Snapchat.

SnapTabLayout Show some ❤️ and star the repo to support the project This library is the implementation of TabLayout as seen on popular messaging app S

Niranjan Kurambhatti 714 Dec 25, 2022
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

Trinea 1.7k Dec 10, 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

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
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 253 Nov 16, 2022
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 251 Nov 29, 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. Show some ❤️ ?? Sweet and short libra

Rakshak R.Hegde 180 Nov 18, 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 5, 2023
Android Parallax-ViewPager

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

ybq 588 Nov 29, 2022
Android LiquidSwipe Library

Android LiquidSwipe Library

Chrisvin Jem 838 Dec 29, 2022
Android Concentric Onboarding library

Android Concentric Onboarding library

Chrisvin Jem 50 Sep 13, 2022