1page.title=UI Overview
2@jd:body
3
4
5<p>All user interface elements in an Android app are built using {@link android.view.View} and
6{@link android.view.ViewGroup} objects. A {@link android.view.View} is an object that draws
7something on the screen that the user can interact with. A {@link android.view.ViewGroup} is an
8object that holds other {@link android.view.View} (and {@link android.view.ViewGroup}) objects in
9order to define the layout of the interface.</p>
10
11<p>Android provides a collection of both {@link android.view.View} and {@link
12android.view.ViewGroup} subclasses that offer you common input controls (such as buttons and text
13fields) and various layout models (such as a linear or relative layout).</p>
14
15
16<h2 id="Layout">User Interface Layout</h2>
17
18<p>The user interface for each component of your app is defined using a hierarchy of {@link
19android.view.View} and {@link android.view.ViewGroup} objects, as shown in figure 1. Each view group
20is an invisible container that organizes child views, while the child views may be input
21controls or other widgets that
22draw some part of the UI. This hierarchy tree can be as simple or complex as you need
23it to be (but simplicity is best for performance).</p>
24
25<img src="{@docRoot}images/viewgroup.png" alt="" />
26<p class="img-caption"><strong>Figure 1.</strong> Illustration of a view hierarchy, which defines a
27UI layout.</p>
28
29<p>To declare your layout, you can instantiate {@link android.view.View} objects in code and start
30building a tree, but the easiest and most effective way to define your layout is with an XML file.
31XML offers a human-readable structure for the layout, similar to HTML.</p>
32
33<p>The name of an XML element for a view is respective to the Android class it represents. So a
34<code>&lt;TextView&gt;</code> element creates a {@link android.widget.TextView} widget in your UI,
35and a <code>&lt;LinearLayout&gt;</code> element creates a {@link android.widget.LinearLayout} view
36group. </p>
37
38<p>For example, a simple vertical layout with a text view and a button looks like this:</p>
39<pre>
40&lt;?xml version="1.0" encoding="utf-8"?>
41&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
42              android:layout_width="fill_parent"
43              android:layout_height="fill_parent"
44              android:orientation="vertical" >
45    &lt;TextView android:id="@+id/text"
46              android:layout_width="wrap_content"
47              android:layout_height="wrap_content"
48              android:text="I am a TextView" />
49    &lt;Button android:id="@+id/button"
50            android:layout_width="wrap_content"
51            android:layout_height="wrap_content"
52            android:text="I am a Button" />
53&lt;/LinearLayout>
54</pre>
55
56<p>When you load a layout resource in your app, Android initializes each node of the layout into a
57runtime object you can use to define additional behaviors, query the object state, or modify the
58layout.</p>
59
60<p>For a complete guide to creating a UI layout, see <a href="declaring-layout.html">XML
61Layouts</a>.
62
63
64<h2 id="UIComponents">User Interface Components</h2>
65
66<p>You don't have to build all of your UI using {@link android.view.View} and {@link
67android.view.ViewGroup} objects. Android provides several app components that offer
68a standard UI layout for which you simply need to define the content. These UI components each
69have a unique set of APIs that are described in their respective documents, such as <a
70href="{@docRoot}training/appbar/index.html">Adding the App Bar</a>, <a
71href="{@docRoot}guide/topics/ui/dialogs.html">Dialogs</a>, and <a
72href="{@docRoot}guide/topics/ui/notifiers/notifications.html">Status Notifications</a>.</p>
73
74
75