Android UI XML tutorial - Instagram Login

hi guys my name is Yomi and I'm a software developer I am starting a new series on YouTube on Android user interface programming throughout this series we will be converting some interesting and popular you are designed to work in code most of our designs will be gotten from labs be hands-on dribble I'll show you guys are familiar with those sites they have loads of interest in on it fantastic UI concepts today we are starting with this login screen from the Instagram app I created this using Sketch up if you guys want to see how I did that just drop a line in the comment section and I'll upload a video when I get a design brief before I start coding I like to visually inspect the design and um just break it down in my head on a piece of paper that way you know what you want to code you know the layouts you want to use and all that so before we start coding this screen let's break it down for the background we have a gradient background running from a dark blue color so a purple color we have the logo we have two text views or rather edit text views one for the email and password we have a customize button and a couple of texts reviews so it's pretty straightforward yeah so let's start coding first of all I like to define some values I will be using throughout the app so since we're starting with a background makes us to define the colors used in the gradients [Music] let's call this the dark blue but he does yeah I'll copy this and call it purple like this as see 867 okay so now when you look at the design I tried as much as possible to avoid using images for backgrounds if I can define a background in XML I always go for that option that way your design can scale to fit any size without any artifacts I don't have to worry about exports in four different resolutions the address system takes care of it once you can define it in XML you can increase or decrease it as needed so we'll define these gradients in XML all right quickly we define all the color values we will be using throughout the app a quick note X values for colors usually come as six characters after the hash sign or in some cases you can have them as eight characters what districts the first two characters signify in the Alpha Channel which means transparency now that we have the colors defined we go creates the background so we create new your source file let's call it DG login it's a text here change this to ship I'm gonna give it the gradient element [Music] you define the start color so be the dark blue we define the end color let's be the purple while we give it an angle over 135 and makes it vertical that's a we go to our main activity page I will keep the background plus the partner will be created okay that's beautiful what is we still have the action bar which we do not need to remove that we go to styles are we change this to no action bar that's it now if you look closely let's zoom in you see the status bar still has a shade of blue that we do not want one solution is to do make it much the dark blue we used they start this bar picks it it's color for color primary dark so we could change this to use the dark blue color they go with you let's zoom in again okay it's clean enough so we can proceed when you are working with constraint layouts you can work within the text view or the design view I tend to prefer the text view or I do make sure the design view or things don't be easier sitting in the design view so let's start let's look at the design again you'll notice there's imagine around all the views or most of the views so from the design powers 24 DP it is for DP margin so we're creating that with a guideline go to design select layouts and you see guideline vertical I drag it onto the screen I'll be needing soon and for the left on one for the right I give you guideline an idea of guideline lifts and it's going to be so for DP select the second one so 14 they give it mine and 240p and right that's agreed the text view this evaders written written all the codes you need for that for you okay they are additionally important it's vertical in case you need them horizontal guides this will become horizontal okay now we have those two we can get the image Vienna rock content and the source I've taken the liberty to imports some SVG's will be you needing and I'm trying to make the video as short as possible in subsequent videos I'll show you to create a SVG is from scratch my important from various sites so now I have my icon as I see flutter there you go I could keep writing code which I prefer I'm going to show you guys some people think this is easier let me zoom in I need to centralize this between the two guidelines we created so I just pick this handle drag a bit pasando drop to this there you go I do not need this okay I also put this on track to the top table to imagine of say 18 there you go you go to the text I said I was written all the code you need concentrate end to start off cost rate starts to start off okay now the constraints are so that's off of the parent who that's fine the next thing we do is on ready edit texts now the width for constraint layout there's actually no property known as own to the value of all much parents it's actually a Lego so we use 0 DP doesn't mean it's gonna be 0 it just means it's going to follow the constraints we set ok we'll add the constraints determine how wide this particular view is going to be the height remains rough content okay now [Music] let's say the start of the constraint [Music] should be a start of the left guideline okay and the end constraint M so the start of the right guideline can you see this let me make it eager now we told it the view we told the width to be zero but you see our while it is it means it's matching the constraints we set okay so there's nothing like much parents in constraint layouts okay now let's tell this or we get this we just copy it for the next textview give it an ID over the username okay and [Music] impute I'd just go via email address yeah okay now the top let's go back here zoom in its top should be tied to the bottom of the image view okay see and it shall have a top margin of say fourteen okay yeah so the imageview let's give it a descriptive I'll do so you see constrain the top constraint of this view goes to the bottom of the image view I hope you understand that okay next thing we do is oh let's create on a background so much what the design shows us here so we go back to drawable create a new drug or sauce fire okay let's call it a edit text BG okay all right they go to text change the selectors the shape as usual and we give real solid color I also need rounded corners so we give it down around the corner with radius of 2 DP it's good now we use that background and the ID text spare I also give it a hint and um a padding of 16 TP now let's look closely you see the transparency of the background as you can see it through now that I as a result of the Alpha Channel resets and some of the colors we use him okay mixes that lets us sit through the background good so you can proceed we just copy this edit text to create the next one we change the ID and change the type the impute type the constraint top should match the bottom of the username and we reduce the margin I think 16 DP should be fine yeah good now we'll create the bottom I also give it a 0 TP with the Heights will match over up content okay the top constraint shield they are the bottom of the password edit text we give you the top margin of 60 pizza good yeah that's what we want and they're no less centralized between the two deadlines great we enter the text remove the old cups it's a false let's create the background I call it BTN background there is one of those times that we really want to use selector for a button we want the outline to brighten up when it is pressed okay so we need a selector for that a selector lets us use all letters nestled multiple items within itself muscle will create the first item these states give the state of pressed which is true and within the item you now create our shape give a stroke which is the outline this will be brighter so we go yes we use the brighter color give you a whiff does the thickness to be too deep here it also wants rounded corners they give around a radius of 30 Pizza that's fine we just copy this and duplicate it for the next item now it deletes the states since this will be the default state then we use the lighter color and that's it now if I use dark retail background as the background of the bottom that's perfect we have some little adjustments to make in the edit text we need the icon on the right hand side to signify that it's a password field so we'll use all troubled right yeah down the icon yeah that's good also change the text colors let's change that heads first so we change the hint colors now you do the same thing for the username good so we remove the extra margin for the bottles we also give it a tux color that's it now we create the text below it our contents for content and on the text which we have a password we give it an ID I'm the white color now we set the constraints I should be centralized it st. the two guidelines the left on the right guideline on the top of its shield the constraint to the bottom of the bottom he ever sets the idea of the bottom yeah great let's give it a bit of margin yeah that's great look at this view now we want this line of the bottle to be tied to the bottom and the forgot password sign up text view should be between the bottom of the parent on the line the sign on Facebook so it should be tied to the line while this group of lines should be in between all of that so let's go we start screeching the bottom line with a view 0tp and that part of one day game we constraint it's the bottom of the parent the set the margin 250 DP that's great give the background of white yeah next we create the text view our content wrap content don't excise so texts don't have an account under the top you see we're trying centralize it between the view I give it an ID foot aligned centralize it between the footer line and the bottom of the parent a centralized is horizontally and bottom constraint such a lies it vertically that's good tax color now we create the next text view of content web content and a text sign in with Facebook okay on the color I set it now we try to centralize a bit in it to guidelines as usual good and we set the bottom constraint it's the top of the footer line I will give you the margin 16 DP I speak next we give it the left icon which is drawable left our droid will start rather and also set a pardon for the trouble no not that not quite yeah that's what we're looking for yes good for the last part let's look up this we have two lines with the or text in between them we use chaining to achieve this now we use view of T static code just study them we use view to fit the line you have a layout we don't want to in Syria tough one and we constrain the starts to the left guide we use the chain style of spread inside that it dictates how the chained views spread out it all texts we central we centralize it through the line one and the starts is constrained to line one and and constants in line to on line two we created same way like doing one under starts is constrained to the vortex and the end is constraint to the layout the guide right and when you play this is where you get the beautiful screen working as expected so the code is on github you can see the link below and if you have any questions just let me know

Channel: Yomi Y

Views: 103,148

Keywords: Android, UI, Android studio, xml

Id: a6u3d2ssyjY

Length: 25min 13sec (1513 seconds)

Published: Wed Jul 11 2018