Modern Login Screen design android with Shared Animations in Android Studio 2021

assalamualaikum my name is the mucukunda and today we are going to create the second video of our series in which we are going to create two main things the first one is we will be designing our login screen and the second is we are going to implement this animation which is called the shared animation you can see your screen is animating from splash screen to the login screen and this is the login screen we are going to design with the username you can see this style with the outlined box and our username which is the hint is going to the top border and same as our password when we are going to type the password we can simply hide or see this password then we have a forget password button and you use a sign of the sign-in button let's get started okay open Android studio project and I am in the project we have created last time and we have designed the splash screen today's tutorial we have to create two things the first one is to design our login screen the second one is to add animation so for the design I need to add some dependencies for the dependencies you can either if you have a dependency you can simply come inside the app level built or Gradle and paste your dependency in here the way I prefer and the way I use is you always go to the tools sorry to the build and find added libraries and dependencies click on it and in here click on the plus icon and click the library dependency to add the dependencies in the project and in here search for Android dot material nothing found we need to maybe paste complete name okay now we have material dependency in here and we have multiple versions we are not going to use alpha beta or RC but we will find this simple one which is 1.0.0 click OK to add apply and ok to add it in the you can see we have an implementation over here which is seen Android dot material : material the version is one point zero point zero okay once the dependency is added close this one and we need to add our new file which is the login file new and create our activity empty activity and name it login so to start as any move towards the login dot xml we will move toward the text file and remove this constraint to linear layout because at the start we have seen that we are going to stack all these elements one over other so that's why I am using the linear left and it's orientation will be vertical also that we add a background as well bactrim will be white in here we first have to create our image with 150 into 150 to add the image we have to add it first in the project go to the resource drawable right click new and go for the Bible import as in the last video I have told you if you don't know what is this you can check the video link is in the description or at the top right corner that should I go to for plus icon and search for cross period I can okay so what this plugin will do is to create multiple screen resolutions for all the screen devices screen multiple screen sizes so that's why I am using this okay once done you can add it in here we have the image and we also want to assign its ID the ID will be logo image close this one in here we need to add a text TV for the short versions to add it with me text view with the right content its text will be hello there welcome back then we are going to use its text size for PSP use SP for the sizes for the text basically then add a whole family I already imported this phone and we need to assign the IOD here as well logo name I think let's use underscore with small letters for this one we need to add another text view wrap content text will be signed in to continue and its size will be 15 SP and its font family will be antic for this one we need to assign its ID spoken in the school name or to add some spaces we call it as completely attached with the screen we will go to the linear layout the top Piron layout in here we will create a penny 20 DP add some space and now we want to start our form so for that I am just using the linear layout again with match parent and wrap content we will add margin top 20 DP and also margin bottom 20 degree in here we are not going to use the normal edit text which is here but we are going to use the material at the text which is this one text input in a text but before that we are going to wrap this edit text inside text input layout width will be masked parent and wrap content and then we want to close this one and create our edit text with math parent and so wrap content close this one we are going to design our edit text inside the layout sign the ID because we are going to use single text input edit text so it doesn't matter either we can define the ID inside edit text or inside the layout it is same thing I am going to define it in the layout which is username we need to define the style style will be there are four basic styles for the input text input layout for the material design the one we are going to use for this project is the outline box there is outline box dot dense filled box and fill box dense let me simply run this so we can get the design over here our splash screen appears and we also remove this one for the designing part and now you can see we have our edit text with a border line with the outline style so you can type in here but nothing is going at the top so for that we need to add hint and hint will be username now let's run okay we have a username and we click on this and you can see it is going at the top edge or the top line of our edit text field close this one and copy-paste it two times change the username to password change the username and it is going to the horizontal position so we need to assign the orientation has bow which is vertical and you can see our password is there the next thing we want where is input type and it will be text password okay now you can see we don't have an eye but we want to create that toggle enable hospitable enable true and you can see we have an eye over here to show the password or to hide the password while typing also we want to change the name username to password for the hint and a password and username is ready now the next thing we want to create is a forged butter that we are going to create a button a simple button and 200 DP in width and height will be grabbed content and its background will be to make things transparent if you have a transparent code then fine if you don't have then you can simply press 1 2 3 4 5 6 digits for the color and then again add two zeros for making it transparent in Android text will be forget password and its layout gravity will be at the right we are going to create another button for the sign up for that we will create match parent and wrap content its text will be go it's background color with the black the one for my team and the text color will be white for the white use triple F okay we have created a button and inside this both buttons we want to add some space or the forget password button we can add the payday as forex market the margin will be 5 PP and for this we have to add the margin top 5 PP as well as margin bottom okay now we have to create another button the last one change the text to new user and and we are good to go let's run the application and let's see how it's look like splash screen and boom we have over for the new user and sign up when we clicking on the username you can see we have a black outline border for the username and password we want to add an icon for the username as well and change your phone families we also want to remove this status bar at the top so let's quickly do that so first of all change your own families then tick and this one again in tick to the default one and we also want to add its changes color the text color will be black okay done we have to remove the status bar so to move the status bar go to the login and in here so the next thing we want to do is we want to create our animation effect okay to add the animation inside our project we first have to go to the values and in the Styles in here create a new item and it will be for content transition window content transition close this one and in here past true this one is basically for the API level 21 you can see requires AP level 21 so for that click on this bulb I can add override resources in values it will simply create a new file Styles not examined with the version 21 so let this one inside here and you'll need the one from the one we don't need it here we have our line inside the version 21 file okay go back to main activity and in here you can see we are going to call our next activity when the splash screen eye breaches to the define time it will simply call the next activity so what we want to do is we simply create a three to two lines of code here and and go to the first screen okay inside the text we have to assign we want to make this image to be animated and for that we will simply add so named transition name and name it logo image then the text we want to animated it's name will be logo text for the differentiation you can see we are we have our IDs the old one text view image view and text beauty okay so what we want to do is to animate this text this image and this text to the next screen and move to the next screen in here click on this image and we also want to define the transition name here the same one we have defined in our activity underscore mail and simply copy this one and paste it same for the text transition name okay close this one close the both and we have to write the animation inside our first activity main activity from where we want to do these animations okay now you can see we have a code of intent which is simply calling the next activity which is lock in class and let me remove these two lines okay create appear fourth animation there's variable is equal to new PL shut the limit and in here we will pass this and here vocation here and in here we will pass the first one is view and the second one will be string and the view is this is the view so this is the first element we want to be animated which is the image so the view is image and the text is the name we have given this is basically the view which want to be animated and we want to pass our animation name and the animation name is logo underscore image copy this one back to the main activity and pass it here press ctrl or D to duplicate and we have logo image and we have logo text then it is logo this is basically a textview but I named it logo so don't worry about that so this is basically a logo text the view and these both are views and these both are their text the animation text ok once you have defined your peers we need to define activity options activity options dot make scene transition animation and in here we want to pass our first screen which is the main activity dot this or you can pass this as well and the second thing is we want to pass view if you have single view you can pass it here directly and if you have multiples like we have then we will pass sorry peers and that's it click on this line you can see we have a error which is saying API level 21 is required and minimum is 17 in my case so for that click on this bulb and add surrounded with if statements so this line will only work when the API level is 21 it will avoid our application to crash then we will simply do the start activity pass the intent then in here we want to pass options dot to bundle so this option dot to bundle will carry over any machine and this intent will simply call our next screen so that's it for the animations let's run the application okay it is flashed because we have a problem we didn't change this pair to one let's run it again okay ever splash screen is working with animation and boom so this is what we want to design this was the worst shared animation with the login screen using material design X fields and you can type the user name and then you can say it's a password you can hide it you can see it ok that's it for today if you learn something new you can like the video if you're new to the channel please subscribe it and hit the belacan for more videos thank you for watching take care of office

Channel: Coding With Tea

Views: 130,406

Keywords: login screen in android studio, android studio, shared animation android studio, splash screen, android login screen, android login design, login screen design android, login screen ui, simple login app android studio, android login page design, android tutorial, login screen android studio, login android studio, login page in android studio, splash screen android studio, android studio login, android login, login page android studio, login in android studio, android ui

Id: C_TEugAIMHA

Length: 20min 0sec (1200 seconds)

Published: Fri Jan 10 2020