Android SDK Getting Started Guide｜｜Chapter 5 User Interface Design

Chapter 5 User Interface Design

In this tutorial we will add a layout scheme to the application project, in which XML and the Eclipse ADT interface will be a powerful assistant in the work - but some Java development knowledge will be used in the next two sections. XML and Java are everywhere in the development work of the Android platform. If you still lack a basic understanding of the two, please find a way to make up for it as soon as possible. For readers who are just getting started, the key points introduced in this article will become an important foundation for your future development work.

1. XML Basics

Before we start discussing layout, let's first sort out the basics of XML as a markup language. If you are already familiar with XML, you can skip this section directly. XML is a language used to save data values. XML files come into play in multiple areas. Their function is very similar to that of databases in some projects, and they are often used as the output mechanism of web pages. If you have used HTML before, you should be familiar with the basic functions of XML.

In XML, data values ​​are stored within elements. A single element usually contains a start tag and an end tag, as shown below:

<product>Onion</product> 

As you can see, the opening tag and the closing tag are almost identical, the only difference is that there is an extra "/" symbol in the closing tag. In the example above, the data value is the element content, which is the text string "Onion". The start tag can also hold other attribute information related to the data item, as shown below:

<product type="vegetable">Onion</product> 

Each attribute has a name and a value, where the value is the part enclosed in quotes. Elements can also contain other elements:

<section name="food">
<product type="vegetable">Onion</product>
<product type="fruit">Banana</product>
</section>

In this structure, we call the section element the main element and the products element the child element. There is a "brother relationship" between the two sub-elements. In an XML document, there must be a root element as the main element, also known as "nesting". This forms a tree structure, in which subelements serve as branches extending from autonomous elements. If a child element contains other child elements, it also has the main element attribute.

You will also encounter another type of self-closing element, in which the opening and closing tags do not exist independently:

<order number="12345" customerID="a4d45s"/> 

The "/" symbol at the end of the element represents the end.

All resource files we use on the Android platform use XML tags, including layout files, drawable elements, data values, and Manifests.

2. Android layout

first step

When you use XML in the Eclipse IDE with ADT installed, relevant background prompts displayed during the input process can make the coding process easier. Open the main layout file in the new application in the editor and make sure the XML editing tag is selected so that we can edit the code directly. The first thing we have to deal with is the layout scheme for the home screen, which is the first thing the user sees after launching the app. Eclipse will provide a set of basic layouts for us to make personalized modifications:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

As you can see, the root element is a layout element, in the above example RelativeLayout. Android also provides several other layout types, and we can nest one layout into another. The root layout element here has several additional properties that are closely related to layout effects, such as width, height, margins, etc. TextView among layout elements allows developers to display a text string. TextView is a type of View. View is a visible and interactive element that forms our application UI. Therefore, each split-screen solution in the application must choose a View and include one or more layout mechanisms. In the Android system, these layouts are called ViewGroup objects, and each ViewGroup contains one or more sets of Views.

second step

In order to focus on creating the basics of a layout, we're going to delete all the existing content in the main layout file so we can start from scratch. As we mentioned before, you can create your own layouts or views using Java code, but various tools on Android allow developers to design their own application UI using XML - so you can directly observe the design while creating elements It worked. In some instances, you may have seen the practice of creating some or all UI simply through Java code, but in reality, most of the creation work is still done in XML. This approach also ensures that application logic and display elements are independent of each other.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- views go here -->

</LinearLayout>

LinearLayout will display the View we intend to use horizontally or vertically. In the above example, the display direction is vertical, so each View will be arranged along the bottom of the screen. If a horizontal layout is adopted, each View will be arranged from left to right. If you use the "layout width" and "layout height" attributes (in Android, they are often called layout parameters), then the layout will be stretched to the maximum horizontal and vertical lengths.

Add a new line after the "layout height" declaration line and prepare to start typing attributes by typing "android:". When you enter the corresponding content, Eclipse will provide a list related to the attribute. You can continue to enter content to narrow the attribute list, or you can click directly in the list with the mouse. Now we select the "android:gravity" attribute.

Type "center_horizontal" as the gravity value so that the contained elements are centered on the X-axis:

android:gravity="center_horizontal"

This method applies to all elements in the layout. We can add several other additional display properties, such as padding, margins, and background. But in today’s article, we’ll start with the simplest project.

3. Add View

first step

Front We start adding Views to the layout. The so-called View refers to the visible elements in the UI. Let's start by adding some text content and a button. Enter the LinearLayout element (between the opening and closing tags), enter "<" and Eclipse will prompt you for a list of available elements related to the attribute.

Select TextView in the list. Please note that, like most Views, this is a self-closing element. Set two properties for TextView, namely layout width and layout height (type 'android:' and select the corresponding prompt):

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Through "wrap_content", we can ensure that the width of the View is enough to accommodate its displayed content - this avoids displaying elements in a padding manner like layout. Now add another property to the TextView, this time enumerating the text string to implement the display function:

android:text="Hello there"

After saving the file, you will see Eclipse display a warning message. If you hover your mouse over a message, the text will be displayed in the editor's borders - this content will also be displayed in the Problem view. The warning reads "Hardcoded string...should use @string resource." The recommended approach is to save each text string value as a value resource instead of Include it directly in the layout XML. Although this approach is troublesome and meaningless in the initial stage, once good habits are developed, everyone will gradually discover its value in large-scale projects in future work. Find the "res/values/strings.xml" file through Package Explorer and open it, switch to the "strings.xml" tag and edit the code.

As you can see, Eclipse has added several strings. To add another, just give it a name and value:

<string name="hello">Hello there</string>

This means that if you need to use the same string more than once in your application UI and need to modify it later, you only need to make the change in one place. Save the strings file and switch to the layout file. Reference the "text" property of TextView to the corresponding string in the value file:

android:text="@string/hello"

We tell the Android tool where to look for string resources by prepending "@string" to the string name. This way, the warning message will no longer appear. Eclipse usually issues these reminders during our coding process to notify us of current errors or warning issues. You can choose to follow or ignore the content of the warning message, but errors must be corrected, otherwise the application will not work properly.

second step

Add a Button after the TextView:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/click" />

In our example, Button uses the same properties as TextView. In other cases, however, it may use more properties, and generally different views require different properties. Displayed on the button is the "text" attribute value. Add this string to our "res/values/strings.xml" file as before:

<string name="click">Click Me!</string>

In the next tutorial, we will deal with button click effects. Switch to the layout file and look at the Outline view on the right side of the editor - it shows another set of interfaces pointing to the file elements. Double-click on a listed item to jump to the corresponding code location. You can also expand or collapse the main element. This approach becomes very useful as layouts become more complex.

Tip: To organize all files opened in Eclipse editing, we only need to press "Ctrl+A" to select them all, and then press "Ctrl+I". 

4. Graphical Layout

first step

Make sure our layout file has been saved correctly, then switch to the Graphical Layout tab.

You can see that the layout you designed can be viewed directly. The Palette area on the left side of the interface allows us to select UI components and drag them into the layout. But we should first use XML until we have a preliminary idea of ​​the basic framework. XML can help us control the detailed design, so even when using graphical tools, we may need to edit the XML results.

Above the Graphical Layout view is a set of drop-down lists from which we can select the type of device used to view the layout effect. It also provides tools for switching the display direction and scaling effects. Everyone needs to constantly use Graphical Layout to control the effect during the design layout process. In addition, here are some other layout elements and settings worth trying.

second step

You may have noticed that in this layout design, the display position of visible elements is relatively close to the upper edge of the screen. Let's solve this problem. Switch to the XML editing tag and add margin attributes to LinearLayout:

android:layout_margin="10dp"

We use "dp" to set the individual density of pixels so that the design automatically matches the pixel density to the user's device. Save the file and switch to Graphical Layout to see it in action.

When we are doing layout design, Graphical Layout is a very practical reference tool, but it can only serve as a guide. To understand how our layout is displayed when the application is running and what functions it can achieve, you need to load it into a virtual or physical device for actual testing. We will discuss this topic further in a subsequent article.

5. Options

You can include various layout types and views in your application screen, but the basic processing methods are the same. We used LinearLayout earlier, but there are many other options to choose from, the more common of which are RelativeLayout, FrameLayout, AbsoluteLayout and GridLayout. You can find these types in the LinearLayout Palette. It is recommended that you relax, select any one in your View and observe the display effect. When adding elements from the Graphical Layout tool, be sure to switch to XML to see what markup code will be generated as the new elements are added.

The Android platform provides View solutions for a variety of common needs, such as radio buttons, check boxes, and text input areas. These solutions can greatly save the number of functions we need to perform manually; but if you need to use non-built-in UI elements, you need to create a custom View class. Generally speaking, it is best to do this when there is no other choice. After all, standardized UI elements perform more reliably on user devices and can also save development and testing time.

Summarize

In today's tutorial, we discussed the basic design process of user interface layout on the Android platform, but did not dig in depth. In the next part of this series, we will try to add user interaction elements to the application, detecting and responding to button clicks. Next, we will focus on the Java-related concepts most closely related to Android development, and further explore the elements and practices involved in the application development process.