Android login screen using jetpack compose [Part-2]
Tags: jetpack, compose, android, ux
Published: 2022-04-12 11:58:36

!["jetpack compose"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p49p7edfo77jijugtat.png)
 
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

```kotlin
@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

```kotlin
@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

```kotlin
@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

```kotlin
@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.**

```kotlin
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.**

```kotlin
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](http://github.com/manojbhadane),** 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!**