3) 10 minutes Learn android--Build your first app and create a simple user interface

In this section, we will learn how to create an interface with text input boxes and buttons in XML. The next lesson will learn to make the APP respond to buttons--when the button is pressed, the contents of the text box are sent to another Activity.

Android's graphical user interface is built from multiple views (view) and view groups (ViewGroup). View is a common UI form widget, such as button, Text field, and ViewGroup is an invisible container used to define the layout of a child view, such as a grid part (GRID), vertical list part (vertical list).

Android provides a series of XML tags that correspond to the View and ViewGroup subclasses so that we can create our own UI with XML.

Layouts is a subclass of ViewGroup. We'll practice how to use linearlayout in the next tutorial.

Figure 1 about how the ViewGroup object organizes the layout branches and contains other View objects.

Optional Layout file

There are a number of reasons why we chose to define the interface layout in XML instead of dynamically generating the layout at run time. The most important of these is--this allows you to create different layout files for different sizes of screens. For example, you can create a two-version layout file that tells the system to use one of the layout files on a small screen and another layout file on a large screen. See compatible with different devices.

Create a LinearLayout

1. In Android Studio, open the res/layout file from the directory content_my.xml .

   The blankactivity generated when a new project was created in the previous section contains a content_my.xml file that is a relativelayout that contains TextView.

2. On the preview Panel, click Close the Preview panel on the right.

   When you open a layout file in Android Studio, you see a Preview panel. Click the tab in this Panel to see the graphical effect on the Design panel using WYSIWYG (what you see is what you get) tool. But in this section, we'll learn how to modify the XML file directly.

3. Delete the [<textview>] label.

4. change [<relativelayout>] label to [<linearlayout>].

5. Add the Android:orientation property for [<linearlayout>] and set the value to "horizontal" .

6. Remove android:padding attributes and tools:context attributes.

The result of the modification is as follows:

Res/layout/content_my.xml

<linearlayout xmlns:android=< Span class= "Hljs-value" > "http://schemas.android.com/apk/res/android" xmlns:app=< Span class= "Hljs-value" > "Http://schemas.android.com/apk/res-auto" xmlns:tools= "Http://schemas.android.com/tools" android:orientation= "horizontal" android:layout_width= " Match_parent "android:layout_height=" match_parent "app:layout_behavior= "@string/appbar_scrolling_view_behavior" Span class= "Hljs-attribute" >tools:showin= "@layout/activity_my";   

LinearLayout is a subclass of ViewGroup that is used to place a horizontal or vertical sub-view part, where the placement direction is determined by the property android:orientation. The sub-layouts in the linearlayout are displayed on the screen in the order defined in the XML.

All views use both the Android:layout_width and Android:layout_height properties to set their own size.

Because LinearLayout is the root layout of the entire view, "match_parent" you can fill the entire screen by specifying the width and Height properties to make it wider and taller. This value indicates that the child View expands its width and height to match the width and height of the parent control.

For more information about layout properties, see the Layout wizard.

Add a text input box

As with other View, we need to define some attributes in the XML to specify EditText property values. The following are some of the attribute elements that should be specified in a linear layout:

1. content_my.xmldefine a [<edittext>] label within the [<linearlayout>] tag of the file and set the id property to @+id/edit_message .

2. Settings layout_width and layout_height properties are wrap_content .

3. Sets the hint property to a edit_message string named.

The code is as follows:

Res/layout/content_my.xml

<EditText android:id="@+id/edit_message"    android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />

Description of each property:

Android:id

This is the unique identifier for the view. You can refer to an object through that identifier in your program code. For example, read and modify this object (it will be used in the next lesson).

When you need to reference a resource object from XML, you must use a @ symbol. Followed @ by the type of resource (here id ), then the name of the resource (used here edit_message ).

+Number is required only when defining a resource ID for the first time. It is telling sdk--that this resource ID needs to be created. After the application has been compiled, the SDK can use this ID directly. Edit_message is to create a new identifier in the project file, which is gen/R.java associated with the EditText. Once the resource ID is created, other resources will no longer need a number if the ID is referenced + .

Android:layout_width and Android:layout_height

Specifying a specific size for width and height is not recommended and should be used "wrap_content" . Because this ensures that the view occupies only the space of the content size. If you use it, the EditText will be filled with the "match_parent" entire screen, because it will fit the size of the parent layout. See Layout Wizard.

Android:hint

When the text box is empty, the string is displayed by default. The resource referenced for the value of the string "@string/edit_message" should be defined in a separate file instead of using the string directly. Because the value used is a resource that exists, no use number is required + . Of course, since you haven't defined a string yet, there @string/edit_message will be a compile error when you add it. In the next section of the tutorial you'll learn how to define string resources, and then you won't get an error.

Resource Object

A resource object is a unique integer associated with an APP resource (such as a bitmap, layout file, String).

In the project file gen/R.java , each resource has a resource object corresponding to it. You can use R an object name in a class to refer to a resource (for example, a string that is required to specify the Android:hint property). You can also create a resource ID for a view at any time by using the Android:id property to reference the view in your code.

Each time the APP is compiled, the SDK tools generate R.java files. So, please never modify this file.

See resource provisioning.

Note : The string resource uses the same name () as the ID edit_message . However, references to resources are type-sensitive (such as id and 字符串 ), so using the same name does not cause a conflict.

Add string resource

By default, your Android project contains a string resource file, that is res/values/string.xml . Open this file to "edit_message" add a definition with a value of "Enter a message".

1. In Android Studio, edit res/values the file under strings.xml .

2. Add a string named "edit_message" "Enter a Message".

3. Add a "button_send" string named "Send".

   This string will be used to create the button in the next section.

The following is the modified res/values/strings.xml :

<?xml version= "1.0" encoding= "Utf-8"?><Resources><StringName= "app_name" >my first App</string > <string name=" Edit_message ">enter a message</string> Span class= "Hljs-tag" ><string name=  "button_send" >send</string> Span class= "Hljs-tag" ><string name=  "action_settings" >settings</ String></RESOURCES>      

When you define a text in the user interface, you should include each text string in the resource file. The advantage of this is that for all string values, the string resource can be individually modified, and in the resource file you can easily find and make the appropriate changes. By choosing to define each string, you also allow you to localize your APP in different languages.

For more information on the localization of this string resource in different languages, please refer to the compatibility of different devices.

Add a button

1. In Android Studio, edit res/layout the file under content_my.xml .

2. Define a [<button>] label after the [<edittext>] label inside [<linearlayout>].

3. Set the width and height property values of the buttons "wrap_content" so that the size of the buttons will display the text in full.

4. Define the text of the button using the Android:text property, set the value to a string resource that is similar to the one defined in the previous section button_send .

At this point [<linearlayout>] It should look like this:

Res/layout/content_my.xml

<LinearLayoutXmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"xmlns:tools="Http://schemas.android.com/tools"android:orientation="Horizontal"Android:layout_width="Match_parent"android:layout_height="Match_parent"App:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showin="@layout/activity_my" ><edittext android:id= "@+id/edit_message" android:layout_width= " Wrap_content "android:layout_height=" wrap_content "android:hint= "@string/edit_message"/> <button android:layout_width=< Span class= "Hljs-value" > "wrap_content" android:layout_height=  "wrap_content" android:text= "@ String/button_send "/></LINEARLAYOUT>    

Note : The width and height are set to the size at which "wrap_content" the button occupies the size of the text in the button. This button does not need to specify the properties of the Android:id, as the button is not referenced in the Activity code.

The current EditText and Button widgets only fit the size of their respective content, as shown in 2:

Figure 2 The EditText and Button form widgets "wrap_content" are used as values for the Width property.

This is appropriate for the button, but not good for text boxes, because users may enter longer text content. So it's better to be able to fill the entire screen width. LinearLayout uses the weight attribute to reach this goal, that is, the Android:layout_weight property.

The weight value refers to the amount of space that is occupied by each part, which is related to the amount of space the sibling part occupies. This is similar to the ingredient formula for the drink: "Two vodka, one coffee liqueur", that is, the vodka in the wine accounts for Two-thirds. For example, we define a view with a weight of 2 and another view with a weight of 1, then the total is 3, then the first view occupies 2/3 of the space and the second occupies 1/3 of the space. If you add a third view and the weight is set to 1, then the first view (with a weight of 2) occupies 1/2 of the space, and the remaining two view accounts for 1/4. (Note that the premise of the use of weights is generally set to 0DP for the width or height of the view, then the system calculates the space that the view should occupy according to the weight rules above.) In many cases, however, if you set the Match_parent attribute to View, then the weight is not normally proportional, but inversely. In other words, the weight value is larger but occupy small space).

The default weight for all view is 0, and if only one view is set to a weight greater than 0, the view will occupy all the remaining space to remove the space occupied by the other view itself. The weight of the EditText is therefore set to 1 so that it can occupy all the space except for the button.

Fills the input box with the width of the entire screen

To allow the EditText to fill the remaining space, do the following:

1. In the content_my.xml file, set the [<edittext>] layout_weight property value to 1 .

2. Set the value of [<edittext>] layout_width to 0dp .

Res/layout/content_my.xml

<EditText    android:layout_weight="1"    android:layout_width="0dp" ... />

In order to improve the efficiency of the layout, when setting weights, the width of the EditText should be set to 0DP. If the width is set "wrap_content" , the system needs to calculate the width of the part, and the EditText will occupy the remaining space because the weight is set, so the result is that the width of the EditText is a non-functional property.

Effect 3 after setting the EditText weight:

Figure 3 because the EditText form widget is set to all weights, it occupies the remaining space of LinearLayout.

Now look at the full layout file contents:

Res/layout/content_my.xml

<?xml version= "1.0" encoding= "Utf-8"?><LinearLayoutXmlns:android="Http://schemas.android.com/apk/res/android"xmlns:app="Http://schemas.android.com/apk/res-auto"xmlns:tools="Http://schemas.android.com/tools"android:orientation="Horizontal"Android:layout_width="Match_parent"android:layout_height="Match_parent"App:layout_behavior="@string/appbar_scrolling_view_behavior"tools:showin="@layout/activity_my" ><EditTextandroid:id= "@+id/edit_message" android:layout_weight="1" android:layout_width="0DP " android:layout_height= "wrap_content" android:hint="@string/edit_message"/> <button android:layout_width= "wrap_content" android:layout_height="wrap_content" android:text= "@string/button_send"/></linearlayout>         

Run the App

The entire layout is applied by default to the Activity that the SDK tool generates automatically when the project is created, running to see the effect:

• In Android Studio, click the Run button in the toolbar.

• Or, using the command line, go to your project's root directory to execute directly:

  $ ant debugadb install -r app/build/outputs/apk/app-debug.apk

The next section will learn about how to make a button, read the contents of the text, start another Activity, and so on.

3) 10 minutes Learn android--Build your first app and create a simple user interface