DotsIndicator

The SpringDotsIndicator provides a spring-based animation for classic XML views. Attach it to a ViewPager or ViewPager2 using attachTo().

<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"
    app:dotsClickable="true" />

val springDotsIndicator = findViewById<SpringDotsIndicator>(R.id.spring_dots_indicator)
val viewPager = findViewById<ViewPager2>(R.id.view_pager)
viewPager.adapter = ViewPagerAdapter()
springDotsIndicator.attachTo(viewPager)

To use DotsIndicator in your Android project, add Maven Central to your repositories and include the library dependency in your build.gradle file.

repositories {
    google()
    mavenCentral()
}

dependencies {
    implementation("com.tbuonomo:dotsindicator:5.1.1")
}

For classic Android views, use the DotsIndicator class in your XML layout and attach it to a ViewPager or ViewPager2 in your Kotlin/Java code using the attachTo() method.

<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:dotsElevation="4dp"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsWidthFactor="2.5"
    app:selectedDotColor="@color/md_blue_200"
    app:progressMode="true"
    app:dotsClickable="true" />

val dotsIndicator = findViewById<DotsIndicator>(R.id.dots_indicator)
val viewPager = findViewById<ViewPager2>(R.id.view_pager)
viewPager.adapter = ViewPagerAdapter()
dotsIndicator.attachTo(viewPager)

The WormDotsIndicator provides a worm-like animation for classic XML views. Attach it to a ViewPager or ViewPager2 using attachTo().

<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"
    app:dotsClickable="true" />

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

Use ShiftIndicatorType to create a shifting dot effect. You can customize the appearance using DotGraphic.

DotsIndicator(
    dotCount = pageCount,
    type = ShiftIndicatorType(
        dotsGraphic = DotGraphic(color = MaterialTheme.colorScheme.primary)
    ),
    pagerState = pagerState
)

Use WormIndicatorType for a worm-like animation effect. Customize the dotsGraphic and the wormDotGraphic.

DotsIndicator(
    dotCount = pageCount,
    type = WormIndicatorType(
        dotsGraphic = DotGraphic(
            size = 16.dp,
            borderWidth = 2.dp,
            borderColor = MaterialTheme.colorScheme.primary,
            color = Color.Transparent,
        ),
        wormDotGraphic = DotGraphic(
            size = 16.dp,
            color = MaterialTheme.colorScheme.primary,
        )
    ),
    pagerState = pagerState
)

Use BalloonIndicatorType for a balloon effect. You can adjust the balloonSizeFactor and dotSpacing.

DotsIndicator(
    dotCount = pageCount,
    type = BalloonIndicatorType(
        dotsGraphic = DotGraphic(
            size = 8.dp,
            color = MaterialTheme.colorScheme.primary
        ),
        balloonSizeFactor = 2f
    ),
    dotSpacing = 20.dp,
    pagerState = pagerState
)

Use SpringIndicatorType for a spring-based animation. You can define separate DotGraphic configurations for the standard dots and the selector dot.

DotsIndicator(
    dotCount = pageCount,
    type = SpringIndicatorType(
        dotsGraphic = DotGraphic(
            size = 16.dp,
            borderWidth = 2.dp,
            borderColor = MaterialTheme.colorScheme.primary,
            color = Color.Transparent
        ),
        selectorDotGraphic = DotGraphic(
            size = 14.dp,
            color = MaterialTheme.colorScheme.primary
        )
    ),
    pagerState = pagerState
)

The attachTo(...) method is used to link an XML-based indicator to a pager. It supports both androidx.viewpager.widget.ViewPager and androidx.viewpager2.widget.ViewPager2.

dotsIndicator.attachTo(viewPager)
dotsIndicator.attachTo(viewPager2)

You can customize the SpringDotsIndicator directly in your XML layout files using the following attributes. These allow you to control the colors, spring physics, and stroke appearance of the indicator.

Available attributes:

• dotsColor: The color of the active indicator dot.
• dotsStrokeColor: The color of the stroke for the inactive dots.
• stiffness: The spring stiffness value (float).
• dampingRatio: The spring damping ratio (float).
• dotsStrokeWidth: The width of the stroke for the dots.