Android builds display components out of views. The views are built from XML files that tell android how to build the display. These layouts are stored in res/layout/. Open the res/layout/main.xml layout file. The Eclipse SDK includes a visual layout tool that should have come up. Similar to the strings.xml file edited earlier there is another tab at the bottom of the pane to display the raw XML file, but we're going to explore the visual editor first. Remember the visual editor is no substitute to checking how the display looks in the emulator and on a physical device.
First change the orientation to portrait with the config dropdown at the top of the pane. Click on the button to the left side and drag it into the view below the string. Notice the bottom pane changed over to the properties tag and now shows the properties for the button. Find the field "text" it should currently have a value of @id/Button01. Change the value to @string/button_dialog_text. Using stored strings and not hard coding values in layouts will be important if you ever try to localize your application to different regions and languages.
Now add a second button and change the text value to @string/button_sound_text. Next click over to the main.xml tab at the bottom and lets explore the XML. As with other XML files this one opens with the standard XML tag.
Next the LinearLayout tag opens to declare the layout style. The LinearLayout is a simple layout where each View component is placed directly after the previous element. The first element inside the linear layout is our hello object that was created with the project. Next are the two buttons we created.
Now lets add the show relative layout button manually. Usually you want to give your buttons and other objects descriptive ID tags, but for simplicity just give this button the ID of Button03. Copy and paste Button02 and change the android:id value to "@+id/Button03" and the android:text value to "@string/button_relative_text". Then click back to the layout tab and the new button should be shown.
Next we need to create the relative layout.
The RelativeLayout is another simple Android layout. RelativeLayouts allows you to position objects relative to other objects on the page. Right click on res/layouts/ and select New > Android XML file. In the dialog box enter relative.xml for the File. The type of resource is layout and at the bottom select RelativeLayout for the root element. Click finish to create and open the file. Again change the config to portrait for consistency. The RelativeView is going to display a number of different components that can be placed in a view.
First add an EditText by finding it under views to the left and dragging it into the layout. Next click the relative.xml tab at the bottom of the pane. From here out we're going to adjust this layout by hand. Notice that the root tag for this is RelativeLayout compared to the LinearLayout of the main.xml file. Relative layouts allow you to locate elements relative to previously declared elements in the layout with simple keywords.
Change the android:layout_width value for the EditText from wrap_content to fill_parent. This will expand the text box to fill the screen. Now add a button to the layout by creating a new Button tag below the EditText.
<Button android:id="@+id/button_update" android:text="@string/button_update_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/EditText01" android:layout_alignParentRight="true" />
The Button tag simply creates a button. We assigned the ID button_update and the text value button_update_text from res/values/strings.xml. The android:layout_width and layout_height fields are required for the element to be displayed. They can be set to either wrap_content or fill_parent. To position the element in the view the android:layout_below and android:layout_alignParentRight are used. This sets the button to be below the EditText01 element with the android:layout_below attribute. The android:layout_alignParentRight boolean being set to true right aligns the element to the right edge of the parent element.
Next lets add a Spinner element to the layout. This element is similar to a dropdown on a webpage. They are best used to display a list. This tutorial isn't going to elaborate on usage of the spinner, just display one.
<Spinner android:id="@+id/spinner_names" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/button_update" />
Spinner elements are declared with the Spinner tag. Give the spinner an id of @+id/spinner_names. Notice that for the android:layout_width we expanded it out to fill the window with fill_parent. Simply position the Spinner below the update button.