### Implement Jetpack Compose Pager with DotsIndicator

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Integrate a HorizontalPager with a DotsIndicator in a Jetpack Compose layout. This example demonstrates how to bind the pager state to the indicator.

```Kotlin
Column {
    var pageCount by remember { mutableStateOf(5) }
    val pagerState = rememberPagerState()
    HorizontalPager(
        modifier = Modifier.padding(top = 24.dp),
        pageCount = pageCount,
        contentPadding = PaddingValues(horizontal = 64.dp),
        pageSpacing = 24.dp,
        state = pagerState
    ) {
        PagePlaceholderItem()
    }
    DotsIndicator(
        dotCount = pageCount,
        type = ShiftIndicatorType(dotsGraphic = DotGraphic(color = MaterialTheme.colorScheme.primary)),
        pagerState = pagerState
    )
}
```

--------------------------------

### Implement DotsIndicator in Jetpack Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Integrate the DotsIndicator composable with a PagerState to synchronize page indicators with a HorizontalPager. This setup supports various indicator types for visual feedback.

```kotlin
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun OnboardingScreen() {
    val pageCount by remember { mutableStateOf(5) }
    val pagerState = rememberPagerState { pageCount }

    Column {
        HorizontalPager(
            modifier = Modifier.padding(top = 24.dp),
            contentPadding = PaddingValues(horizontal = 64.dp),
            pageSpacing = 24.dp,
            state = pagerState
        ) { page ->
            PageContent(page)
        }

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

--------------------------------

### Implement DotsIndicator in XML

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Configures the standard dots indicator with width-scaling animations. Includes both the XML layout definition and the necessary ViewPager2 attachment in Kotlin.

```xml
<com.tbuonomo.viewpagerdotsindicator.DotsIndicator
    android:id="@+id/dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/inactive_dot"
    app:selectedDotColor="@color/active_dot"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsWidthFactor="2.5"
    app:dotsCornerRadius="8dp"
    app:progressMode="false"
    app:dotsClickable="true"
    app:dotsElevation="2dp" />
```

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

dotsIndicator.dotsColor = Color.GRAY
dotsIndicator.selectedDotColor = Color.BLUE
```

--------------------------------

### Configure Gradle Dependencies

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Add the DotsIndicator library to your Android project by including the repository and implementation dependency in your build.gradle file.

```Gradle
repositories {
    google()
    mavenCentral()
}

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

--------------------------------

### Implement WormDotsIndicator in Android

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Demonstrates how to add the WormDotsIndicator to an XML layout and initialize it programmatically in an Activity or Fragment. It shows how to attach the indicator to a ViewPager2 instance and apply runtime styling.

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

```kotlin
class ImageGalleryActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_gallery)

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

        viewPager.adapter = GalleryPagerAdapter(imageUrls)
        wormDotsIndicator.attachTo(viewPager)

        wormDotsIndicator.setDotIndicatorColor(Color.WHITE)
        wormDotsIndicator.setStrokeDotsIndicatorColor(Color.parseColor("#80FFFFFF"))
        wormDotsIndicator.setDotsStrokeWidth(2f)
    }
}
```

--------------------------------

### Implement SpringDotsIndicator in XML

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Configures the spring-physics animated indicator. Includes XML layout parameters for stiffness and damping, and Kotlin code for attaching to a ViewPager2.

```xml
<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
    android:id="@+id/spring_dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/indicator_dot"
    app:dotsStrokeColor="@color/stroke_color"
    app:dotsSize="16dp"
    app:dotsSpacing="6dp"
    app:dotsCornerRadius="8dp"
    app:dotsStrokeWidth="2dp"
    app:stiffness="300"
    app:dampingRatio="0.5"
    app:dotsClickable="true" />
```

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

springDotsIndicator.setDotIndicatorColor(Color.BLUE)
springDotsIndicator.setStrokeDotsIndicatorColor(Color.LTGRAY)
springDotsIndicator.setDotsStrokeWidth(4f)
```

--------------------------------

### Attach Indicators to ViewPager and ViewPager2

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Shows the unified approach for attaching different indicator types to both legacy ViewPager and modern ViewPager2 components.

```kotlin
import androidx.viewpager.widget.ViewPager
import androidx.viewpager2.widget.ViewPager2
import com.tbuonomo.viewpagerdotsindicator.DotsIndicator
import com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
import com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator

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

val viewPager2 = findViewById<ViewPager2>(R.id.view_pager2)
val springDotsIndicator = findViewById<SpringDotsIndicator>(R.id.spring_dots_indicator)
viewPager2.adapter = ModernPagerAdapter()
springDotsIndicator.attachTo(viewPager2)

val wormIndicator = findViewById<WormDotsIndicator>(R.id.worm_indicator)
wormIndicator.attachTo(viewPager2)
```

--------------------------------

### Indicator Configuration Attributes

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Reference for available XML attributes used to customize indicator appearance and behavior.

```APIDOC
## XML Attributes Reference

### Description
Reference of all available XML attributes for customizing the indicators in layout files.

### Parameters
#### Common Attributes
- **app:dotsColor** (color) - Required - Color of inactive dots
- **app:dotsSize** (dimension) - Optional - Diameter of dots
- **app:dotsSpacing** (dimension) - Optional - Space between dots
- **app:dotsClickable** (boolean) - Optional - Enable tap to navigate

#### SpringDotsIndicator Specific
- **app:stiffness** (integer) - Optional - Spring stiffness (higher = faster)
- **app:dampingRatio** (float) - Optional - Damping (lower = more bouncy)
```

--------------------------------

### Attach DotsIndicator to ViewPager

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Demonstrates how to programmatically link a DotsIndicator instance to a ViewPager component in Kotlin.

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

--------------------------------

### Configure Indicator XML Attributes

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Reference for available XML attributes to customize DotsIndicator, SpringDotsIndicator, and WormDotsIndicator, including colors, sizes, and physics parameters.

```xml
<com.tbuonomo.viewpagerdotsindicator.DotsIndicator
    app:dotsColor="@color/dots"
    app:selectedDotColor="@color/selected"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsWidthFactor="2.5"
    app:dotsCornerRadius="8dp"
    app:progressMode="true"
    app:dotsClickable="true"
    app:dotsElevation="2dp" />

<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
    app:dotsColor="@color/indicator"
    app:dotsStrokeColor="@color/stroke"
    app:dotsSize="16dp"
    app:dotsSpacing="4dp"
    app:dotsCornerRadius="8dp"
    app:dotsStrokeWidth="2dp"
    app:stiffness="300"
    app:dampingRatio="0.5"
    app:dotsClickable="true" />
```

--------------------------------

### Attach WormDotsIndicator to ViewPager

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Demonstrates the programmatic attachment of a WormDotsIndicator to a ViewPager in Kotlin.

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

--------------------------------

### Implement WormIndicatorType in Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Configures a worm-style indicator that stretches and contracts during page transitions. This creates an elastic connection effect between the source and destination dots.

```kotlin
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.tbuonomo.viewpagerdotsindicator.compose.DotsIndicator
import com.tbuonomo.viewpagerdotsindicator.compose.model.DotGraphic
import com.tbuonomo.viewpagerdotsindicator.compose.type.WormIndicatorType

@Composable
fun WormIndicatorExample() {
    val pagerState = rememberPagerState { 5 }

    DotsIndicator(
        dotCount = 5,
        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
            )
        ),
        dotSpacing = 12.dp,
        pagerState = pagerState
    )
}
```

--------------------------------

### Implement SpringIndicatorType in Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Configures a spring-style indicator where a selector dot bounces between positions. It uses DotGraphic to define the appearance of both background and selector dots.

```kotlin
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.tbuonomo.viewpagerdotsindicator.compose.DotsIndicator
import com.tbuonomo.viewpagerdotsindicator.compose.model.DotGraphic
import com.tbuonomo.viewpagerdotsindicator.compose.type.SpringIndicatorType

@Composable
fun SpringIndicatorExample() {
    val pagerState = rememberPagerState { 5 }

    DotsIndicator(
        dotCount = 5,
        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
            )
        ),
        dotSpacing = 12.dp,
        pagerState = pagerState
    )
}
```

--------------------------------

### Configure DotGraphic in Jetpack Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Defines visual properties for dots including size, color, shape, and border styling. It allows for creating various styles like circular, rounded rectangle, or hollow dots.

```kotlin
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.tbuonomo.viewpagerdotsindicator.compose.model.DotGraphic

val defaultDot = DotGraphic(
    size = 16.dp,
    color = Color.White,
    shape = CircleShape,
    borderWidth = null,
    borderColor = Color.White
)

val roundedDot = DotGraphic(
    size = 12.dp,
    color = Color.Blue,
    shape = RoundedCornerShape(4.dp),
    borderWidth = 2.dp,
    borderColor = Color.DarkGray
)

val hollowDot = DotGraphic(
    size = 14.dp,
    color = Color.Transparent,
    borderWidth = 2.dp,
    borderColor = Color.White
)
```

--------------------------------

### Attach SpringDotsIndicator to ViewPager

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Shows how to bind a SpringDotsIndicator to a ViewPager using the attachTo method in Kotlin.

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

--------------------------------

### WormDotsIndicator Implementation

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

How to implement and attach the WormDotsIndicator to a ViewPager2 component.

```APIDOC
## XML WormDotsIndicator

### Description
A worm-style animated indicator where the selector stretches elastically between dot positions.

### Method
N/A (Android View Component)

### Endpoint
com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator

### Parameters
#### XML Attributes
- **app:dotsColor** (color) - Optional - Color of the worm indicator
- **app:dotsSize** (dimension) - Optional - Diameter of dots
- **app:dotsSpacing** (dimension) - Optional - Space between dots
- **app:dotsClickable** (boolean) - Optional - Enable tap to navigate

### Request Example
<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
    android:id="@+id/worm_dots_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:dotsColor="@color/worm_indicator"
    app:dotsSize="16dp" />

### Response
#### Success Response (200)
- **attachTo(ViewPager2)** (method) - Binds the indicator to the pager
```

--------------------------------

### Configure ShiftIndicatorType for Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Customize the ShiftIndicatorType to create a horizontal stretching animation effect for selected dots. This includes parameters for dot size, color, border, and the shift size factor.

```kotlin
@Composable
fun ShiftIndicatorExample() {
    val pagerState = rememberPagerState { 5 }

    DotsIndicator(
        dotCount = 5,
        type = ShiftIndicatorType(
            dotsGraphic = DotGraphic(
                size = 16.dp,
                color = MaterialTheme.colorScheme.primary,
                borderWidth = 1.dp,
                borderColor = Color.Gray
            ),
            shiftSizeFactor = 3f
        ),
        dotSpacing = 12.dp,
        pagerState = pagerState
    )
}
```

--------------------------------

### Configure WormDotsIndicator in XML

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Defines a WormDotsIndicator in an Android XML layout with specific styling attributes for the worm animation effect.

```XML
<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"
    />
```

--------------------------------

### Configure SpringDotsIndicator in XML

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Defines a SpringDotsIndicator in an Android XML layout with custom spring physics and appearance attributes.

```XML
<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"
    />
```

--------------------------------

### Configure XML DotsIndicator

Source: https://github.com/tommybuonomo/dotsindicator/blob/master/README.md

Add a DotsIndicator component to your Android XML layout file. Customize appearance using attributes like dotsColor, dotsSize, and selectedDotColor.

```XML
<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"
    />
```

--------------------------------

### Implement BalloonIndicatorType in Compose

Source: https://context7.com/tommybuonomo/dotsindicator/llms.txt

Configures a balloon-style indicator where the active dot scales up relative to its neighbors. The balloonSizeFactor property controls the magnitude of the scaling effect.

```kotlin
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import com.tbuonomo.viewpagerdotsindicator.compose.DotsIndicator
import com.tbuonomo.viewpagerdotsindicator.compose.model.DotGraphic
import com.tbuonomo.viewpagerdotsindicator.compose.type.BalloonIndicatorType

@Composable
fun BalloonIndicatorExample() {
    val pagerState = rememberPagerState { 5 }

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.