Import Adobe XD Android App UI in Android Studio

hello guys welcome back to this channel in this video we are going to implement this UI in our energy to do project so let's get started so just first create a new project from here name whatever you want I will use default name just great next to your preferred API or sdk from here select next from here choose empty activity and then finish so it will take some time to build our project [Music] so as you can see now Gradle build has been finished now we have to just delete this from know this little build soon and I will use pixel excel for this because I have same every device in that so just go and change with this project it will have some more folder all of the directory of your project will be here now just have to we have to delete this X and bar from here so just to go in this app sources man and in resources folder you have to go in values and open style dot XML in change this dark xn bar to know action bar so just close it as you can see we just deleted it now go in here at of XD now select some files for this just open it and before you import just hide this username and password text from here just hide it hide it now select all of these and right click and export selected now choose Android choose your preferred folder from here I will use the on desktop create a new folder called ax I will use that folder and export it ok after export it if you have your own background then you will have to export that as well so hide all of that from here go back select login right click in same expert Android and same folder now export it now as you can see we just exported all over resources from here now we have to go in our Android and create that folder which present in our exported folder so we have six folder over here hdpi ldpi mdpi hdpi double x DP and relax DPI so we have to create that folder same in our directory so just right click on resources folder new and Android resource directory so just select drawable from here just density next and choose first load in trait it's you know you can see that we have drawable ldpi same folder name where we ever exported our resources so just create ok and you have to do this like six time if you have six folders right Emma see if you have five folder [Music] [Applause] okay so we just create our six folders over here just right-click any of one and so in Explorer now open your exported folder and open it side by side now move all of these two here two here in same folder just take and move same for all of this [Music] [Applause] [Applause] we're so close it now just go and import a button here and do the constraint layout thing we seen it in our sketch video second video I think in our channel so just select it and do up-down left-right same for our edit text so for username I will select a pen text from here and do with the same constant with this now here and for password I will use password edit text so just do the same for this also right here and choose image you write put on bottom and select social icons and click OK now just Center it and do the same with this and import another image view for our main logo put over here select our logo and okay now this enter it and do the same right left up and down ok put wherever you want but little will large and so you can see okay so we have to fast to change the background of our app so just right click here and right and red background as login and you will have background over here so just click Oprah view button here so you will have same layout here now for button we just have to remove this and right in red background as login button and you can see that we have as a background has been same as our UI now in facility X right and red background and use troubles less username and we have same now just to give some padding from here padding left and give like maybe 40 yeah what is beta 40 DB and same with this android background for password and you will have same with that and besides of android tax we have to use the hint as username okay and same with this hint is password now right text-color hint as black and text color has also be black and give reading left for TDP and give same text color over here and the right into text color is also be black so we just created our login app UI here if you want to change that status bar color you also can change just click in here select your Android background color go in here and which color you want dark or light just click on color copy this hex code go in your android values and colors and replace with this color primary dark ok if you replace it with this now you can see that in our project we have same status bar for that if you want to use a darker then you can place darker hex code over there now close it this and we have to check how it looks in our device so just hit that play hit play button I already started my Android virtual device so just select a pixel m XL and hit OK and it will take some time to build so just wait okay so as you can see our app has been running in our Android virtual device so what is hint text which whenever you type your username password or anything over here it will automatically will be con so like if I write test and it will gone so this is how we can import our exceed UI in our end of shadow you can do same with this in for your signup page so just create a new activity from here right-click new activity and create empty activity and give name is signup activity signup activity and finish and you will have another activity and this is its design file and do some with that [Music] so this is how we design our sign up and log in UI in our Android studio and you you will now easily import it with this tutorial so if you want this code where I just click in will go in other activity I will put it in in description box so you will just copy paste and replace some things like here you will have to write from which activity you will have to go in here in which activity you have to go [Music]

Channel: Developer boy

Views: 177,091

Rating: 4.7279201 out of 5

Keywords: adobe, xd, adobe xd, xd tutorial, adobe xd tutorial, learn adobe xd, experience design, adobe experience design, ui, ux, ui design, ux design, learn ui design, learn ux design, how to learn ui design, how to learn ux design, ui design tutorials, ux design tutorials, user experience design, interface design, ux designer, adobe xd tutorials, xd tutorials, how to prototype an app, how to prototype an app in xd, how to design an app, how to design an app in xd, app design in xd

Id: rpRUWz9bBj0

Length: 14min 45sec (885 seconds)

Published: Fri Mar 23 2018