150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainpage.title=UI Overview 250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main@jd:body 350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>All user interface elements in an Android app are built using {@link android.view.View} and 650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main{@link android.view.ViewGroup} objects. A {@link android.view.View} is an object that draws 750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainsomething on the screen that the user can interact with. A {@link android.view.ViewGroup} is an 850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainobject that holds other {@link android.view.View} (and {@link android.view.ViewGroup}) objects in 950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainorder to define the layout of the interface.</p> 1050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 1150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>Android provides a collection of both {@link android.view.View} and {@link 1250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainandroid.view.ViewGroup} subclasses that offer you common input controls (such as buttons and text 1350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainfields) and various layout models (such as a linear or relative layout).</p> 1450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 1550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 1650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<h2 id="Layout">User Interface Layout</h2> 1750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 1850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>The user interface for each component of your app is defined using a hierarchy of {@link 1950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainandroid.view.View} and {@link android.view.ViewGroup} objects, as shown in figure 1. Each view group 2050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainis an invisible container that organizes child views, while the child views may be input 2150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Maincontrols or other widgets that 2250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Maindraw some part of the UI. This hierarchy tree can be as simple or complex as you need 2350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainit to be (but simplicity is best for performance).</p> 2450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 2550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<img src="{@docRoot}images/viewgroup.png" alt="" /> 2650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p class="img-caption"><strong>Figure 1.</strong> Illustration of a view hierarchy, which defines a 2750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott MainUI layout.</p> 2850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 2950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>To declare your layout, you can instantiate {@link android.view.View} objects in code and start 3050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainbuilding a tree, but the easiest and most effective way to define your layout is with an XML file. 3150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott MainXML offers a human-readable structure for the layout, similar to HTML.</p> 3250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 3350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>The name of an XML element for a view is respective to the Android class it represents. So a 3450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<code><TextView></code> element creates a {@link android.widget.TextView} widget in your UI, 3550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainand a <code><LinearLayout></code> element creates a {@link android.widget.LinearLayout} view 3650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Maingroup. </p> 3750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 3850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>For example, a simple vertical layout with a text view and a button looks like this:</p> 3950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<pre> 4050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<?xml version="1.0" encoding="utf-8"?> 4150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 4250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_width="fill_parent" 4350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_height="fill_parent" 4450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:orientation="vertical" > 4550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main <TextView android:id="@+id/text" 4650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_width="wrap_content" 4750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_height="wrap_content" 4850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:text="I am a TextView" /> 4950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main <Button android:id="@+id/button" 5050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_width="wrap_content" 5150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:layout_height="wrap_content" 5250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main android:text="I am a Button" /> 5350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main</LinearLayout> 5450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main</pre> 5550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 5650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>When you load a layout resource in your app, Android initializes each node of the layout into a 5750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainruntime object you can use to define additional behaviors, query the object state, or modify the 5850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainlayout.</p> 5950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 6050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>For a complete guide to creating a UI layout, see <a href="declaring-layout.html">XML 6150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott MainLayouts</a>. 6250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 6350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 6450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<h2 id="UIComponents">User Interface Components</h2> 6550e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 6650e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main<p>You don't have to build all of your UI using {@link android.view.View} and {@link 6750e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainandroid.view.ViewGroup} objects. Android provides several app components that offer 6850e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Maina standard UI layout for which you simply need to define the content. These UI components each 6950e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainhave a unique set of APIs that are described in their respective documents, such as <a 7050e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainhref="{@docRoot}guide/topics/ui/actionbar.html">Action Bar</a>, <a 7150e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainhref="{@docRoot}guide/topics/ui/dialogs.html">Dialogs</a>, and <a 7250e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Mainhref="{@docRoot}guide/topics/ui/notifiers/notifications.html">Status Notifications</a>.</p> 7350e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 7450e990c64fa23ce94efa76b9e72df7f8ec3cee6aScott Main 75