Onboarding Screens: HorizontalPager and First-time User Experience

#android #kotlin #compose #tutorial

Onboarding Screens: HorizontalPager and First-time User Experience

Effective onboarding introduces users to your app's core features and builds confidence in using it.

HorizontalPager Onboarding

val pagerState = rememberPagerState { 3 }

HorizontalPager(state = pagerState) { page ->
    when (page) {
        0 -> OnboardingScreen1()
        1 -> OnboardingScreen2()
        2 -> OnboardingScreen3()
    }
}

Dot Indicator

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.Center
) {
    repeat(3) { index ->
        Box(
            modifier = Modifier
                .size(if (index == pagerState.currentPage) 12.dp else 8.dp)
                .background(Color.Blue, CircleShape)
        )
    }
}

Persistent First-time Flag

val dataStore = DataStore<Preferences>(context)
val isFirstTime = dataStore.data.map { it[booleanPreferencesKey("first_time")] ?: true }

if (isFirstTime.collectAsState(true).value) {
    OnboardingFlow()
} else {
    MainApp()
}

Completion Logic

var currentPage by remember { mutableStateOf(0) }

Button(
    onClick = {
        if (currentPage < 2) {
            currentPage++
        } else {
            // Mark onboarding complete
            runBlocking {
                dataStore.edit { it[booleanPreferencesKey("first_time")] = false }
            }
        }
    }
) {
    Text(if (currentPage == 2) "Get Started" else "Next")
}