In this part we will add some more screens and will create some common components as well to reuse them across the app.
Configuration used while creating this spinner โ ,
- Compose version : 1.1.0-alpha06
- Kotlin version: 1.5.31
- Android studio : Android Studio Bumblebee | 2021.1.1 Patch 3
Step 1 : Letโs create common TopAppBar component first. create new package named component\ inside this package create new file and named it as component\CustomTopAppBar.kt Paste below code snippet in this file
@Composable
fun CustomTopAppBar(navController: NavHostController, title: String, showBackIcon : Boolean) {
TopAppBar(
title = {
Text(text = title)
},
navigationIcon = if (showBackIcon && navController.previousBackStackEntry != null) {
{
IconButton(onClick = { navController.navigateUp() }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back"
)
}
}
} else {
null
}
)
}
Step 2: Create new file screen\SignUp.kt and add below code in it
@Composable
fun SignUp(navController: NavHostController) {
Box(modifier = Modifier.fillMaxSize()) {
ScaffoldWithTopBar(navController)
}
}
@Composable
fun ScaffoldWithTopBar(navController: NavHostController) {
Scaffold(
topBar = {
CustomTopAppBar(navController, "Signup", true)
}, content = {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Sign up",
fontSize = 30.sp,
color = Color.Black
)
}
})
}
Step 3: Create new file screen\ForgotPassword.kt and add below code in it
@Composable
fun ForgotPassword(navController: NavHostController) {
Box(modifier = Modifier.fillMaxSize()) {
ScaffoldWithTopBarForgotPass(navController)
}
}
@Composable
fun ScaffoldWithTopBarForgotPass(navController: NavHostController) {
Scaffold(
topBar = {
CustomTopAppBar(navController, "Forgot Password", true)
}, content = {
Column(
modifier = Modifier
.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Forgot Password",
fontSize = 30.sp,
color = Color.Black
)
}
})
}
Step 4: Now we will add navigation for above screens we just created. In order to do that update ScreenMain.kt with below code
@Composable
fun ScreenMain(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = Routes.Login.route) {
composable(Routes.Login.route) {
LoginPage(navController = navController)
}
composable(Routes.SignUp.route) {
SignUp(navController = navController)
}
composable(Routes.ForgotPassword.route) { navBackStack ->
ForgotPassword(navController = navController)
}
}
}
Step 5: To navigate to signup screen from Login screen add below code to onClick of sign up text in Login.kt.
ClickableText(
text = AnnotatedString("Sign up here"),
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(20.dp),
onClick = { navController.navigate(Routes.SignUp.route) },
style = TextStyle(
fontSize = 14.sp,
fontFamily = FontFamily.Default,
textDecoration = TextDecoration.Underline,
color = Purple700
)
)
Step 6: To navigate to ForgotPassword screen from Login screen add below code to onClick of forgot password text in Login.kt.
ClickableText(
text = AnnotatedString("Forgot password?"),
onClick = { navController.navigate(Routes.ForgotPassword.route) },
style = TextStyle(
fontSize = 14.sp,
fontFamily = FontFamily.Default
)
)
That's it, you are done with Login UI using jetpack compose.
Find complete code on GitHub, Donโt forget to follow ๐
Please follow to get updated posts and hit like to motivate me
Thanks ๐๐
If this post was helpful, please click like button below a few times to show your support!
Top comments (2)
I find it very good tutorial to start learning jetpack compose. Thanks @manojbhadane
Thank you :)