#2 Android Login/Signup with MVVM - Login Screen Design

hi everyone this is bilal khan and you are watching simplified coding welcome to the next video of android login tutorial so in the last video we have created this empty project with an empty activity and we just set up all the dependencies required for this project and in this video we will create two fragments one is for the login screen and another one is for the sign up screen or registration screen and in this video we will design all the uis that are required for login and registration so let's see the project so i have already designed the screens because you know designing ui is a boring and it takes a lot of time so i don't want to do it in front of you all so this is my fragment login and it is our login page design i am not very good at designing but i have tried my best to design a good ui so please comment how is the design so this is the login screen design and this is the registration screen design both are actually the same so i just copied the login screen and added one more input field that is name so these are our screens and for these xml layouts i have fragments as well as you can see here i have login fragment and registration fragment and all these fragments i have created inside this auth package so you can create a fragment like this so you need to create two fragments for login and registration and you can get my source code for these designs if you want to use these designs or if you want to design your own screens you can design on your own as well if you want my source code then the link of this project is given in the description of this video and if you like the design then please give me a thumbs up so we have the designs ready we have our fragments ready and one more thing i did in this project as i have enabled view binding so in this project i will not be using the data binding but i will be using view binding if you don't know the difference between data binding and view binding then you can google it and view binding basically means it will generate binding classes automatically for all our layout files and in data binding we need to change or modify our layout file with the layout root tag and then only it generates the binding class but in case of view binding it will generate the binding classes automatically for all our layout files so that is the major difference so i am going to use view binding here in this project so everything is basically ready we have our login and registration fragment we have the designs we have enabled view binding and now i will create an activity that will host my login and registration fragment so let's create it i will create the activity inside my auth package only so we will create an empty activity so i have activity and empty activity and i can name this activity as uh auth activity or you can name it whatever you want then we have the activity let's import r and inside the activity auth i will create my nav host fragment but before creating a nav host fragment first i will define the navigation graph for my auth activity and to do this we will right click on this rest folder and then go to new android resource file and here i will select the resource type as navigation and i will name the file as nav auth or you can name it whatever you want so i have my navigation graph here now here i will add my fragment so the first fragment that i want to display as fragment login [Music] and i don't see the fragment login here so what i will do is i will add fragment register i will go to the code it's showing some error let's see what it is uh it is not an error actually it is just saying that the navigation file is not referenced yet from any layout files so we will do it later but first let's define our fragment so this is my login fragment and for the layout we are displaying fragment register and it is just for viewing purpose when you are developing because it is defined as tools layout so it is optional we can even remove it but if you want to see the design here you can define tools layout and i will define the fragment login here because this is my login screen and i have the login fragment it is the login fragment and we can define one more fragment that is our registration fragment and for this we will define the layout as fragment register and we will change registration fragment [Music] this is the id so we have all the fragments added to our navigation graph now we can create the nav host fragment and our auth activity layout that is activity underscore auth dot xml now go to the design and here we will select nav host fragment and we will drag it to our activity and for the navigation graph we will select the navigation graph that we just created so select it and click ok so we have our nav host fragment ready as you can see here in the layout file code we have the fragment that is actually a nav host fragment the graph as nav auth and it is the default nav host for this activity now go to design again and set the constraints i will set everything to zero so change everything to zero and we are good so we have our auth activity that will host both the fragments for login and registration and now we need to start this activity so let's go to main activity and this is the activity that will be launched when our application starts so inside this activity i will start for now i will start the auth activity and doing it is very easy i will just finish this activity for now and i will start activity and i will pass intent the first parameter is this and the next parameter is the activity that we want to start and it is auth activity class dot java that's it now it will start our auth activity that is hosting our fragments and when we will launch our application we will see our login fragment because it is the start destination and our navigation graph so let's try running the application to see it is working or not so let's run it and here you can see we have our application i just want to remove this toolbar from here so what i will do is i will go to styles.xml and i will change the theme to no action bar and now we can run it again so this is our login screen and i think it looks good we just need to add some margins to this but i'll do it later so that's all for this video friends i hope you found this video helpful and learn something if you want my source code then you can get the link that is given in the description of this video and again i would like to tell you that if you like this video then please hit on that like button subscribe to my channel and share this video with all your friends and thanks for watching i will see you in the next video bye you

Channel: Simplified Coding

Views: 25,444

Keywords: android login tutorial, android login, login page in android, android login screen design xml code, material design login screen android code, android login screen design example code, android login and registration, android php mysql, android mysql login tutorial

Id: 62Ipkra-TTo

Length: 9min 45sec (585 seconds)

Published: Sat Sep 05 2020