• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Layout Resource
2parent.title=Resource Types
3parent.link=available-resources.html
4@jd:body
5
6<div id="qv-wrapper">
7  <div id="qv">
8    <h2>See also</h2>
9    <ol>
10      <li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">Layouts</a></li>
11    </ol>
12  </div>
13</div>
14
15<p>A layout resource defines the architecture for the UI in an Activity or a component of a UI.</p>
16
17
18<dl class="xml">
19
20<dt>file location:</dt>
21<dd><code>res/layout/<em>filename</em>.xml</code><br/>
22The filename will be used as the resource ID.</dd>
23
24<dt>compiled resource datatype:</dt>
25<dd>Resource pointer to a {@link android.view.View} (or subclass) resource.</dd>
26
27<dt>resource reference:</dt>
28<dd>
29In Java: <code>R.layout.<em>filename</em></code><br/>
30In XML: <code>@[<em>package</em>:]layout/<em>filename</em></code>
31</dd>
32
33<dt>syntax:</dt>
34<dd>
35<pre class="stx">
36&lt;?xml version="1.0" encoding="utf-8"?&gt;
37&lt;<a href="#viewgroup-element"><em>ViewGroup</em></a>
38    xmlns:android="http://schemas.android.com/apk/res/android"
39    android:id="@[+][<em>package</em>:]id/<em>resource_name</em>"
40    android:layout_height=["<em>dimension</em>" | "match_parent" | "wrap_content"]
41    android:layout_width=["<em>dimension</em>" | "match_parent" | "wrap_content"]
42    [<em>ViewGroup-specific attributes</em>] &gt;
43    &lt;<a href="#view-element"><em>View</em></a>
44        android:id="@[+][<em>package</em>:]id/<em>resource_name</em>"
45        android:layout_height=["<em>dimension</em>" | "match_parent" | "wrap_content"]
46        android:layout_width=["<em>dimension</em>" | "match_parent" | "wrap_content"]
47        [<em>View-specific attributes</em>] &gt;
48        &lt;<a href="#requestfocus-element">requestFocus</a>/&gt;
49    &lt;/<em>View</em>&gt;
50    &lt;<a href="#viewgroup-element"><em>ViewGroup</em></a> &gt;
51        &lt;<a href="#view-element"><em>View</em></a> /&gt;
52    &lt;/<em>ViewGroup</em>&gt;
53    &lt;<a href="#include-element">include</a> layout="@layout/<i>layout_resource</i>"/&gt;
54&lt;/<em>ViewGroup</em>&gt;
55</pre>
56<p class="note"><strong>Note:</strong> The root element can be either a
57{@link android.view.ViewGroup}, a {@link android.view.View}, or a <a
58href="#merge-element">{@code <merge>}</a> element, but there must be only
59one root element and it must contain the {@code xmlns:android} attribute with the {@code android}
60namespace as shown.</p>
61</dd>
62
63<dt>elements:</dt>
64<dd>
65  <dl class="tag-list">
66
67  <dt id="viewgroup-element"><code>&lt;ViewGroup&gt;</code></dt>
68    <dd>A container for other {@link android.view.View} elements. There are many
69    different kinds of {@link android.view.ViewGroup} objects and each one lets you
70    specify the layout of the child elements in different ways. Different kinds of
71    {@link android.view.ViewGroup} objects include {@link android.widget.LinearLayout},
72    {@link android.widget.RelativeLayout}, and {@link android.widget.FrameLayout}.
73    <p>You should not assume that any derivation of {@link android.view.ViewGroup}
74    will accept nested {@link android.view.View}s. Some {@link android.view.ViewGroup}s
75    are implementations of the {@link android.widget.AdapterView} class, which determines
76    its children only from an {@link android.widget.Adapter}.</p>
77      <p class="caps">attributes:</p>
78      <dl class="atn-list">
79        <dt><code>android:id</code></dt>
80        <dd><em>Resource ID</em>. A unique resource name for the element, which you can
81use to obtain a reference to the {@link android.view.ViewGroup} from your application. See more
82about the <a href="#idvalue">value for {@code android:id}</a> below.
83        </dd>
84        <dt><code>android:layout_height</code></dt>
85        <dd><em>Dimension or keyword</em>. <strong>Required</strong>. The height for the group, as a
86dimension value (or
87<a href="more-resources.html#Dimension">dimension resource</a>) or a keyword
88({@code "match_parent"} or {@code "wrap_content"}). See the <a href=
89"#layoutvalues">valid values</a> below.
90        </dd>
91        <dt><code>android:layout_width</code></dt>
92        <dd><em>Dimension or keyword</em>. <strong>Required</strong>. The width for the group, as a
93dimension value (or
94<a href="more-resources.html#Dimension">dimension resource</a>) or a keyword
95({@code "match_parent"} or {@code "wrap_content"}). See the <a href=
96"#layoutvalues">valid values</a> below.
97        </dd>
98      </dl>
99      <p>More attributes are supported by the {@link android.view.ViewGroup}
100      base class, and many more are supported by each implementation of
101      {@link android.view.ViewGroup}. For a reference of all available attributes,
102      see the corresponding reference documentation for the {@link android.view.ViewGroup} class
103(for example, the <a
104      href="{@docRoot}reference/android/widget/LinearLayout.html#lattrs">LinearLayout XML
105attributes</a>).</p>
106    </dd>
107  <dt id="view-element"><code>&lt;View&gt;</code></dt>
108    <dd>An individual UI component, generally referred to as a "widget". Different
109    kinds of {@link android.view.View} objects include {@link android.widget.TextView},
110    {@link android.widget.Button}, and {@link android.widget.CheckBox}.
111      <p class="caps">attributes:</p>
112      <dl class="atn-list">
113        <dt><code>android:id</code></dt>
114        <dd><em>Resource ID</em>. A unique resource name for the element, which you can use to
115          obtain a reference to the {@link android.view.View} from your application. See more about
116the <a href="#idvalue">value for {@code android:id}</a> below.
117        </dd>
118        <dt><code>android:layout_height</code></dt>
119        <dd><em>Dimension or keyword</em>. <strong>Required</strong>. The height for the element, as
120a dimension value (or
121<a href="more-resources.html#Dimension">dimension resource</a>) or a keyword
122({@code "match_parent"} or {@code "wrap_content"}). See the <a href=
123"#layoutvalues">valid values</a> below.
124        </dd>
125        <dt><code>android:layout_width</code></dt>
126        <dd><em>Dimension or keyword</em>. <strong>Required</strong>. The width for the element, as
127a dimension value (or
128<a href="more-resources.html#Dimension">dimension resource</a>) or a keyword
129({@code "match_parent"} or {@code "wrap_content"}). See the <a href=
130"#layoutvalues">valid values</a> below.
131        </dd>
132      </dl>
133      <p>More attributes are supported by the {@link android.view.View}
134      base class, and many more are supported by each implementation of
135      {@link android.view.View}. Read <a
136href="{@docRoot}guide/topics/ui/declaring-layout.html">Layouts</a> for more information. For
137a reference of all available attributes,
138      see the corresponding reference documentation (for example, the <a
139      href="{@docRoot}reference/android/widget/TextView.html#lattrs">TextView XML attributes</a>).</p>
140    </dd>
141  <dt id="requestfocus-element"><code>&lt;requestFocus&gt;</code></dt>
142    <dd>Any element representing a {@link android.view.View} object can include this empty element,
143    which gives its parent initial focus on the screen. You can have only one of these
144    elements per file.</dd>
145
146  <dt id="include-element"><code>&lt;include&gt;</code></dt>
147    <dd>Includes a layout file into this layout.
148      <p class="caps">attributes:</p>
149      <dl class="atn-list">
150        <dt><code>layout</code></dt>
151        <dd><em>Layout resource</em>. <strong>Required</strong>. Reference to a layout
152resource.</dd>
153        <dt><code>android:id</code></dt>
154        <dd><em>Resource ID</em>. Overrides the ID given to the root view in the included layout.
155        </dd>
156        <dt><code>android:layout_height</code></dt>
157        <dd><em>Dimension or keyword</em>. Overrides the height given to the root view in the
158included layout. Only effective if <code>android:layout_width</code> is also declared.
159        </dd>
160        <dt><code>android:layout_width</code></dt>
161        <dd><em>Dimension or keyword</em>. Overrides the width given to the root view in the
162included layout. Only effective if <code>android:layout_height</code> is also declared.
163        </dd>
164      </dl>
165      <p>You can include any other layout attributes in the <code>&lt;include&gt;</code> that are
166supported by the root element in the included layout and they will override those defined in the
167root element.</p>
168
169    <p class="caution"><strong>Caution:</strong> If you want to override layout attributes using
170      the <code>&lt;include&gt;</code> tag, you must override both
171      <code>android:layout_height</code> and <code>android:layout_width</code> in order for
172      other layout attributes to take effect.</p>
173
174    <p>Another way to include a layout is to use {@link android.view.ViewStub}. It is a lightweight
175View that consumes no layout space until you explicitly inflate it, at which point, it includes a
176layout file defined by its {@code android:layout} attribute. For more information about using {@link
177android.view.ViewStub}, read <a href="{@docRoot}training/improving-layouts/loading-ondemand.html">Loading
178  Views On Demand</a>.</p>
179    </dd>
180
181  <dt id="merge-element"><code>&lt;merge&gt;</code></dt>
182    <dd>An alternative root element that is not drawn in the layout hierarchy. Using this as the
183root element is useful when you know that this layout will be placed into a layout
184that already contains the appropriate parent View to contain the children of the
185<code>&lt;merge&gt;</code> element. This is particularly useful when you plan to include this layout
186in another layout file using <a href="#include-element"><code>&lt;include&gt;</code></a> and
187this layout doesn't require a different {@link android.view.ViewGroup} container. For more
188information about merging layouts, read <a
189href="{@docRoot}training/improving-layouts/reusing-layouts.html">Re-using Layouts with &lt;include/></a>.</dd>
190
191  </dl>
192
193
194
195<h4 id="idvalue">Value for <code>android:id</code></h4>
196
197<p>For the ID value, you should usually use this syntax form: <code>"@+id/<em>name</em>"</code>. The
198plus symbol, {@code +}, indicates that this is a new resource ID and the <code>aapt</code> tool will
199create a new resource integer in the {@code R.java} class, if it doesn't already exist. For
200example:</p>
201<pre>
202&lt;TextView android:id="@+id/nameTextbox"/>
203</pre>
204<p>The <code>nameTextbox</code> name is now a resource ID attached to this element. You can then
205refer to the {@link android.widget.TextView} to which the ID is associated in Java:</p>
206<pre>
207findViewById(R.id.nameTextbox);
208</pre>
209<p>This code returns the {@link android.widget.TextView} object.</p>
210
211<p>However, if you have already defined an <a
212href="{@docRoot}guide/topics/resources/drawable-resource.html#Id">ID resource</a> (and it is not
213already used), then you can apply that ID to a {@link android.view.View} element by excluding the
214plus symbol in the <code>android:id</code> value.</p>
215
216<h4 id="layoutvalues">Value for <code>android:layout_height</code> and
217<code>android:layout_width</code>:</h4>
218
219  <p>The height and width value can be expressed using any of the
220  <a href="more-resources.html#Dimension">dimension
221  units</a> supported by Android (px, dp, sp, pt, in, mm) or with the following keywords:</p>
222  <table><tr><th>Value</th><th>Description</th></tr>
223    <tr>
224      <td><code>match_parent</code></td>
225      <td>Sets the dimension to match that of the parent element. Added in API Level 8 to
226deprecate <code>fill_parent</code>.</td>
227    </tr>
228    <tr>
229      <td><code>wrap_content</code></td>
230      <td>Sets the dimension only to the size required to fit the content of this element.</td>
231    </tr>
232  </table>
233
234<h4>Custom View elements</h4>
235
236<p>You can create your own custom {@link android.view.View} and {@link android.view.ViewGroup}
237elements and apply them to your layout the same as a standard layout
238element. You can also specify the attributes supported in the XML element. To learn more,
239see the <a href="{@docRoot}guide/topics/ui/custom-components.html">Custom Components</a> developer
240guide.
241</p>
242
243</dd> <!-- end  elements and attributes -->
244
245<dt>example:</dt>
246<dd>XML file saved at <code>res/layout/main_activity.xml</code>:
247<pre>
248&lt;?xml version="1.0" encoding="utf-8"?>
249&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
250              android:layout_width="match_parent"
251              android:layout_height="match_parent"
252              android:orientation="vertical" >
253    &lt;TextView android:id="@+id/text"
254              android:layout_width="wrap_content"
255              android:layout_height="wrap_content"
256              android:text="Hello, I am a TextView" />
257    &lt;Button android:id="@+id/button"
258            android:layout_width="wrap_content"
259            android:layout_height="wrap_content"
260            android:text="Hello, I am a Button" />
261&lt;/LinearLayout>
262</pre>
263    <p>This application code will load the layout for an {@link android.app.Activity}, in the
264    {@link android.app.Activity#onCreate(Bundle) onCreate()} method:</dt>
265    <dd>
266<pre>
267public void onCreate(Bundle savedInstanceState) {
268    super.onCreate(savedInstanceState);
269    setContentView(R.layout.main_activity);
270}
271</pre>
272</dd> <!-- end example -->
273
274
275<dt>see also:</dt>
276<dd>
277<ul>
278  <li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">Layouts</a></li>
279  <li>{@link android.view.View}</li>
280  <li>{@link android.view.ViewGroup}</li>
281</ul>
282</dd>
283
284</dl>