summaryrefslogtreecommitdiffstats
path: root/docs/html/resources/tutorials/views/hello-linearlayout.jd
blob: 8e072b14e1823c80a4e583501b2665d2bdedc4c7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
page.title=Linear Layout
parent.title=Hello, Views
parent.link=index.html
@jd:body

<p>{@link android.widget.LinearLayout} is a {@link android.view.ViewGroup} that displays child
{@link android.view.View} elements in a linear direction, either vertically or horizontally.</p>

<p>You should be careful about over-using the {@link android.widget.LinearLayout}. If you begin
nesting multiple {@link android.widget.LinearLayout}s, you may want to consider using a {@link
android.widget.RelativeLayout} instead.</p>

<ol>
  <li>Start a new project named <em>HelloLinearLayout</em>.</li>
  <li>Open the <code>res/layout/main.xml</code> file and insert the following:
<pre>
&lt;?xml version="1.0" encoding="utf-8"?>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

  &lt;LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      &lt;TextView
          android:text="red"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      &lt;TextView
          android:text="green"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      &lt;TextView
          android:text="blue"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      &lt;TextView
          android:text="yellow"
          android:gravity="center_horizontal"
          android:background="#aaaa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
  &lt;/LinearLayout>
	
  &lt;LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1">
    &lt;TextView
        android:text="row one"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row two"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row three"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    &lt;TextView
        android:text="row four"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
  &lt;/LinearLayout>

&lt;/LinearLayout>
</pre>

<p>Carefully inspect this XML. There is a root {@link android.widget.LinearLayout} that defines
its orientation to be vertical&mdash;all child {@link android.view.View}s (of which it has two) will
be stacked vertically. The first child is
another {@link android.widget.LinearLayout} that uses a horizontal orientation and the second child
is a {@link android.widget.LinearLayout} that uses a vertical orientation. Each of these nested
{@link android.widget.LinearLayout}s contain several {@link android.widget.TextView} elements, which
are oriented with each other in the manner defined by their parent {@link
android.widget.LinearLayout}.</p>
</li>
<li>Now open <code>HelloLinearLayout.java</code> and be sure it loads the
<code>res/layout/main.xml</code> layout in the
{@link android.app.Activity#onCreate(Bundle) onCreate()} method:</p>
<pre>
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}
</pre>
<p>The {@link android.app.Activity#setContentView(int)} method loads the
layout file for the {@link android.app.Activity}, specified by the resource
ID &mdash; <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout
file.</p>
</li>
<li>Run the application.</li>
</ol>
<p>You should see the following:</p>
<img src="images/hello-linearlayout.png" width="150px" />

<p>Notice how the XML attributes define each View's behavior. Try
experimenting with different values for <code>android:layout_weight</code> to see how the screen
real estate is distributed based on the weight of each element. See the <a
href="{@docRoot}guide/topics/ui/layout-objects.html#linearlayout">Common Layout Objects</a>
document for more about how {@link android.widget.LinearLayout} handles the
<code>android:layout_weight</code> attribute.</p>

<h3>References</h3>
<ul>
	<li>{@link android.widget.LinearLayout}</li>
  <li>{@link android.widget.TextView}</li>
</ul>