Lesson 7. Layout options for View items.

Lesson 7. Layout options for View items.

In this lesson we:

– We understand the characteristics of the screen
– consider layout parameters (height, width, indentation, gravity, weight)


First, a little theory on the screens. The screen has such physical characteristics as diagonal and resolution. The diagonal is the distance between opposite corners of the screen, usually measured in inches. Resolution – The number of horizontal and vertical points that the screen is capable of displaying is measured in pixels.

Take the HTC Desire smartphone screen as an example. Diagonal = 3.7 inches, resolution = 800×480 pixels.

The number of pixels in one inch is called dpi (dot per inch). Let’s find out why dpi is equal in this case, remembering the classics: c2 = a2 + b2, Where c is the number of pixels diagonally, ie, accommodates 3.7 inches. a and b are the sides of the screen.

c = 3.7 * dpi
(3.7 * dpi)2 = 4802 +8002
dpi2 = 870400 / 13.69 = 63579
dpi = 252. That is, one inch of the screen holds a row of 252 pixels.

Let’s return to the topic of the lesson. Consider in detail the following options for View items

Layout width and Layout height

We already talked about width (layout_width) and height (layout_height) in the last lesson. We can specify absolute values ​​for them, and we can use constants. Let’s take a closer look at these possibilities.

Absolute values:

The following units of measurement (OI) are used:

dp or dipl – Density-independent Pixels. Abstract AI that allows applications to look the same on different screens and resolutions.

sp – Scale-independent Pixels. The same as dp, only used for font sizes in View elements

pt – 1/72 inches, determined by the physical size of the screen. This OI is from the printing press.

px – pixel, it is not recommended to use so the application will look different on different screens.

mm – millimeter, is determined by the physical size of the screen

and – inch, is determined by the physical size of the screen

You can read more about the differences and relationships between these AIs in this site material.


match_parent (fill_parent) – means that the element will occupy all the width / height available to it in the parent element.

wrap_content – the width / height of the element will be determined by its content

Let’s create a project:

Project name: P0072_LayoutProp
Build Target: Android 2.3.3
Application name: LayoutProp
Package name: ru.startandroid.develop.layoutprop
Create Activity: MainActivity

open main.xml. customize the root LinearLayout to horizontal orientation, remove TextView, And add Button with width and height equal wrap_content. It is displayed on the screen and its width corresponds to the text on it.

Change the text from “Button” to “Button with text”, save and look at the screen.

Button has become wider because width is determined by content. If we now explicitly specify a width of 250 dp, the button will be expanded regardless of the content.

Now let’s make the width even match_parent. Button stretched out on everything the width of the fatherThat is LinearLayout. And LinearLayout, in turn, will take up the entire width of the screen.

If our father has multiple items and we want them to take up space, we need to use the parameter Layout weight. The free space is distributed between the elements in proportion to their weight values.

Let’s change the text of our button to B1 and add a LinearLayout neighbor – the second button with text B2. Set the width for both wrap_content

Let’s deal with separation. If we want the buttons to share the space of the father equally – then for both we specify weight = 1. In this case, the buttons are even in width.

Note that no units are used, they are simply numbers.

If you want B1 to occupy a quarter, and B2 three quarters of the free space, then put weight = 1 for B1 and weight = 3 for B2.

The number of elements can be any. Add a button with the text B3, weight = 2 and width = Wrap_content.

received screen xml code:


now for B2 and B3 specify weight = 0. They no longer claim free space and occupy the width of the content as well B1 takes away everything.

Of course, all of the above can be applied to the height parameter – height.

When used weight you can specify a value height or width = 0dp. In this case, the content of the elements will not be taken into account and the result will be more appropriate for the weight coefficients.

Layout gravity

The layout_gravity parameter is similar to an alignment with Word or Excel. It is most convenient to demonstrate it using FrameLayout. I did not describe this Layout in the last lesson because it is quite simple. By default, he places all the elements he places in the upper left corner and does not build them in any way. For us, this is very suitable for demonstrating alignment settings.

let’s create grlayout.xml:


The screen shows:

For clarity, the button’s text reflects its properties. Everything is obvious and simple.

I honestly tried to understand why gravity values ​​were needed fill_ * and clip_ *, But I never understood. What is written about them in help does not work for me. If you have information about this – write in the comments.

Layout margin

The margin options are completely similar margin with html. This is a retreat. It can be on all sides at once, or only on the necessary sides. Let us demonstrate this by the example of TableLayout. let’s create marginlayout.xml and draw a three-by-three table with buttons.


And on the button in the center we will experiment.

margin = 50 dp
Around the button on each side, an indent = 50 dp.

margin left = 10 dp
margin top = 20 dp
Indent left and top.

margin right = 30 dp
margin bottom = 40 dp
Indent on the right and bottom.

The lesson came out great, but useful. I think this was the last lesson in design, modeling and layout and we will start to code.


If anyone has used HTML, they must have heard about cascading style sheets – CSS. Styles allow you to group attributes of elements (buttons, tables, paragraphs, etc.). Next, you simply apply to style elements, and the element is drawn with all the style attributes in mind. And there is no need to repeat the same code several times for the elements that should look the same. This is especially useful when changing attributes. You just change the style once and all the elements with that style change.

Android also has styles and they have exactly the same purpose. If you have multiple elements and you want them to look the same, then you simply create one style and apply it to the desired elements. Basically, you can still not bother about it and start using styles when you get experience. Well, to those who are interested in it right now – I ask in this thread of our forum. The icamys user for example explains in detail how to use styles.

In the next lesson:

– learn how to access View-elements from the code and change their properties

Discuss in the forum [103 replies]

Leave a Comment