12.05.2024

What is going on guys welcome back to. another video of Android application. development in Android Studio in this. video we are going to create simple and. beautiful login screen for any. application you are going to build this. login screen will have username password. and also the social logins like Google. Facebook LinkedIn or Twitter anything. you want this video is simple UI. tutorial video so that you can learn how. to create a simple login screen for your. application so let's get started with. new Android Studio. project. select empty views activity and you can. give any application name for now login. app select minimum SDK and build. configuration language Let It Be. recommended click on finish so our. project is loaded we have two files main. activity. KT and activity main.xml where. we will Design the UI let's go to.

Activity main.xml and click on split. over here so that we can see the code. and the design at the same time so first. of all say hello to this hello world and. delete it and make this constant layout. as a relative layout for. now first thing we will do is we will. create a background for this page so we. will have nice gradient background so. for that what we will do we'll go to. Resource. drawable new drawable resource file we. can create any background so let's say. login background click on okay so here. instead of selector we'll use. sape and in the safee we'll create a. gradient so let's say gradient. type will be a linear type angle will be. let's say 90 or 100 let's give the start. color and also the end color so start. color we can set it to first black and. end color as white so you can see we. have the nice gradient if we go to.

Activity main.xml and give the. background to this as login background. you can see the gradient over here let's. change the color of the gradient I will. make it something like something blue. color. and end color let's give a red. color so it will look like this you can. give any color let's go to activity. main.xml and see our background is. looking good now here we will create the. layouts so first layout we will create. is linear layout so that we can put that. linear layout in a center and we can. arrange items in vertical order so. linear layout match parent height will. be WRA content gravity will be Center. and orientation will be vertical inside. this linear layout we will add first. first thing we will add is image view so. image view let's give size 160. DP and we have to give the source of. image view so from where we will add you.

Can add your own image or we will go to. drawable new Vector asset on clip art. you can select any of the icon from here. I will select account this one account. Circle you can give the size anything. and lets the color be white and give. that icon name icon count Circle next. finish now here give the source icon. account Circle so here it is showing we. can set this entire linearly out in the. center so here we can do gravity Center. let's give padding as well about 16 DP. that's it now after this image view we. will add one edit text to show the. username edit text width will be match. parent height will be WRA content so. let's give the hint as username you can. see over here it is visible text color. will be white hint text color also. White let's increase the text size about. 20 SP and we need a background for this.

So in the same way we have created. background for the login page we'll. create a rounded Corner background for. this so let's go to drawable again new. drawable resource file let's give the. name rounded. corner and root element will be shape. click on okay so here we will create. background so for this shape I will use. shape as rectangle and I will give. Corners r radius about 24 DP also stroke. width will be 1 dip and color will be. white so that it will be 24 DP rounded. corner for our rectangle now let's give. background to this edit text rounded. corner you can see it is looking like. this now let's give padding 18 DP input. type will be text if you want email you. can set it as text email address and. let's give ID to it username input here. we can give margin top as 32 DP so that. we can have a space between these now.

Let's copy this edit text we can make it. for password also paste it below hint. you can give. password margin top let's give 16 only. and input type will be password text. password and ID will be password. input in this way username and password. filed are ready now we have to create a. button so below this we'll create button. with match parent height rap content. text will be login background tint let's. say white text color let's say something. blue padding will be 18 DP margin top. let's give 32 DP text size 20s and ID. will be login button so our button is. also ready now we will add social logins. over here so for that I will write text. view WP content WP content text will be. show login text size will be 18 SP text. color will be white margin top 32 DP now. below this we can add as many icons so I. will create linear layout we want in.

Horizontal matth parent R content. orientation horizontal let's give margin. top as ADP gravity will be Center inside. this we'll create image view for our. social logins so image view let's give. 64 DP both margin will be 6 16 DP and. Source will be image view whatever we. will import so I have in desktop two. image view that is Facebook and Linkedin. I can copy. this and in drawable I can paste. it so we have Facebook and Linkedin here. we can give. Facebook it will be like this you can. copy this paste it as many times you can. you can add more also I will add only. two for now and I will give LinkedIn to. this ID will be p Facebook button for. this ID will be LinkedIn button in this. way our basic but beautiful UI is ready. you can access it in main activity with. view binding or you can use find view by. ID Let's test it also so what I will do.

Let in itware username. input edit text same way password input. and also a login button which will be. button you can use find view ID. usern name input or password input. password input login. button and in login button do set on. click listener whenever user clicks on. login button we will get the username. and password from the edit text so for. that username equals to username input.. get text do string. password now we now for testing we can. log give the tag test. credentials and we can so. username dollar. username and. password doll password let's run and. test how it is looking and it is working. or not so install successfully you can. see it is looking nice and beautiful you. can add. username and also the. password we can click on login go to log. cat search for credencial you can see. test credentials over here that is.

username and the password so in this way. it will work so in this video we have. created the beautiful login screen for. any application you want if you enjoyed. this video please hit the like button if. you have any doubts and queries please. comment below I will reply for you don't. forget to hit the Subscribe button. before going see you in the next video. byebye