105-Building Android Simple User Interface
The graphical user interface for an Android app is built using a hierarchy of View and ViewGroup objects. View objects are usually UI widgets such as buttons or text fields and ViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.
Android provides an XML vocabulary that corresponds to the subclasses of View and ViewGroup so you can define your UI in XML using a hierarchy of UI elements.
Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.
In this lesson, you'll create a layout in XML that includes a text field and a button. In the following lesson, you'll respond when the button is pressed by sending the content of the text field to another activity.
(This tutorial is based on http://developer.android.com/training/basics/firstapp/building-ui.html )
1) Run ADT and open My First App project
Download MyFirstApp Project here:
2) Open MainActivity.Java
Notice that MainActivity loads two xml files; R.layout.activity_main and R.menu.activity_main
The file names are similar so be careful not to mix up between them.
3) activity_main layout file
The following is the default codes.
(You may choose to edit this file using Graphical Layout mode. However, source code editing gives you more control on the actual codes).
<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" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_world" /> </RelativeLayout> |
3.1) Change Root View to LinearLayout
notice that we are setting it as horizontal layout, ie child objects will be arranged in horizontal flow.
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_world" /> </LinearLayout> |
As a result, the text Hello World is re-positioned to the top left of the screen. Its parameter settings become invalid as the LinearLayout has overridden them.
3.2) Update the TextView Object.
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_world" /> </LinearLayout> |
3.3) Update the string values
Notice that the string variable hello_world in the example above is defined in the string file.
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">My First App</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> </resources> |
Change the xml file as follows
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">My First App</string> <string name="hello_world">Hello world!</string> <string name="edit_message">Enter a message</string> <string name="button_send">Send</string> <string name="action_settings">Settings</string> <string name="title_activity_main">MainActivity</string> <string name="menu_settings">Settings</string> </resources> |
3.4) Update the TextView Object with new variable name
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/edit_message" /> </LinearLayout> |
Outcome.
3.5) Add a Button to the layout.
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/edit_message" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" /> </LinearLayout> |
Outcome.
3.6) Change TextView to EditText.
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <EditText android:layout_width="wrap_content" 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> |
Outcome.
3.7) Change the weight and width property of EditText object.
<LinearLayout 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:orientation="horizontal" tools:context=".MainActivity" > <EditText android:layout_weight="1" android:layout_width="0dp" android:layout_width="wrap_content" 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> |
Outcome.
