DEV Community

Cover image for Android login screen using jetpack compose [Part-2]
Manoj Bhadane
Manoj Bhadane

Posted on

Android login screen using jetpack compose [Part-2]

"jetpack compose"

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
        }
    )
}
Enter fullscreen mode Exit fullscreen mode

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

        })
}
Enter fullscreen mode Exit fullscreen mode

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
                )
            }
        })
}
Enter fullscreen mode Exit fullscreen mode

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)
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
    )
)
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
nehadeore profile image
nehadeore24

I find it very good tutorial to start learning jetpack compose. Thanks @manojbhadane

Collapse
 
manojbhadane profile image
Manoj Bhadane • Edited

Thank you :)