Posted on Apr 12, 2022

Android login screen using jetpack compose [Part-2]

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 ) )