Please assign a menu to the primary menu location under MENU

Codeplayon
Codeplayon
  • Home
  • DSA
  • Jetpack
  • Flutter
  • Android
    • Android Tutorials
    • Android development
  • Kotlin
  • 5G
  • 4G LTE
    • IoT
  • e learning
  • Blog
HomeJetpack ComposeAndroid jetpack login example and form validation 2022
Jetpack Compose

Android jetpack login example and form validation 2022

Codeplayon1 year agoMay 11, 2022android jetpack login exampleedittext in jetpack composefirebase auth jetpack composejetpack compose broadcast receiverjetpack compose form validationjetpack compose keyboardjetpack compose password textfieldlogin flow jetpack compose
Android jetpack login example and form validation

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.

Read More Tutorial

  • Codeplayon Jetpack Compose Tutorial
  • Codeplayon Android Tutorial
  • Codeplayon Flutter Tutorial
  • Codeplayon on Github
Tags :android jetpack login exampleedittext in jetpack composefirebase auth jetpack composejetpack compose broadcast receiverjetpack compose form validationjetpack compose keyboardjetpack compose password textfieldlogin flow jetpack compose
share on Facebookshare on Twittershare on Pinterestshare on LinkedIn share on Tumblrshare on Redditshare on VKontakteshare on Email
add a comment
CodeplayonMay 11, 2022
Jetpack Compose Grocery App UI | Dashboard App Part 3
Intro showcase view in Jetpack Compose 2022
profile for Codeplayon on Stack Exchange, a network of free, community-driven Q&A sites

find me on socials

latest posts

A Guide to the Best Disinfectant Floor Cleaner for Your Home

4 days ago

The 3 Best Websites for Finding House Cleaning Jobs

4 days agoSeptember 18, 2023
What is a Nanomachine

What is a Nanomachine? When it release Applications

2 weeks agoSeptember 7, 2023
android security settings

5 Simple Ways to Maximize Cybersecurity in Everyday Life

2 weeks agoSeptember 13, 2023
Google News
Google News

Search

Contact Info

Contact information that feels like a warm, friendly smile.

Phone:9876543210
Email:info.codeplayon@gmail.com
Website:Codeplayon

popular posts

Joinpd

JoinPD.com – Peardeck Login Full Guide Details 2023

3 weeks agoSeptember 18, 2023
Best StreamEast live Alternatives For Free Sports Streaming

streameast.live For NFL Free Sports Streaming And Streameast Alternatives

7 months agoFebruary 15, 2023
Disneyplus.com/begin

Disneyplus.com begin code for Disney+ account login 2022

2 years agoFebruary 15, 2023
  • A Guide to the Best Disinfectant Floor Cleaner for Your Home
  • The 3 Best Websites for Finding House Cleaning Jobs
  • What is a Nanomachine? When it release Applications
  • 5 Simple Ways to Maximize Cybersecurity in Everyday Life
  • What is facebook marketplace? how does work

Copyright © 2023 codeplayon

Go to mobile version