summaryrefslogtreecommitdiffstats
path: root/docs/html/resources/tutorials/views/hello-linearlayout.jd
blob: 0e8947c10e3aee8c8364412a8920c5084e3e718f (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
page.title=Hello, LinearLayout
parent.title=Hello, Views
parent.link=index.html
@jd:body

<p>A {@link android.widget.LinearLayout} is a GroupView that will lay child View elements
vertically or horizontally.</p>


<ol>
  <li>Start a new project/Activity called HelloLinearLayout.</li>
  <li>Open the layout file.
    Make it like so:
<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 the XML. You'll notice how this layout works a lot like
        an HTML layout. There is one parent LinearLayout that is defined to lay
        its child elements vertically. The first child is another LinearLayout that uses a horizontal layout
        and the second uses a vertical layout. Each LinearLayout contains several {@link android.widget.TextView}
        elements.</p>
</li>
<li>Now open the HelloLinearLayout Activity and be sure it loads this layout in the <code>onCreate()</code> method:</p>
<pre>
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}
</pre>
<p><code>R.layout.main</code> refers to the <code>main.xml</code> layout file.</p>
</li>
<li>Run it.</li>
</ol>
<p>You should see the following:</p>
<img src="images/hello-linearlayout.png" width="150px" />

<p>Notice how the various XML attributes define the View's behavior.
Pay attention to the effect of the <code>layout_weight</code>. Try 
	experimenting with different values to see how the screen real estate is 
	distributed based on the weight of each element.</p>

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