Hi, developer in this topic I make an android jetpack login example. Jetpack is the latest android Tool kit for making UI Without using XML. Jetpack Composes works with Kotlin language and makes UI using Composes in android. So In this jetpack compose a blog you can learn how to use a Jetpack Activity and Create UI.
In this blog, I complete the screen full Ui And add the bestseller list at the bottom of the screen. Jetpack compose is the newest tool for Making UI in native android apps without XML. Let’s Follow the below code for making a grocery app UI in android.
Here I create an Android jetpack login example with a Logo on the top of the screen and used a welcome text. After that create an Input field to enter UserName and Password. For the jetpack compose password textfield, I use the option to Hiden and Show password. after the Adding a login button.
Also, I Add an Android jetpack login example form validation for user name and password the button is enabled when you enter the user name and password otherwise login button is not enabled. At the bottom of the screen, I make a Sign-Up and Forgot Password.
Android jetpack Login example and form validation
Let’s start to create a new project with a jetpack compose activity if you have already a project create a new activity. And follow the below steps. Android jetpack login example.
Add dependencies
dependencies {
implementation 'androidx.core:core-ktx:1.6.0'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'com.google.android.material:material:1.4.0'
implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.compose.material:material:$compose_version"
implementation "androidx.compose.material:material-icons-extended:$compose_version"
implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
implementation 'androidx.activity:activity-compose:1.3.1'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
}Add the above dependency and Syn your project to get the all repository file.
Login Screen Kotlin file Souce code ( android jetpack login example )
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import ark.coding.composesignin.ui.theme.DefaultTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DefaultTheme {
SignInScreen()
}
}
}
}
@Composable
fun SignInScreen() {
var username by remember {
mutableStateOf("")
}
var password by remember {
mutableStateOf("")
}
var isPasswordVisible by remember {
mutableStateOf(false)
}
val isFormValid by derivedStateOf {
username.isNotBlank() && password.length >= 7
}
Scaffold(backgroundColor = MaterialTheme.colors.primary) {
Column(Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top) {
Image(
painter = painterResource(id = R.drawable.ic_output_onlinetexttools),
contentDescription = "App Logo",
modifier = Modifier
.weight(1f)
.size(200.dp),
colorFilter = ColorFilter.tint(Color.White)
)
Card(
Modifier
.weight(2f)
.padding(0.dp),
shape = RoundedCornerShape(10.dp)
) {
Column(
Modifier
.fillMaxSize()
.padding(32.dp)
) {
Text(text = "Welcome!", fontWeight = FontWeight.Bold, fontSize = 32.sp)
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
Spacer(modifier = Modifier.weight(1f))
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
value = username,
onValueChange = { username = it },
label = { Text(text = "Username") },
singleLine = true,
trailingIcon = {
if (username.isNotBlank())
IconButton(onClick = { username = "" }) {
Icon(imageVector = Icons.Filled.Clear, contentDescription = "")
}
}
)
Spacer(modifier = Modifier.height(8.dp))
OutlinedTextField(
modifier = Modifier.fillMaxWidth(),
value = password,
onValueChange = { password = it },
label = { Text(text = "Password") },
singleLine = true,
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password, imeAction = ImeAction.Done),
visualTransformation = if (isPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
trailingIcon = {
IconButton(onClick = { isPasswordVisible = !isPasswordVisible }) {
Icon(
imageVector = if (isPasswordVisible) Icons.Default.Visibility else Icons.Default.VisibilityOff,
contentDescription = "Password Toggle"
)
}
}
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {},
enabled = isFormValid,
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp)
) {
Text(text = "Log In")
}
Spacer(modifier = Modifier.weight(1f))
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
TextButton(onClick = {}) {
Text(text = "Sign Up")
}
TextButton(onClick = { }) {
Text(text = "Forgot Password?", color = Color.Gray)
}
}
}
}
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
DefaultTheme {
SignInScreen()
}
}After adding the above code to your login screen Run your project. After running your project successfully you can enter your username and password in this field. In the Password field, you can enter a minimum of 8 characters then you can see your login button is enabled with the blue color button other vises the login button showing in gray color. Android jetpack login example full source code.