Professional Documents
Culture Documents
Linear Layouts
by Shane Conder & Lauren Darcey20 Dec 2010
The following figure shows a linear layout with seven TextView controls. This
linear layouts orientation is set to vertical, causing each of the TextView controls
to display in a single column. Each TextView control has its text attribute set to a
color, with that same color set as the background for the control; each control is
stretched the width of the screen by setting the controls layout_width attribute to
fill_parent.
Perhaps youve noticed that each of the child controls of the linear layout have a
number of interesting attributes, including one called layout_weight. Well talk
more about this in a few moments.
The following two figures show what this layout might look like on a device in
both portrait and landscape modes:
Recall that, from within the Activity, only a single line of code within the
onCreate() method is necessary to load and display a layout resource on the
screen. If the layout resource was stored in the /res/layout/rainbow.xml file, that
line of code would be:
setContentView(R.layout.rainbow);
The following two figures show what this layout might look like on a device in
both portrait and landscape modes:
Lets take a closer look at the Java code listing above. First, three TextView
controls are created and configured. Each has a text size (font size), a text
alignment (gravity), and the text itself. Next, a linear layout is created with a
vertical orientation. Its layout parameters allow it to fill the entire parent (in this
case, the entire screen) and its gravity causes all child controls to be centered
within the screen, instead of from the top left-hand corner. Each of the three
TextView controls is added as a child view using the addView() method. Finally,
the linear layout is passed into the setContentView() method as the parent control
to display on the screen.
As you can see, the code can rapidly grow in size as more controls are added to
the screen. For organization and maintainability, defining and using layouts
programmatically is best left for the odd case rather than the norm.
Some specific attributes apply to linear layouts. Some of the most important
attributes youll use with linear layouts include:
The gravity attribute (optional), which controls how all child controls are
aligned and displayed within the linear layout (class: LinearLayout)
The weight of a child controls how much importance or space its given within
its parent linear layout. This is best illustrated using an example. Lets turn back to
the rainbow linear layout we used earlier. In order to allow all the child controls to
expand to fill the linear layout equally, regardless of the size of the screen, we
used layout_weight to assign relative weights to each TextView. As there are
seven colors that we want to give equal merit, we divided 1 by 7 and come up
with about 0.143. However, since we wanted the weights to sum to 1 evenly, five
of the controls weights received a value of either .14 and two receive a value of .
15a subtle difference that makes our sum exactly 1, but is quite noticeable for
the first and last controls.
This weight trick works well when there is adequate space on the screen for all
controls to display properly. That said, when space gets tight, the weight attribute
may be overridden by other factors, such as view clipping or, in the case of a
TextView, trying not to wrap the text. This becomes apparent when we change the
rainbow.xml layout file to contain a similar horizontal layout (layout_height is
also set to fill_parent).
The following two figures show what this same layout (only changed to a
horizontal orientation) as it might appear on a device in both portrait and
landscape modes:
What we expect is that the red and violet areas (weight 0.15) will be slightly
larger than the other colors (weight 0.14), but this is not how it displays. If you
look closely at the RED TextView, it should take up more space than its neighbor
ORANGE TextView. However, because Red is a short word, and Orange is
not, some jostling is done automatically in order to try to keep all words from
wrapping. The result is more pleasing, but it can be a bit annoying to work around
if this is not the effect desired.
Conclusion
Android application user interfaces are defined using layouts, and linear layouts
are one of the fundamental layout types used. The linear layout allows child
controls to be organized in a single row (horizontally) or single column
(vertically). The child control placement can be further adjusted using gravity and
weight attributes.