Home > Software engineering >  How can I use onboarding screen just once?
How can I use onboarding screen just once?

Time:04-08

I am new in android jetpack compose , I try to build some small project, and I have a simple onboarding screen, it is work, but

I want to show this onboarding screen just once to users

when users close the app and open again, they will not see onboarding screen again, but I did not find a way on internet, is it possible to do it in jetpack compose for android, any idea?

@ExperimentalPagerApi
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        window.statusBarColor = ContextCompat.getColor(this, R.color.gray)

        setContent {
            OnBoardScreenTheme {
                Surface(color = MaterialTheme.colors.background) {
                    OnBoardScreen()
                }
            }
        }
    }
}

@ExperimentalPagerApi
@Composable
fun OnBoardScreen() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    val onBoardViewModel : OnBoardViewModel = viewModel()
    val context = LocalContext.current
    val currentPage = onBoardViewModel.currentPage.collectAsState()

    Toast.makeText(context, "${currentPage.value}", Toast.LENGTH_SHORT).show()

    val pagerState = rememberPagerState(
        pageCount = onBoardItem.size,
        initialOffscreenLimit = 2,
        initialPage = 0,
        infiniteLoop = false
    )

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        scaffoldState = scaffoldState
    ) {
        Surface(
            modifier = Modifier.fillMaxSize()
        ) {
            scope.launch {
                pagerState.animateScrollToPage(
                    page = currentPage.value
                )
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Gray200)
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    HorizontalPager(
                        state = pagerState
                    ) { page ->
                        Column(
                            modifier = Modifier
                                .padding(top = 65.dp)
                                .fillMaxWidth(),
                            horizontalAlignment = Alignment.CenterHorizontally
                        ) {
                            Image(
                                painter = painterResource(id = onBoardItem[page].image),
                                contentDescription = "OnBoardImage",
                                modifier = Modifier
                                    .size(250.dp)
                            )

                            Text(
                                text = onBoardItem[page].title,
                                modifier = Modifier
                                    .padding(top = 50.dp),
                                color = Color.White,
                                fontWeight = FontWeight.Bold,
                                fontSize = 20.sp
                            )

                            Text(
                                text = onBoardItem[page].desc,
                                modifier = Modifier
                                    .padding(30.dp),
                                color = Color.White,
                                fontSize = 18.sp,
                                textAlign = TextAlign.Center
                            )
                        }
                    }

                    PagerIndicator(onBoardItem.size, pagerState.currentPage)
                }

                Box(
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                ) {
                    Row(
                        modifier = Modifier
                            .padding(bottom = 20.dp)
                            .fillMaxWidth(),
                        horizontalArrangement = if (pagerState.currentPage != 2 ) {
                            Arrangement.SpaceBetween
                        } else {
                            Arrangement.Center
                        }
                    ) {
                        if (pagerState.currentPage == 2) {
                            OutlinedButton(
                                onClick = {
                                    Toast.makeText(context, "Start the Screen", Toast.LENGTH_SHORT).show()
                                },
                                shape = RoundedCornerShape(45.dp)
                            ) {
                                Text(
                                    text = "Get Started",
                                    modifier = Modifier.padding(
                                        vertical = 8.dp,
                                        horizontal = 40.dp
                                    ),
                                    color = Color.Black
                                )
                            }
                        } else {
                          

                            Text(
                                text = "Next",
                                color = Color.White,
                                modifier = Modifier
                                    .clickable {
                                        onBoardViewModel.setCurrentPage(pagerState.currentPage   1)
                                    }
                                    .padding(end = 20.dp),
                                fontSize = 18.sp,
                                fontWeight = FontWeight.Medium
                            )
  
}}}}}}}

CodePudding user response:

You can use SharedPreferences tool to achieve this behaviour. Use SharedPreferences to remember very first app launch. Then you will be able to distinguish first launch and all other launches.

There is detailed description for SharedPreferences https://developer.android.com/reference/android/content/SharedPreferences

CodePudding user response:

Use Shared preferences Boolean value(true/false) in last item click.

Reference -

https://developer.android.com/training/data-storage/shared-preferences

or

https://developer.android.com/training/tv/playback/onboarding

  • Related