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<?xml version="1.0" encoding="utf-8"?> 37<<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>] > 43 <<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>] > 48 <<a href="#requestfocus-element">requestFocus</a>/> 49 </<em>View</em>> 50 <<a href="#viewgroup-element"><em>ViewGroup</em></a> > 51 <<a href="#view-element"><em>View</em></a> /> 52 </<em>ViewGroup</em>> 53 <<a href="#include-element">include</a> layout="@layout/<i>layout_resource</i>"/> 54</<em>ViewGroup</em>> 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><ViewGroup></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><View></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><requestFocus></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><include></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><include></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><include></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><merge></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><merge></code> element. This is particularly useful when you plan to include this layout 186in another layout file using <a href="#include-element"><code><include></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 <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<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<?xml version="1.0" encoding="utf-8"?> 249<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 <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 <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</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>