Android login screen using jetpack compose [Part-2]

#jetpack #compose #android #ux

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