Skip to content

Instantly share code, notes, and snippets.

@kaaneneskpc

kaaneneskpc/OnboardingPage.kt

Last active January 4, 2024 19:29
Show Gist options
  • Save kaaneneskpc/5985b2aa15b488cbf60311dc491a3e0c to your computer and use it in GitHub Desktop.
Save kaaneneskpc/5985b2aa15b488cbf60311dc491a3e0c to your computer and use it in GitHub Desktop.
Download ZIP
Onboarding Page With Using Pager3
Raw
OnboardingPage.kt
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavHostController
import com.example.borutoapp.R
import com.example.borutoapp.ui.theme.*
import com.example.borutoapp.utils.Constants.LAST_ON_BOARDING_PAGE
import com.example.borutoapp.utils.Constants.ON_BOARDING_PAGE_COUNT
import com.google.accompanist.pager.*
import androidx.annotation.DrawableRes
@ExperimentalAnimationApi
@ExperimentalPagerApi
@Composable
fun WelcomeScreen(
navController: NavHostController
) {
val pages = listOf(
OnBoardingPage.First,
OnBoardingPage.Second,
OnBoardingPage.Third
)
val pagerState = rememberPagerState()
Column(
modifier = Modifier
.fillMaxSize()
.background(color = MaterialTheme.colors.welcomeScreenBackgroundColor)
) {
HorizontalPager(
modifier = Modifier.weight(10f),
state = pagerState,
count = ON_BOARDING_PAGE_COUNT, // -> Count = 3
verticalAlignment = Alignment.Top
) { position ->
PagerScreen(onBoardingPage = pages[position])
}
HorizontalPagerIndicator(
modifier = Modifier
.weight(1f)
.align(Alignment.CenterHorizontally),
pagerState = pagerState,
activeColor = MaterialTheme.colors.activeIndicatorColor,
inactiveColor = MaterialTheme.colors.inactiveIndicatorColor,
indicatorWidth = PAGING_INDICATOR_WIDTH,
spacing = PAGING_INDICATOR_SPACING
)
FinishButton(
modifier = Modifier.weight(1f),
pagerState = pagerState
) {
// TODO:("Navigate to Home Screen")
}
}
}
@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 = stringResource(R.string.on_boarding_image)
)
Text(
modifier = Modifier
.fillMaxWidth(),
text = onBoardingPage.title,
color = MaterialTheme.colors.titleColor,
fontSize = MaterialTheme.typography.h4.fontSize,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
Text(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = EXTRA_LARGE_PADDING)
.padding(top = SMALL_PADDING),
text = onBoardingPage.description,
color = MaterialTheme.colors.descriptionColor,
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 = EXTRA_LARGE_PADDING),
verticalAlignment = Alignment.Top,
horizontalArrangement = Arrangement.Center
) {
AnimatedVisibility(
modifier = Modifier.fillMaxWidth(),
visible = pagerState.currentPage == LAST_ON_BOARDING_PAGE //2
) {
Button(
onClick = onClick,
colors = ButtonDefaults.buttonColors(
backgroundColor = MaterialTheme.colors.buttonBackgroundColor,
contentColor = Color.White
)
) {
Text(text = "Finish")
}
}
}
}
sealed class OnBoardingPage(
@DrawableRes
val image: Int,
val title: String,
val description: String
) {
object First : OnBoardingPage(
image = R.drawable.greetings,
title = "Greetings",
description = "Embark on a journey of discovery with us! Unleash the power of cutting-edge features designed to transform the way you engage with technology."
)
object Second : OnBoardingPage(
image = R.drawable.explore,
title = "Explore",
description = "Empower your social connections! On this page, we encourage you to forge meaningful relationships and connections."
)
object Third : OnBoardingPage(
image = R.drawable.power,
title = "Power",
description = "Power up your storytelling! This is all about empowering you to share your life's most significant moments. "
)
}
@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)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment