4. Android - UI - Layouts

hi welcome back this is arrays from jet x.com this is a video series on Android programming in this video we will have a look at Android UI specifically views and layouts a view is a parent class for all the UI elements every visual element we see on Android device is a subclass of view another important class is called view group a view group is a view that contains other views this is basically a container all our layouts are the other layers or subclass of your group let's look at hierarchy of the class we have a first base class view there are subclasses the main ones being view group and text view and the view group we have our layouts and some other classes as well for this video we'll concentrate on the layouts we have three important layouts the linear layout relative layout and frame layout the table layout is a kind of linear layout so that is a subclass of linear layout other fields like button edit edit text field are all subclass of text to you what is a layout a layout defines a visual structure of user interface a layout organizes our elements on the screen to create a view let's say we have two fields a text field and a button we can place them on the screen in many different ways we can place them one below the other and align them the center of the screen or we can place them next to each other on the same line or we can place the one below the other and align them to the right side of the screen let's look at linear layout a linear layout place all the elements in a single direction either horizontally or vertically let us look at a example here I have a simple Android application which displays Aloha world by default Android app a crater using create a layout let us create a linear layout using linear layout tag and we need to specify itan width of the layout we will get back to what is match parent is in a moment I will provide the layout height and we need to specify the orientation of our layout that is either we will display the elements horizontally or vertically specify the orientation say vertical let us now add few elements I'll add a textview and I will specify with as match parent that means it takes the width of its parent layout I it as wrap content that means the height of the view will be as much as it can fit the content I'll display a text called a lower so we have a low word field you cannot visually know what site and width of this field so we can add a background color to identify heightened width of the field and provide some color now you see this field has taken the complete width of the parent now let's copy-paste this to add say three fields I will change the color of each each of the fields you can see there are three elements or one below the other if I change the orientation of this layout to Horizonte we will see that fields are displayed on the same line since of witnessed providers they take the complete width of the parent we cannot see the other elements to make them visible we can change the height and width to wrap content to take only the width as much required now we will see there are three fields one next to each other next we will look at the layer to layout in relative layout each elements position is defined related to its sibling or its parent you define a field how do we specify where this needs to be displayed let's look at a demo I will delete this and let's create a relative layout for the later layout also we'll specify the height and width to match parent next let's add a textview we'll have a text hello world we will have a width and height to wrap the content let's say with us to match the parent we have a lower text let's put a background color to identify where exactly it's positioned okay so let's add another text view this time I will provide width as only two wrap content and let's change the background color so you can see the field here it's placed on top of each other so to place them a call related to each other we need to specify say this field I have to place it below below the first fringe further will specify ID for the first field ID you would say v1 and here in specified below view it it is displayed below the view one similarly you can specify it has to be right side of the first view and say align right to that view so this view is related to the first view so any changes in the first view will reflect also on the second view let's say I will add some padding or margin layout margins I will say ten DP so if you'll see this is related to the first fill that's how we use relative layout is specify thus properties related to its sibling or its parent frame layout allows us to display elements on top of one another let's look at the example flame layout again will specify the item width for the layout to match parent now let's create text view we'll add a background color and let's specify Iten width say I'll say 3 under DP we look at what is DP in a short while look at the layout we see we have a textview with color green let's add another field this time I'll add different color we will see that element is on top of each other if I reduce the height and width of second element you can see both are they're on top of each other we can play with padding margin and specify the height and weight to place one on top of each other what's the main use of frame layout is to display the frame for example the first view assume this is a image of of your own photograph and you want to display some kind of frame around that on top of that or you want to put some kind of bears on top of that then second view can have a image which displayed some kind of icon or something on top of that image that's why it's called a frame layout basically used to create frames of your for your photos let's look at basic attributes that you need to know while working with layouts there are three main attributes first one is size second gravity and margin and padding let's look at each of them you can specify size of element in three different ways as we saw an example we can specify match parent or wrap content match parent means it takes the same height and width as of its parent whereas wrap content it will take only the i-10 way that is required to display the content the third and most important one is by specifying DP what is a DP DP means density independent pixel we should not or it is not recommended to to specify item width in pixels instead we should specify in DP Android will calculate the pixel by using this DP Android calculates this using the formula DP multiplied by density ratio of the device each Android device will have a density ratio for example the medium density devices as a ratio 1 and I density hdpi as 1.5 as a ratio and excess dpi is a ratio of 2 Android has specified these ratios on a general basis let's look at a example on what happens when you specify I turned within pixel versus DP let's say we are creating element and specifying the I 10 width in pixels say hundred pixels each on a normal device with where the density is a normal density it's a mdpi device our element would looks like something like this it has height of under pixel and width of hundred pixel same application on a double density wise like xhdpi would look something like this since the density is high there are more pixels so under by under pixel would look something like this we can see our app considerably looks shrink on a bigger device on the other hand if you use DP as unit to specify it and wait on a normal device that's a normal density Android will calculate the pixels by multiplying or DP into density ratio for normal device the mdpi device that insulation is one so pixel lays and read into one that is under pixels and when we display the same app on a double density device that is xhdpi device the density ratio is two so Android will calculate the pixels by multiplying DP value into density ratio in this case and read into two it's 200 pixel so the V would look something like this as we can see on the both devices our app would look very similar when we are designing a user interface it is always recommended to use DP instead of pixels the next important attribute is called gravity gravity attribute is used to position our element in the wheel basically align them in different ways either top or bottom on the right side there are two important attributes first is the layout at layout gravity and gravity what's the difference layout gravity positions the element with respect to its layout or its parent whereas gravity positions the content of a element let us look at an example let's get back to linear layout and we only have saw say we have a linear layout three fields let's say I will take only one view and specified say 200 DP and I talk to hundra DP so we least see this rectangular shaped view let's look at gravity by default it is aligned to the left and top if I want to allow it to the oil to the bottom we can use Android layout gravity I say bottom can see the field has come to the bottom of the screen whereas if you want to align the content within the element it's all over text I need to use attribute called gravity so I will say Center see the content all over it is in center so that's the difference between layout gravity attribute and gravity attribute and the other important fields the attribute is padding and margin this is element and when you specify layout margin there is a spacing between the element and its parent this is margin whereas padding is a spacing between the content and the border of the element let's create a simple screen a login screen using linear layout we will look at example of nested layouts in this case we have a linear layout we need to display them vertically since we have three rows say first row second row and third row so we have linear layout that is displayed vertically the first I will I need to add new fields user and the field for that I will add a text view since we have two fields we need to have another layout linear layout that is oriented horizontally and I will specify it and weight to match the parent probably only width in marriage and the height should be of wrap content inside his nested layout I will add my text view say user wait to wrap content I also the content next weíll have a edit text so we have two fields the text field text and the edit text you can see from the outline here the width is wrap contents for this we should probably be say I would say 400 DP just looks like too much so say 200 DP so because this is a text user and the field simply I'll add another row for the password so we have two fields not aligned exactly the way we want then under last the next we will have a button the button we need to align to the right side so we'll use gravity should be layout gravity so we are aligning the element itself so buttons to the right but we need to fix these views so when we have elements like this so we define it--and wait we can use something called weight to specify how much width is supposed to take let's say lay out wait is say one and four textfield also in specific one what it does is it calculates it sums up these two weight and divides the weight available between those two child's in this case both will get around 50% weight in win a specific weight we should specify the width as 0 DP so you can see what fails taking 50% of the spacing but in our example or in our screen we see the field supposed to take know the more fair more width compared to the text so we'll change the width weight so that edit text gets more weight it is 2 now the total weight ratio is 3 out of 3 one part of the 3 is for the textview under 2/3 of it is for text edit text so it looks much better so password is here this is field is here and we need to allow our line is password to the right of its view for that we will use again gravity right so now it looks very similar the password field and a text field has the same to the user field you need to say 0 DP so now our visual UI looks much better of course the text I specified this supposed to be a values in string XML that's ideally what we will do that whatever purpose I have put a text inside this example so we get the idea so with of you layout your elements using layout thank you for watching for more videos please visit je techniques calm

Channel: JTechniques

Views: 34,703

Keywords: android, ui, layouts, linear, layout, relative, frame, dp, px, layout attributes

Id: uoZyj298uhE

Length: 24min 18sec (1458 seconds)

Published: Tue Apr 22 2014