How to create dot indicator (with color and size transiton) in Jetpack Compose

Issue

I want to have a horizontal dot indicator that has color transition between two dots that is scrolling and also dot's size transition while scrolling

I need to show only limited dots for a huge amount of items.

In view system, we used this library https://github.com/Tinkoff/ScrollingPagerIndicator, which is very smooth and has a very nice color and size transition effects.

I tried to implement it with scroll state rememberLazyListState(), but it is more complex than I thought.

Do you know any solution in Jetpack Compose?

Is it possible to use the current library with AndroidView? Because it needs XML view, recycler view and viewpager, I am wondering how is it possible to use it with AndroidView?

Solution

I could integrate this library https://github.com/Tinkoff/ScrollingPagerIndicator easily with compose.

@Composable
fun DotIndicator(scrollState: LazyListState, modifier: Modifier = Modifier) {
    AndroidViewBinding(
        modifier = modifier,
        factory = DotIndicatorBinding::inflate,
    ) {
        dotIndicator.setDotCount(scrollState.layoutInfo.totalItemsCount)
        dotIndicator.setCurrentPosition(scrollState.firstVisibleItemIndex)
        scrollState.layoutInfo.visibleItemsInfo.firstOrNull()?.size?.let { firstItemSize ->
            val firstItemOffset = scrollState.firstVisibleItemScrollOffset
            val offset = (firstItemOffset.toFloat() / firstItemSize.toFloat()).coerceIn(0f, 1f)
            dotIndicator.onPageScrolled(scrollState.firstVisibleItemIndex, offset)
        }
    }
}

For the integration I had to add XML file as well ->

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data />

    <ru.tinkoff.scrollingpagerindicator.ScrollingPagerIndicator
        android:id="@+id/dot_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:spi_dotColor="@color/ds_primary_25"
        app:spi_dotSelectedColor="?attr/colorPrimary"
        app:spi_dotSelectedSize="8dp"
        app:spi_dotSize="8dp"
        app:spi_dotSpacing="4dp" />

</layout>

And also adding this dependency to your Gradle file ->

api "androidx.compose.ui:ui-viewbinding:1.1.1"

Answered By - Sepideh Vatankhah