Not able to see horizontal page indicator

Question

I started learning jetpack compose and am currently stuck at the moment where I am not able to see the horizontal page indicator and not able to swipe to the next page too. Only the screen at startDestination is visible.

I have referred this from stevdza-san youtube channel

Here is the first screen.

Onboard Screen

@ExperimentalPagerApi
@ExperimentalAnimationApi
@Composable
fun OnBoardScreen(
    navController: NavHostController,
){
    val pages = listOf(
        OnBoardingPage.First,
        OnBoardingPage.Second,
        OnBoardingPage.Third
    )
    val pagerState = rememberPagerState()

    Column(modifier = Modifier.fillMaxSize()) {
        HorizontalPager(
            modifier = Modifier.weight(10f),
            count = 3,
            state = pagerState,
            verticalAlignment = Alignment.Top
        ) { position ->
            PagerScreen(onBoardingPage = pages[position])
        }
        HorizontalPagerIndicator(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .weight(1f),
            pagerState = pagerState
        )
        FinishButton(
            modifier = Modifier.weight(1f),
            pagerState = pagerState
        ) {
           // welcomeViewModel.saveOnBoardingState(completed = true)
            navController.popBackStack()
            navController.navigate(Screen.Home.route)
        }
    }
}

@Composable
fun PagerScreen(onBoardingPage: OnBoardingPage) {
    Column(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top
    ) {
        Image(
            modifier = Modifier
                .fillMaxWidth(0.5f)
                .fillMaxHeight(0.7f),
            painter = painterResource(id = onBoardingPage.image),
            contentDescription = "Pager Image"
        )
        Text(
            modifier = Modifier
                .fillMaxWidth(),
            text = onBoardingPage.title,
            fontSize = MaterialTheme.typography.h4.fontSize,
            fontWeight = FontWeight.Bold,
            textAlign = TextAlign.Center
        )
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 40.dp)
                .padding(top = 20.dp),
            text = onBoardingPage.description,
            fontSize = MaterialTheme.typography.subtitle1.fontSize,
            fontWeight = FontWeight.Medium,
            textAlign = TextAlign.Center
        )
    }
}

@ExperimentalAnimationApi
@ExperimentalPagerApi
@Composable
fun FinishButton(
    modifier: Modifier,
    pagerState: PagerState,
    onClick: () -> Unit
) {
    Row(
        modifier = modifier
            .padding(horizontal = 40.dp),
        verticalAlignment = Alignment.Top,
        horizontalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            modifier = Modifier.fillMaxWidth(),
            visible = pagerState.currentPage == 2
        ) {
            Button(
                onClick = onClick,
                colors = ButtonDefaults.buttonColors(
                    contentColor = Color.White
                )
            ) {
                Text(text ="Finish")
            }
        }
    }
}

@Composable
@Preview(showBackground = true)
fun FirstOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.First)
    }
}

@Composable
@Preview(showBackground = true)
fun SecondOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.Second)
    }
}

@Composable
@Preview(showBackground = true)
fun ThirdOnBoardingScreenPreview() {
    Column(modifier = Modifier.fillMaxSize()) {
        PagerScreen(onBoardingPage = OnBoardingPage.Third)
    }
}

NavGraph.kt


@ExperimentalPagerApi
@ExperimentalAnimationApi
@Composable
fun SetUpNavGraph(
    navController: NavHostController
){
    NavHost(
        navController = navController,
        startDestination = Screen.Onboard.route
    ){
        composable(route = Screen.Onboard.route){
            OnBoardScreen(navController = navController)
        }
        composable(route = Screen.Home.route){
            HomeScreen()
        }
    }
}

Adem ATICI · Answer 1 · 2022-10-01T08:12:37.470

0

You can use the Accompanist library for the horizontal pager with indicators. If you want to how learn to make an OnBoarding screen with indicators, you can look at this example. Also with this link, you can look sample code.

Edit: Sample Code https://gist.github.com/aticiadem/5b50151f540cbac5bae827f85d555ebe

Edit: Code result For image

edited Oct 01 '22 at 08:12

answered Sep 25 '22 at 10:18

Adem ATICI

1
3

I have also followed the same thing, is there any mistake in the code? – Priyanshu Sep 26 '22 at 04:39
Can you remove your weight codes, your code is ok but you don't see your indicator because HorizontalPager(weight = 10f) might be taking up the whole page. Give the height of all the elements to try and check if you can see the indicator. – Adem ATICI Sep 27 '22 at 07:59
i removed the weight code but its not working. same issue – Priyanshu Sep 28 '22 at 13:04
Hi, I am sharing a code I used in the past. You can change or remove some of them according to your needs. I hope it works for you. – Adem ATICI Sep 30 '22 at 06:28
Ok i will try that and update you, and one more question like is there something I imported wrong that's why it's not working? Should I share my import statements? – Priyanshu Sep 30 '22 at 06:52
Hello again, I didn't actually try your code. But I'll try and if I find your problem, I'll update this comment and post the problem here. By the way, I updated the code in the link. Check it again. – Adem ATICI Oct 01 '22 at 08:10

Not able to see horizontal page indicator

1 Answers1