The GUI 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 container that defines how the child views are laid out, such as in a grid or a vertical list.

Create a Linear Layout:

Open the fragment_main.xml (activity_main.xml ) from the res/layout/ directory.(Click activity_main.xml tab at the bottom of the screen to open the XML Editor

BlackActivity template we choose when we created this project includes the fragment_main.xml file with a RelativeLayout root view and a TextView child view

First, delete the <TextView> element and change the <RelativeLayout> element to <LinearLayout>. Then add the android:orientation attribute and set to “horizontal”. Then result look like this :

Linear Layout is a viewgroup (a subclass of ViewGroup ) that lays out child views in either a vertical or horizontal orientation ,as specified by the android: orientation attribute .Each child of a LinearLAyout on the screen in the order in which it appears in the XML

The other two attributes android:layout_width and android: layout_height, are required for all views to specify size. 

Add a Text Field:

To create a usereditable text-field add an <EditText> element inside the <Linear Layout>

Like every View object, we must define certain XML attributes to specify the EditText object’s properties

We declare it inside the <LinearLayout>

<EditText android:id="@+id/edit_message" 

        android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 

        android:hint="@string/edit_message" />

Attributes descriptions:

Android: id   This provide a unique identifier for the view, which we can use to reference the object from our app code, such as to read and manipulate the object

The at Sign (@) is required when we are referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, and then the resource name (edit_message).

The  “+” sign before the resource type is needed only when we are defining the ResourceID for the first time. Once the resource ID is declared this way, other references to the ID do not need the plus sign. Also, Plus sign is not needed for concrete resources such as strings or layouts

Android: layout_length and android:layout_height - Instead of using specific sizes for the width and height, the “wrap_content” value specifies that the view should be only as big as needed to fit the content

Android:hint  - this is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the “@string/edit_message” value refers to a string resource defined in a separate file

Add String Resource:

When we need to add text in the user Interface, we should always specify each string as a resource .String resource allow us to manage all UI text in a single location which make it easier to find and update. Externalizing the string also allows you to localize your app to different languages by providing alternative definitions for each string resource.

By default, your Android project includes a string resource file at res/values/strings.xml. Add a new string named "edit_message" and set the value to "Enter a message." (You can delete the "hello_world" string.)

While you’re in this file, also add a "Send" string for the button you’ll soon add, called "button_send".

The result for strings.xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <stringname="app_name">My First App</string>
    <stringname="edit_message">Enter a message</string>
    <stringname="button_send">Send</string>
    <stringname="action_settings">Settings</string>
    <stringname="title_activity_main">MainActivity</string>
</resources>

Add a Button:

Now add a <Button> to the layout, immediately following the <EditText> element:

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

The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. This button doesn't need the android:id attribute, because it won't be referenced from the activity code 

Make the Input Box Fill in the Screen Width:

The layout is currently designed so that both the EditText and Button widgets are only as big as necessary to fit their content, as shown in figure.

This works fine for the button, but not as well for the text field, because the user might type something longer. So, it would be nice to fill the unused screen width with the text field. You can do this inside a LinearLayout with the weight property, which you can specify using the android:layout_weight attribute.

In order to improve the layout efficiency when you specify the weight, you should change the width of the EditText to be zero (0dp).

Final Code Snippet for our GUI :

This layout is applied by the default Activity class that the SDK tools generated when we created the project.

Now, In Eclipse, click Run and see the Result :

 This article is referred from : Building a Simple User Interface