Android : Jetpack Compose: Create custom PageIndicatorsStyle for HorizontalPageIndicators

Question

I am very much new into Jetpack compose. I am working on wearable application(Wear OS) and is built in Kotlin. However, I want to integrate Compose's HorizontalPageIndicator in Kotlin fragment class.

I am able integrate that but not able to place at exact position on screen. PageIndicator's default position for round screen device is at bottom, I want update that and make it to top of screen.

Please check below code,

Fragments onCreateView()

override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        Logger.info("onCreateView")
        binding = FragmentVitalsBinding.inflate(inflater)

        binding.composeView.apply {
            // Dispose of the Composition when the view's LifecycleOwner
            // is destroyed
            
             setViewCompositionStrategy(ViewCompositionStrategy
             .DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                // In Compose world
                PageIndicator()
            }
        }

Page Indicator Component

    @Preview
    @Composable
    private fun PageIndicator() {
        val maxPages = 9
        var selectedPage by remember { mutableStateOf(0) }
        var finalValue by remember { mutableStateOf(8) }

        val animatedSelectedPage by animateFloatAsState(
            targetValue = selectedPage.toFloat(),
        ) {
            finalValue = it.toInt()
        }

        val pageIndicatorState: PageIndicatorState = remember {
            object : PageIndicatorState {
                override val pageOffset: Float
                    get() = animatedSelectedPage - finalValue
                override val selectedPage: Int
                    get() = finalValue
                override val pageCount: Int
                    get() = maxPages
            }
        }
        Box(modifier = Modifier.fillMaxWidth(1f)
            .fillMaxHeight(0.5f)) {
            HorizontalPageIndicator(
                pageIndicatorState = pageIndicatorState,
                modifier = Modifier
                    .align(Alignment.TopCenter)
            )
        }
    }

Inside Jetpack Compose's HorizontalPageIndicator class there is below code which I want to extend and update. anchor = 90f I want to make it to 0f so that PageIndicators will place at top of screen.

@Composable
private fun CurvedPageIndicator(
    modifier: Modifier,
    pagesOnScreen: Int,
    indicatorFactory: @Composable (Int) -> Unit,
    spacerLeft: @Composable () -> Unit,
    spacerRight: @Composable () -> Unit
) {
    CurvedLayout(
        modifier = modifier,
        // 90 degrees equals to 6 o'clock position, at the bottom of the screen
        anchor = 90f,
        angularDirection = CurvedDirection.Angular.Reversed
    ) {
        // drawing 1 extra spacer for transition
        curvedComposable {
            spacerLeft()
        }
        for (page in 0..pagesOnScreen) {
            curvedComposable {
                indicatorFactory(page)
            }
        }
        curvedComposable {
            spacerRight()
        }
    }
}

Please refer below image, I want implement like this,

Please check and Guide. Thanks in advance...

Answer 1

Just use the rotate property on the modifier like this:

 HorizontalPageIndicator(
    modifier = Modifier
        .rotate(180f // start from top
                + 35f // rotate clockwise
        )
        .padding(4.dp),
    pageIndicatorState = pageIndicatorState,
    indicatorStyle = PageIndicatorStyle.Curved,
)