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

Android jetpack login example and form validation 2022

CodeplayonMay 11, 2022May 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
676views

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 Twitter
CodeplayonMay 11, 2022
Jetpack Compose Grocery App UI | Dashboard App Part 3
Intro showcase view in Jetpack Compose 2022

You Might Also Like

Navigation Drawer using Jetpack Compose
Jetpack Compose

Navigation Drawer using Jetpack Compose 2022

Jetpack compose Barcode QR code scanner
Jetpack Compose

Jetpack compose Barcode/QR code scanner

Jetpack compose date input text
Jetpack Compose

Jetpack compose date input text

jetpack compose screen orientation
Jetpack Compose

jetpack compose screen orientation 2022

How to create GridView using Jetpack Compose
Jetpack Compose

How to create GridView using Jetpack Compose

Lists using LazyColumn in Jetpack Compose recyclerview
Jetpack Compose

Lists using LazyColumn in Jetpack Compose

  • How do I prepare for Jira certification?
  • flutter bottom sheet open form the top of screen
  • Flutter How to render ListView items in sections
  • PBS KIDS Games android and ios App
  • Reasons To Avail Services Of Packers And Movers

Search

Contact Info

Advertise your brand/services on our blog. You will surely get traffic and exposure from us. To know more about advertising opportunities, refer to our advertising page. Contact Us:

Email:info@codeplayon@gmail.com
Codeplayon
  • Home
  • DSA
  • 5G
  • 4G LTE
  • Android
  • Jetpack
  • Flutter
  • Kotlin
  • Blog
  • Apps
  • Streaming

Copyright © 2022 All Rights Reserved. Codeplayon