LOGIN SCREEN ......

  Hey guys ,I from master programming welcome's you all we are going to create custom edit text and buttons for our login screen so let's get started let's create a text view with text login wrap_context... wrap_context text color would be back text size should be 16dp refer to design specs for these values font family should be semi bold you can always see all the margins from our design specs you can even scale them by increasing size it looks perfect now let's create a linear layout which will hold our login form its orientation should be vertical should align it to center vertical let's create an edit  Text with default properties 48dp margin-left I just remember design specs so I'm just doing like that you can different to your design specs accordingly now let's create a background for our edit text so that it looks custom for that we will copy a card background and make some changes into it Rename the file we should change the color by referring to design specs its color is white with 8% alpha we should create one more color atri.. color value in colors.xml color Edit Text Background black with 8% alpha it will make a little gray color rename it to color edit text background color edit text now let's change its corner radius to 18 dp add background to edit text now let's change height to 36 dp we should enlarge it little 48 dp will look fine

 I will show you how I choose these dimensions in another video I will show you how I create very good designs using golden ratio change radius to half of height of edit Text which is 26dp you can see editText looks perfect now let's add a placeholder using property Android hint someone@gmail.com it should have padding26 dp another property input type email address its text size should be by default and fontfamily to semibold lets import icon using image assets browse from your computer desktop change its color to black Change name of icon now in this we will add a property drawable End which will hold our icon and we should add a color drawble Tintcolor Text Black so that it's easier for us to make changes in our dark theme perfect now add a text color to color TextBlack now let's copy it and similarly forpassword text add a margin top property 24 DP change its input type to... hint password and put type to password add icon for this change this name to lock icon it looks great now let's create a checkbox default properties add its margin top to be 24dp 18 dp will be fine let's add a text remember me it's text size should be 16 dp...18 dp perfect now let's change text color to black lets add a font family semi bold our checkbox is ready now now we need to add need help button

 we will create a text View if you want you can add an onclick property on it while programming on that for this we need to create a linear layout with weight sum property like I explained in the last video to make it responsive basically weneed to divide into 1 is to 1 ratio 1/2 1/2 with orientation horizontal so it will be responsive for all devices layout weight sum is a very niceproperty helps you to divide your UI evenly very easily first let's add a margin property 48dp margin-left margin right 48dp let's copy text textView and paste it here remove its margin left property and margin to property we will add margin left to 12dp decrease its size adjust your text size accordingly refer to design specs change android text to need help? let's add a layout weight 1 so that it takes a half part of our UI width let's create a button which will even take half of it's part of width it should be same as editText 52dp and it's width 0dp lets add the layout Weight 1let's change linear layout's width to match parent so that it halves evenly off our screen width we should create a background for our button so we will copy edit_text background and paste it and modify it rename it to button background we should define color for button which is same as color primary let's copy it change its color tog color Button add a background add a text sign in using text all caps property we can make it false text color to white text color - white its text size should be 16dp font family semi-bold now let's create another linear layout with width match parent height wrap content it should be bottom of our parent so we will add align parent bottom property so orientation should be horizontal change its text to don't have an account register now should be center horizontal we should add a margin-bottom property it's value should be between 16 to 18dp change your size accordingly the best way of getting perfect size is by increasing and decreasing it by little bit I'm finally choosing 25dp and let's copy text view we are creating two different text view to align horizontally because we need two different properties like register should be bold and its color should be different I'm not getting why it's not in the same line I think I made a mistake I should remove the layout weight property similarly for another text view make it's font family to bold add a color we should first make a color property of this text which is same as color button or a color primary let's name it colour text primary it will again help us in designing dark mode of this UI now it looks perfect you can see our design is responsive and it looks great in all screen sizes we have now successfully than the lighting of a login screen.

 hello guys how are you today hope you'll be fine today my name is Abdul Aziz Ahwan from Indonesia and now you are watching the second video okay so today's video we will learn together how do we convert the first design into Android Studio but before we are going to the main topic of this video I am so grateful if you want to click the subscribe button to make this channel growing up okay thank you so much and let's get started with my video hello guys welcome back to my channel this is the second video about how do we create something like 404 error page page not found something like that okay make sure before we continue to the code section make sure you have watched my first video link in the description below okay so today's video we are going to continue the first section and now we are going to convert Adobe XD design into Android studio okay so previously we have created something like this I called this like error page page not found,okay first we need to connect our computer to the internet connection because we need to download like animation from Lottie animation library okay and and then we create a new project in this section I use Android studio 3.5.3 and just press start new Android Studio project and then select empty activity and then we name it as language Java and then minimum APIAPI 21 and select finish and wait until the syncing process is finished okay finish and as we can see we havemainactivity.java and then activity_main.xml and the next step is open our browser and then go to the Lottiefiles.com which is I want to use this animation as we can see here and to change the color just press here edit layer colors and then we just need to select component we want to change may be this 4 and then press this and we input our hex color and then just press update and after you have finished you can export as Lottie JSON  here and after you have export JSON file the next step is we go to the documentation Lottie for Android link in the description below okay we just need this copy and go to our Android Stuido project and then go to build gradle and then paste here and for the Lottie version 3.3.1 which is the latest version of Lottie and then select syncing now okay okay and the next step is we open activity_main.xml as we can see we have component hello world and we need to remove this and we want to design from scratch okay and I think I don't need constraint layout constrain layout I mean so change to linear layout and then for the orientation set it to vertical and press CTRL + Alt + O to remove and unused component and the next step is we open Adobe XD and we can see width, height and the size and others okay first we need to import our JSON file which is I have rename  as not_found.jsonright-click and then copy and then go to the Android studio and then right-click on the app and new folder ->> assets folder and press finish ok the next step is select on assets folder and then right-click and select paste and ok and as you can see this is our JSON  file and the next step is copying this and then go to Android studio again right-click on the drawable and paste and ok ok and the next step is we need to create this which is we want to animate this image view so we create Lottie animation view and we close it and we can see the width and the heigth so he copied this I'm sorry 321 and for the height 237 so for the width 321 and then 237 dpokay and then we type file Name and we call our JSON file which is in the assets folder not_found so we type here following by extension file and then we type loop which is we set it true and then autoplay set it to trueand then we can select preview on the right side and we need to make it'scenter so we set layout gravity center horizontal okay and we can see margin-top set to 104dpokay but we can see anything and the next step is we add TextView and then wrap_content wrap_content and we close it and then for the text oops!and then for the margin top maybe 64 dp and then gravity center horizontal and for the text size maybe 20sp and for the color we can see and then copy this okay and copy this and then we need to copy this and then for the margin top set it to7dp and for the Alingment set it to Center and for the textSize we can see 16sp okay and we move to design tab and then select on our text view and then we type font family and then select more fun and we search Poppins and set to medium and add font to project and this one Poppins regular, add font to project okay and we can see and then the last we need to add button for the width we can see here 240dp and then for the height 48dpand we close it and for the background maybe rounded.xml so we create drawable and then select ok and we need to create item and then shape and then solid for the color copy this and copy and paste here and then for the corner, corner radius we can see here 4dp we close it and we go to activity_mainagain and we set it to center, center horizontal and we give margin set it to64dp and then for the text go to home and we can see it's all caps so we say text all caps set it to false and then for the text color we set it to white look like this and then for the textsize 16sp and then for the font family set it to Poppins medium look like this so I think we need to add tools and we call not_found okay look like this and the last we need to may be style and then no action bar and we go to the main activity.java okay maybe below the super so I want to make our screen to be full screen but I get error okay so I think we need to set flags okay get Window. setFlags window Manager and we need to run emulator Pixel 3 XL okay and run our app okay we can see look like this I want to compare with design okay I think it's look similar this looks more this look bigger because I designed for mdpi screen.I hope you like this post in case of any doubt you can ask in the comment section.