Jetpack Compose Login Screen Example Step by Step in 2024

In this blog i am gonna show you how to create Jetpack Compose Login Screen Example step by step in 2024. here i have provided each and every steps like anyone can easily create in kotlin jetpack compose login screen.

Jetpack Compose Login Screen Example with Step by Step in 2024

Step 1 : Add Navigation Dependency in your app level :- build.gradle.kts (Module :app)

dependencies {

implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
implementation("androidx.activity:activity-compose:1.8.2")
implementation(platform("androidx.compose:compose-bom:2023.08.00"))
implementation("androidx.compose.ui:ui")
debugImplementation("androidx.compose.ui:ui-tooling:1.6.4")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview:1.6.4")
implementation("androidx.compose.material3:material3")
testImplementation("junit:junit:4.13.2")

//--->New code<---👇
//Navigation
implementation("androidx.lifecycle:lifecycle-viewmodel-compose")
implementation("androidx.navigation:navigation-compose:2.7.6")
implementation("com.google.accompanist:accompanist-navigation-animation:0.30.1")
//--->New code<---👆

androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
androidTestImplementation(platform("androidx.compose:compose-bom:2023.08.00"))
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
}

Step 2 : Create Login Screen - Jetpack Compose Textfield.

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.loginscreenwithjetpackcompose.Routes.MainRoute.ForgotPassword.toForgotPassword
import com.example.loginscreenwithjetpackcompose.Routes.MainRoute.Home.toHome
import com.example.loginscreenwithjetpackcompose.Routes.MainRoute.SignUp.toSignUp

@Composable
fun LoginScreen(navController: NavController) {
val scrollState = rememberScrollState()

Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = R.drawable.backgroundimage),
contentDescription = "Login",
modifier = Modifier
.fillMaxSize()
.blur(8.dp),
contentScale = ContentScale.Crop
)
}

Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(scrollState),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.padding(28.dp)
.alpha(0.7f)
.clip(
CutCornerShape(
topStart = 10.dp,
topEnd = 10.dp,
bottomStart = 10.dp,
bottomEnd = 10.dp
)
)
.background(MaterialTheme.colorScheme.background)
.wrapContentHeight()
) {
Column(
modifier = Modifier
.padding(48.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
val email = remember { mutableStateOf("") }
val password = remember { mutableStateOf("") }

LoginHeader()
Spacer(modifier = Modifier.height(20.dp))
LoginFields(
email.value,
password.value,
onEmailChange = { email.value = it },
onPasswordChange = { password.value = it },
onForgotPasswordClick = {
navController.toForgotPassword()
}
)
LoginFooter(
onSignInClick = {
navController.toHome()
},
onSignUpClick = {
navController.toSignUp()
}
)
}
}

}


}

@Composable
fun LoginHeader() {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(text = "Welcome Back", fontSize = 36.sp, fontWeight = FontWeight.ExtraBold)
Text(text = "Sign in to continue", fontSize = 18.sp, fontWeight = FontWeight.SemiBold)
}
}

@Composable
fun LoginFields(
email: String, password: String,
onEmailChange: (String) -> Unit,
onPasswordChange: (String) -> Unit,
onForgotPasswordClick: () -> Unit
) {
Column {
TextField(
value = email,
label = "Email",
placeholder = "Enter your email address",
onValueChange = onEmailChange,
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = "Email")
},
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email,
imeAction = ImeAction.Next
)
)

Spacer(modifier = Modifier.height(10.dp))

TextField(
value = password,
label = "Password",
placeholder = "Enter your password",
onValueChange = onPasswordChange,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Go
),
leadingIcon = {
Icon(Icons.Default.Lock, contentDescription = "Password")
}
)

TextButton(onClick = onForgotPasswordClick, modifier = Modifier.align(Alignment.End)) {
Text(text = "Forgot Password?")
}
}
}

@Composable
fun LoginFooter(
onSignInClick: () -> Unit,
onSignUpClick: () -> Unit
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Button(onClick = onSignInClick, modifier = Modifier.fillMaxWidth()) {
Text(text = "Sign In")
}
TextButton(onClick = onSignUpClick) {
Text(text = "Don't have an account, click here")
}
}
}

@Composable
fun TextField(
value: String,
label: String,
placeholder: String,
visualTransformation: VisualTransformation = VisualTransformation.None,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
leadingIcon: @Composable (() -> Unit)? = null,
trailingIcon: @Composable (() -> Unit)? = null,
onValueChange: (String) -> Unit
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
label = {
Text(text = label)
},
placeholder = {
Text(text = placeholder)
},
visualTransformation = visualTransformation,
keyboardOptions = keyboardOptions,
leadingIcon = leadingIcon,
trailingIcon = trailingIcon
)
}

Step 3 : Create SignUp Screen.

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun SignUpScreen() {

//here this page is incomplete you can create according to your use like login Screen.
Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = R.drawable.backgroundimage),
contentDescription = "Login",
modifier = Modifier
.fillMaxSize()
.blur(8.dp),
contentScale = ContentScale.Crop
)
}

Column(
modifier = Modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.padding(28.dp)
.alpha(0.7f)
.clip(
CutCornerShape(
topStart = 10.dp,
topEnd = 10.dp,
bottomStart = 10.dp,
bottomEnd = 10.dp
)
)
.background(MaterialTheme.colorScheme.background)
.wrapContentHeight()
) {
Column(
modifier = Modifier
.padding(48.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "SignUp Screen",fontSize = 26.sp, fontWeight = FontWeight.SemiBold)
}
}

}
}

Step 4 : Create Forgot Password Screen.

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ForgotPasswordScreen() {

//here this page is incomplete you can create according to your use like login Screen.
Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = R.drawable.backgroundimage),
contentDescription = "Login",
modifier = Modifier
.fillMaxSize()
.blur(8.dp),
contentScale = ContentScale.Crop
)
}

Column(
modifier = Modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.padding(28.dp)
.alpha(0.7f)
.clip(
CutCornerShape(
topStart = 10.dp,
topEnd = 10.dp,
bottomStart = 10.dp,
bottomEnd = 10.dp
)
)
.background(MaterialTheme.colorScheme.background)
.wrapContentHeight()
) {
Column(
modifier = Modifier
.padding(48.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Forgot Password Screen",fontSize = 26.sp, fontWeight = FontWeight.SemiBold)
}
}

}

}

Step 5 : Create Home Screen.

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.CutCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun HomeScreen() {

//here this page is incomplete you can create according to your use like login Screen.
Box(modifier = Modifier.fillMaxSize()) {
Image(
painter = painterResource(id = R.drawable.backgroundimage),
contentDescription = "Login",
modifier = Modifier
.fillMaxSize()
.blur(8.dp),
contentScale = ContentScale.Crop
)
}

Column(
modifier = Modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.padding(28.dp)
.alpha(0.7f)
.clip(
CutCornerShape(
topStart = 10.dp,
topEnd = 10.dp,
bottomStart = 10.dp,
bottomEnd = 10.dp
)
)
.background(MaterialTheme.colorScheme.background)
.wrapContentHeight()
) {
Column(
modifier = Modifier
.padding(48.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(text = "Home Screen",fontSize = 26.sp, fontWeight = FontWeight.SemiBold)
}
}

}
}

Step 6 : Create Routes for navigation between screens.

import androidx.navigation.NavController

sealed class Routes(val route: String) {

data object MainRoute : Routes("mainRoutes") {

data object Login : Routes("${MainRoute.route}/login") {
fun NavController.toLogin() = navigate("${MainRoute.route}/login")
}

data object ForgotPassword : Routes("${MainRoute.route}/forgotPassword") {
fun NavController.toForgotPassword() = navigate("${MainRoute.route}/forgotPassword")

}

data object SignUp : Routes("${MainRoute.route}/signUp") {
fun NavController.toSignUp() = navigate("${MainRoute.route}/signUp")

}

data object Home : Routes("${MainRoute.route}/home") {
fun NavController.toHome() = navigate("${MainRoute.route}/home")

}
}

}

Step 7 : Create MainNavigation for calling screens.

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun MainNavigation() {
val navController = rememberNavController()
NavHost(navController, startDestination = Routes.MainRoute.Login.route) {
composable(route = Routes.MainRoute.Login.route){
LoginScreen(navController)
}
composable(route = Routes.MainRoute.ForgotPassword.route) {
ForgotPasswordScreen()
}
composable(route = Routes.MainRoute.SignUp.route) {
SignUpScreen()
}
composable(route = Routes.MainRoute.Home.route) {
HomeScreen()
}
}
}

Step 8 : Call MainNavigation page in MainActivity class.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.loginscreenwithjetpackcompose.ui.theme.LoginScreenWithJetpackComposeTheme

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
//this theme you need to change according to your application
LoginScreenWithJetpackComposeTheme {
MainNavigation()
}
}
}
}

Reference Site

here are the reference site of jetpack compose login screen github you can easily download code and use in your android studio.

Read More: Login Api call using Mvvm Dagger Hilt in Jetpack Compose

Conclusion 

In this post i have shown you how to create Jetpack Compose Login Screen Example step by step in 2024. I will post another blog (Part - 2) of jetpack compose mvvm login example with api integration.

here are the final results of this post: