Simple Login Page in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn how to create a simple login page in Jetpack compose I said simple because there will be no database just a basic authentication logic let me show you the demo this is how it looks we have default credentials where the username is admin and the password is admin 123 now I'll click on login and here we are on our home screen simple now let's create it choose empty activity name it as lar login JC and done let's start with the prerequisites first go to color add green JC color and done then go to the theme keep green JC as the primary color and the status bar color also as green next go to grader as we will be navigating from the login screen to the home screen so obviously we will require navigation dependency so add navigation dependency and click on sync now and done then I don't want to waste a lot of time in the designing part hence just to make the app look more appealing I'll use a background image this is optional if you want you can Skip and design as per your requirement okay let me quickly add the background image in the drawable and done now all the prerequisits are done next our main activity will be a login screen and once the user clicks on the login buttton it will navigate to the home screen so let's quickly create a home screen as well and done here the code is very simple all it does is display a home text in the center of the screen and that's it now it's time for the main activity this is our login screen three things to keep in mind the first is design Shing two text field one for username and another one for password and then One login button the second thing is logic we will have an authentication Logic for username and password got it the third thing is navigation if the login is successful then the user will be navigated from the login screen to the home screen for that we need to create a na host na controller and all of that okay so now follow me remote the default code and done now let's start with the designing part so create a composable function as login screen whose parameter is on login success unit now inside it declare all the necessary variables and done this is username by remember mutable state of which means it is capable of change and same way password then the context you already know we usually use it for toast and that's it now here we will have a column and inside that column we will have two text field and one button so the column will be Max size and padding from horizontal will be 26 DP means from the sides and vertical it will be 140 DP means from the top then vertical Arrangement will be bottom and horizontal alignment will be Center horizontally and then then inside the column outlined text fed see how we used to have edit text in XML same way we have text fields in Jetpack compose one of the variants of text field is outline text field which looks like this you can click on it and go through the list of parameters out of which the first one I'll be using is value that will be the username variable means the input from the user then on value change which will go from username to it means if the value changes then whatever the current value that is it itself that should be reflected in the text field got it next the parameter is label it's like the title of the text field which is username only then another parameter is shape I want the text field to look a little rounded hence I'll be going for a rounded Corner shape with 20 DP next the parameter is colors here we have a lot of customization so watch carefully first the focus and unfocused leading icon color is green means the color of the icon now Focus means when the text field is clicked and unfocus means when the text field is not clicked in the same way focus and unfocus label color means the title color is also green then the contain inner color focus and unfocus is white then the indicator color for both of them is green which means the border of the text field and lastly unfocused placeholder is green which means the hint color next the parameter is the leading icon this text field is for user name so we'll be going for the person icon and then then the last parameter modifier fill Max with with the bottom padding as 8 DP and that's it our username text field is ready in the same way we will create it for password text fi so copy and paste it below here are a few things that we need to change like the value will be the password then on value change will also be the password then the icon as the lock icon and the last thing that we need to add is visual transformation means that the star symbols we see while writing the password that is visual transform information okay and done our password text field is also ready next we need to create a button so right button now here we will require logic so leave it as it is and come outside the brackets here we will create authentication logic so let me quickly write it and done see we have an authenticate function whose parameters are username and password also at the end it will return return a pulan value means either true or false so I have created a default username and password that I will use every time for login valid username is admin and valid password is admin 123 if you want you can change it then the logic says written username means whatever the username the user has written is equal to a valid username which is admin and and password means whatever the password the user has written is equal to a valid password which is admin 1 2 3 according to that it will return as either true or false if the username and the password match with the valid one then it will return true otherwise false got it now let's use this logic here when the user clicks on the login button first it will check the username and password using the authenticate function if the return is true means the username and password are correct then all login success we will initialize later next toast as login successful else the written is false which means the username and password are incorrect then the toast is invalid credentials further let's customize the button so the button color will be green then the button padding for the start and end will be 60 DP and for the top and bottom will be 8 DP then the padding space between the two elements from the top will be 18 DP and lastly button text as login with font size 22 SP and then our button is also ready now the only thing remaining is navigation at the end create a composable function called as namcraft with name host controller as a parameter then inside it name host with its two parameters that are NV controller and start destination here the start destination is login let me quickly write the code and then I'll explain it to you and done now see our stand destination is login this is like a keyword we use for root purpose here the graph consists of two destinations login and home when navigating to the login destination it displays a login screen composable which upon successful lockin navigation directs the user to the home destination using the na host controller then the home destination displays the home screen which we created before got it we are almost done only the last thing that we need to do is to call it inside the set content first we'll be not using a surface instead we will go for a box layout that will be fill Max size and paint means the background of the screen will be our custom background image that is JC login and then scale properly the last thing is to call the na graph composable function and that's it our login page is ready now it's time to run the app this is how it looks we forgot to change label for password let's do that and reapply the changes perfect both the text fields are in green color as well as their label so let me quickly write the default credentials and now I'll click on login button and see it navigate us to the home screen perfect let's try again with the wrong credentials so if I write admin here and in the password I will write admin 1 2 3 4 5 so at the back end it will return return false because because of which we will enter into the else that will throw us a toast as invalid credentials got it further in upcoming videos I'll create a login and sign up using the database so stay tuned for that but for now that is it for the video if you're new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,695

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, mobile apps, tutorial, topic, error, code, login page, signup, register, login jetpack, login screen, login and signup, simple login, username, password, page, kotlin

Id: T4A1TtF-g5U

Length: 18min 26sec (1106 seconds)

Published: Wed Feb 28 2024