Android login screen using jetpack compose [Part-1]
Tags: jetpack, compose, android, login
Published: 2022-04-11 12:09:12



Almost all android application will have login or registration process in order to authenticate a user. In this article I will be demonstrating how to design android login and registration screen design using jetpack compose. This will be series of several posts where I will try to cover various android components.

Please do share and hit like to this post to encourage me. :)

**Configuration used while creating this post — ,**
_**Compose version :** 1.1.0-alpha06_
_**Kotlin version:** 1.5.31
**Android studio :** Android Studio Bumblebee | 2021.1.1 Patch 3_

The final output screenshots of this tutorial will be like below image


!["Login screen jetpack compose"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25dm7i1t7s8ecyzpdkls.png)
 


**Step 1:** Create an Android Studio project by selecting an “Empty compose activity”.


!["Android studio new project jetpack compose"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya4hp2ll4tchp296s3nc.png)

**Step 2:** Add below dependency in app level gradle file as it is required for navigation

```
implementation "androidx.navigation:navigation-compose:2.4.0-alpha04"
```

**Step 3:** Create new file **Routes.kt** to store routes information

```kotlin
sealed class Routes(val route: String) {
    object Login : Routes("Login")
}
```
**Step 4:** Create new package **screen**

**Step 5:** Create new File inside screen package **screen/ScreenMain.kt** and paste below code in it.

```kotlin
@Composable
fun ScreenMain(){
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = Routes.Login.route) {

        composable(Routes.Login.route) {
            LoginPage(navController = navController)
        }
    }
}
```
**Step 6:** Create new file **screen/Login.kt** and paste below code in it

```kotlin
@Composable
fun LoginPage(navController: NavHostController) {
    Box(modifier = Modifier.fillMaxSize()) {
        ClickableText(
            text = AnnotatedString("Sign up here"),
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(20.dp),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default,
                textDecoration = TextDecoration.Underline,
                color = Purple700
            )
        )
    }
    Column(
        modifier = Modifier.padding(20.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        val username = remember { mutableStateOf(TextFieldValue()) }
        val password = remember { mutableStateOf(TextFieldValue()) }

        Text(text = "Login", style = TextStyle(fontSize = 40.sp, fontFamily = FontFamily.Cursive))

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Username") },
            value = username.value,
            onValueChange = { username.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        TextField(
            label = { Text(text = "Password") },
            value = password.value,
            visualTransformation = PasswordVisualTransformation(),
            keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
            onValueChange = { password.value = it })

        Spacer(modifier = Modifier.height(20.dp))
        Box(modifier = Modifier.padding(40.dp, 0.dp, 40.dp, 0.dp)) {
            Button(
                onClick = { },
                shape = RoundedCornerShape(50.dp),
                modifier = Modifier
                    .fillMaxWidth()
                    .height(50.dp)
            ) {
                Text(text = "Login")
            }
        }

        Spacer(modifier = Modifier.height(20.dp))
        ClickableText(
            text = AnnotatedString("Forgot password?"),
            onClick = { },
            style = TextStyle(
                fontSize = 14.sp,
                fontFamily = FontFamily.Default
            )
        )
    }
}

```
**Step 7:** Inside your **MainActivity.kt** add below code snippet

```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeDemoTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ScreenMain()
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetpackComposeDemoTheme {
        ScreenMain()
    }
}

```

**That's it,** you are done with Login UI using jetpack compose.

In [**next part [Part-2]**](https://medium.com/@manojbhadane/android-login-screen-using-jetpack-compose-part-2-a262ad87c6d) we will add some more screens and navigation to those screen.

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 the clap 👏 button below a few times to show your support!**