Compose Authentication App - UI UX
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.
How to create Authentication app screens in Jetpack compose | Login UI Jetpack compose | Login Screen in android
Step1:
Add below dependency in app level gradle file as it is required for navigation
//Compose Navigation Dependency
implementation "androidx.navigation:navigation-compose:2.5.0"..
Step 2:
In our MainActivity.kt we created the Navigation Host of each pages with different route name.
* login_page is route name
@Composable
fun LoginApplication(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = "login_page", builder = {
composable("login_page", content = { LoginPage(navController = navController) })
composable("register_page", content = { RegisterPage(navController = navController) })
composable("reset_page", content = { ResetPage(navController = navController) })
})
}..
Step 3: Need to create LoginPage.kt with Login screen UI design
package compose.material.theme
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.painterResource
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.text.style.TextAlign
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
@Composable
fun LoginPage(navController: NavController) {
Box(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight()
.background(
color = Color.Transparent,
)
) {
Box(
modifier = Modifier
/*.background(
color = MaterialTheme.colorScheme.onPrimary,
shape = RoundedCornerShape(25.dp, 5.dp, 25.dp, 5.dp)
)*/
.align(Alignment.BottomCenter),
) {
Image(
painter = painterResource(id = R.drawable.user_sign_in),
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier
.height(180.dp)
.fillMaxWidth(),
)
Column(
modifier = Modifier.padding(16.dp)
.fillMaxWidth()
.verticalScroll(rememberScrollState())
,
horizontalAlignment = Alignment.CenterHorizontally
) {
//.........................Spacer
Spacer(modifier = Modifier.height(50.dp))
//.........................Text: title
androidx.compose.material3.Text(
text = "Sign In",
textAlign = TextAlign.Center,
modifier = Modifier
.padding(top = 130.dp)
.fillMaxWidth(),
style = MaterialTheme.typography.headlineSmall,
color = MaterialTheme.colorScheme.primary,
)
Spacer(modifier = Modifier.height(8.dp))
SimpleOutlinedTextFieldSample()
Spacer(modifier = Modifier.padding(3.dp))
SimpleOutlinedPasswordTextField()
val gradientColor = listOf(Color(0xFF484BF1), Color(0xFF673AB7))
val cornerRadius = 16.dp
Spacer(modifier = Modifier.padding(10.dp))
/* Button(
onClick = {},
modifier = Modifier
.fillMaxWidth(0.8f)
.height(50.dp)
) {
Text(text = "Login", fontSize = 20.sp)
}*/
GradientButton(
gradientColors = gradientColor,
cornerRadius = cornerRadius,
nameButton = "Login",
roundedCornerShape = RoundedCornerShape(topStart = 30.dp,bottomEnd = 30.dp)
)
Spacer(modifier = Modifier.padding(10.dp))
androidx.compose.material3.TextButton(onClick = {
navController.navigate("register_page"){
popUpTo(navController.graph.startDestinationId)
launchSingleTop = true
}
}) {
androidx.compose.material3.Text(
text = "Create An Account",
letterSpacing = 1.sp,
style = MaterialTheme.typography.labelLarge
)
}
Spacer(modifier = Modifier.padding(5.dp))
androidx.compose.material3.TextButton(onClick = {
navController.navigate("reset_page"){
popUpTo(navController.graph.startDestinationId)
launchSingleTop = true
}
}) {
androidx.compose.material3.Text(
text = "Reset Password",
letterSpacing = 1.sp,
style = MaterialTheme.typography.labelLarge,
)
}
Spacer(modifier = Modifier.padding(20.dp))
}
}
}
}
//...........................................................................
@Composable
private fun GradientButton(
gradientColors: List<Color>,
cornerRadius: Dp,
nameButton: String,
roundedCornerShape: RoundedCornerShape
) {
androidx.compose.material3.Button(
modifier = Modifier
.fillMaxWidth()
.padding(start = 32.dp, end = 32.dp),
onClick = {
//your code
},
contentPadding = PaddingValues(),
colors = ButtonDefaults.buttonColors(
containerColor = Color.Transparent
),
shape = RoundedCornerShape(cornerRadius)
) {
Box(
modifier = Modifier
.fillMaxWidth()
.background(
brush = Brush.horizontalGradient(colors = gradientColors),
shape = roundedCornerShape
)
.clip(roundedCornerShape)
/*.background(
brush = Brush.linearGradient(colors = gradientColors),
shape = RoundedCornerShape(cornerRadius)
)*/
.padding(horizontal = 16.dp, vertical = 8.dp),
contentAlignment = Alignment.Center
) {
androidx.compose.material3.Text(
text = nameButton,
fontSize = 20.sp,
color = Color.White
)
}
}
}
//email id
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun SimpleOutlinedTextFieldSample() {
val keyboardController = LocalSoftwareKeyboardController.current
var text by rememberSaveable { mutableStateOf("") }
OutlinedTextField(
value = text,
onValueChange = { text = it },
shape = RoundedCornerShape(topEnd =12.dp, bottomStart =12.dp),
label = {
Text("Name or Email Address",
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.labelMedium,
) },
placeholder = { Text(text = "Name or Email Address") },
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Next,
keyboardType = KeyboardType.Email
),
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = MaterialTheme.colorScheme.primary,
unfocusedBorderColor = MaterialTheme.colorScheme.primary),
singleLine = true,
modifier = Modifier.fillMaxWidth(0.8f),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
// do something here
}
)
)
}
//password
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun SimpleOutlinedPasswordTextField() {
val keyboardController = LocalSoftwareKeyboardController.current
var password by rememberSaveable { mutableStateOf("") }
var passwordHidden by rememberSaveable { mutableStateOf(true) }
OutlinedTextField(
value = password,
onValueChange = { password = it },
shape = RoundedCornerShape(topEnd =12.dp, bottomStart =12.dp),
label = {
Text("Enter Password",
color = MaterialTheme.colorScheme.primary,
style = MaterialTheme.typography.labelMedium,
) },
visualTransformation =
if (passwordHidden) PasswordVisualTransformation() else VisualTransformation.None,
// keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
keyboardOptions = KeyboardOptions(
imeAction = ImeAction.Done,
keyboardType = KeyboardType.Password
),
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = MaterialTheme.colorScheme.primary,
unfocusedBorderColor = MaterialTheme.colorScheme.primary),
trailingIcon = {
IconButton(onClick = { passwordHidden = !passwordHidden }) {
val visibilityIcon =
if (passwordHidden) Visibility else VisibilityOff
// Please provide localized description for accessibility services
val description = if (passwordHidden) "Show password" else "Hide password"
Icon(imageVector = visibilityIcon, contentDescription = description)
}
},
modifier = Modifier.fillMaxWidth(0.8f),
keyboardActions = KeyboardActions(
onDone = {
keyboardController?.hide()
// do something here
}
)
)
}Get full source code on git:
..
..
I really appreciate your efforts. You publish good details about Top UI/UX Design firm in Bangalore
ReplyDelete