- Home Startseite ホーム 主页 首頁
- SDK
- Dev Guide Handbuch Guía Guide Guida 開発ガイド 开发人员指南 開發指南
- Reference Referenz Referencia Référence Riferimento リファレンス 参考 參考資料
- Resources
- Videos ビデオ
- Blog ブログ 博客 網誌

Android.com

Views and Layout >

# Declaring a UI in XML

You can create your application's user interface in two ways:

- You can declare UI elements statically, in XML. Android provides a straightforward XML vocabulary that corresponds to the View classes and subclasses, such as those for widgets and layouts.
- You can instantiate screen elements dynamically, at runtime, through code in your application. Your application can refer to or create View or other class objects and manipulate their properties programmatically.

One advantage of declaring your UI in XML is that it enables you to better separate the presentation of your application from the code that controls it's behavior. Your UI description is external to your application code, which means that you can modify or adapt it without having to modify your source code and recompile. For example, you can create XML layouts for different screen orientations and for a variety of device screen sizes or languages. Additionally, declaring in XML makes it easier to see the elements and structure of your UI, so it's easier to debug problems.

The Android framework gives you the flexibility to use either or both of these ways of declaring and managing your application's UI. For example, you could declare your application's default layouts in XML, including the screen elements that will appear in them and their properties. You could then add code in your application that would modify the state of the screen objects, including those declared in XML, at run time.

You build your application's UI in approximately the same way, whether you are declaring it in XML or programmatically. In both cases, your UI will be a tree structure that may include multiple View or Viewgroup subclasses.

In general, the XML vocabulary for declaring UI elements closely follows the structure and naming of the framework's UI-related classes and methods, where element names correspond to class names and attribute names correspond to methods. In fact, the correspondence is often so direct that you can guess what XML attribute corresponds to a class method, or guess what class corresponds to a given xml element.

However, note that the XML vocabulary for defining UI is not entirely identical to the framework's classes and methods. In some cases, there are slight naming differences. For example, the EditText element has a `text` attribute that corresponds to EditText.setText.

For your convenience, the API reference documentation for UI related classes lists the available XML attributes that correspond to the class methods, including inherited attributes.

To learn more about the available XML elements and attributes, as well as the format of the XML file, see Layout Resources.

Using Android's XML vocabulary, you can quickly design UI layouts and the screen elements they contain, in the same way you create HTML files — as a series of nested tags.

Each layout file must contain exactly one root element, and the root element must be a View or ViewGroup object. Once you've defined the root element, you can add additional layout objects or controls as child elements of the root element, if needed. In the example below, the tree of XML elements evaluates to the outermost LinearLayout object.

After you've declared your layout in XML, you must save the file, with the `.xml` extension, in the proper location, so that it will be compiled correctly. The proper location for storing layout files is in your application's `res/layout/` directory.

When you compile your application, each XML layout file is compiled into an android.view.View resource. You can then load the layout resource from your application code, by calling `setContentView(R.layout.layout_file_name)` in your `Activity.onCreate()` implementation.

When you load a layout resource, the Android system initializes run-time objects corresponding to the elements in your layout. It parses the elements of your layout in-order (depth-first), instantiating the Views and adding them to their parent(s).

Attributes named `layout_something` apply to that object's LayoutParams member. Layout Resources also describes how to learn the syntax for specifying LayoutParams properties.

Also note that Android draws elements in the order in which they appear in the XML. Therefore, if elements overlap, the last one in the XML file will probably be drawn on top of any previously listed elements in that same space.

The following values are supported for dimensions (described in `TypedValue`):

- px (pixels)
- dip (device independent pixels)
- sp (scaled pixels — best for text size)
- pt (points)
- in (inches)
- mm (millimeters)

Example: `android:layout_width="25px"`

For more information about these dimensions, see Dimension Values.

The example below shows an XML file and the resulting screen in the UI. Note that the text on the top of the screen was set by calling `Activity.setTitle`. Note that the attributes that refer to relative elements (i.e., layout_toLeft) refer to the ID using the syntax of a relative resource (@id/id_number).

    <?xml version="1.0" encoding="utf-8"?>
    <!-- Demonstrates using a relative layout to create a form -->
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/blue"
                    android:padding="10px">

        <TextView id="@+id/label"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:text="Type here:"/>

        <EditText id="@+id/entry"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:background="@android:drawable/editbox_background"
                  android:layout_below="@id/label"/>

        <Button id="@+id/ok"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/entry"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="10px"
                android:text="OK" />

        <Button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toLeftOf="@id/ok"
                android:layout_alignTop="@id/ok"
                android:text="Cancel" />
    </RelativeLayout>

### Loading the XML Resource

Loading the compiled layout resource is very easy, and done with a single call in the activity's onCreate() method, as shown here:

    protected void onCreate(Bundle savedValues)
    {
       // Be sure to call the super class.
       super.onCreate(savedValues);

       // Load the compiled layout resource into the window's
       // default ViewGroup.
       // The source file is res/layout/hello_activity.xml
        setContentView(R.layout.hello_activity);

       // Retrieve any important stored values.
       restoreValues(savedValues);
    }

↑ Go to top

← Back to Views and Layout