1 page.title=Layout Tricks: Creating Reusable UI Components 2 @jd:body 3 4 <p>The Android platform offers a wide variety of UI <em>widgets</em>, small 5 visual construction blocks that you can glue together to present users with 6 complex and useful interfaces. However applications often need higher-level 7 visual <em>components</em>. To meet that need, and to do so efficiently, you can 8 combine multiple standard widgets into a single, reusable component. </p> 9 10 <p>For example, you could create a reusable component that contains a progress 11 bar and a cancel button, a panel containing two buttons (positive and negative 12 actions), a panel with an icon, a title and a description, and so on. You can 13 create UI components easily by writing a custom <code>View</code>, but you can 14 do it even more easily using only XML.</p> 15 16 <p>In Android XML layout files, each tag is mapped to an actual class instance 17 (the class is always a subclass of {@link android.view.View} The UI toolkit lets 18 you also use three special tags that are not mapped to a <code>View</code> 19 instance: <code><requestFocus /></code>, <code><merge /></code> and 20 <code><include /></code>. This article shows how to use <code><include 21 /></code> to create pure XML visual components. For information about how to 22 use <code><merge /></code>, which can be particularly powerful when 23 combined with <code><include /></code>see the <a 24 href="{@docRoot}resources/articles/layout-tricks-merge.html">Merging Layouts</a> 25 article. </p> 26 27 <p>The <code><include /></code> element does exactly what its name 28 suggests; it includes another XML layout. Using this tag is straightforward as 29 shown in the following example, taken straight from <a 30 href="http://android.git.kernel.org/?p=platform/packages/apps/Launcher.git;a= 31 tree;h=refs/heads/master;hb=master">the source code of the Home application</a> 32 that ships with Android:</p> 33 34 <pre class="prettyprint"><com.android.launcher.Workspace 35 android:id="@+id/workspace" 36 android:layout_width="fill_parent" 37 android:layout_height="fill_parent" 38 39 launcher:defaultScreen="1"> 40 41 <include android:id="@+id/cell1" layout="@layout/workspace_screen" /> 42 <include android:id="@+id/cell2" layout="@layout/workspace_screen" /> 43 <include android:id="@+id/cell3" layout="@layout/workspace_screen" /> 44 45 </com.android.launcher.Workspace></pre> 46 47 <p>In the <code><include /></code> only the <code>layout</code> attribute 48 is required. This attribute, without the <code>android</code> namespace prefix, 49 is a reference to the layout file you wish to include. In this example, the same 50 layout is included three times in a row. This tag also lets you override a few 51 attributes of the included layout. The above example shows that you can use 52 <code>android:id</code> to specify the id of the root view of the included 53 layout; it will also override the id of the included layout if one is defined. 54 Similarly, you can override all the layout parameters. This means that any 55 <code>android:layout_*</code> attribute can be used with the <code><include 56 /></code> tag. Here is an example:</p> 57 58 <pre class="prettyprint"><include android:layout_width="fill_parent" layout="@layout/image_holder" /> 59 <include android:layout_width="256dip" layout="@layout/image_holder" /> 60 </pre> 61 62 <p>This tag is particularly useful when you need to customize only part of your 63 UI depending on the device's configuration. For instance, the main layout of 64 your activity can be placed in the <code>layout/</code> directory and can 65 include another layout which exists in two flavors, in <code>layout-land/</code> 66 and <code>layout-port/</code>. This allows you to share most of the UI in 67 portrait and landscape.</p>
