-----

1) RUN ADT

If you haven't started Eclipse, run ADT.

2) OPEN PROJECT

2.1) Open My First App Project.

3) EDIT THE (LAYOUT) VIEW

3.1) Clear existing layout.

3.2) In the Layouts section of Palette, click and drag LinearLayout (Vertical) to the top left corner of the main layout.

3.3) Find the Outline Panel.

Notice that there is a warning icon.

If you hover your mouse over the icon, the explanation message pops up.

We will add child objects into this layout.

3.4) Find the abc Text Fields object in the Palette.

3.5) Click the object and drag it into the LinearLayout item in the Outline Panel.

3.6) Outcome:

3.7) Find the button object in the Palette.

3.8) Drag it into LinearLayout and place it under editText1 object as follows:

3.9) Your view will look like below:

3.10) Save.

3.11) Switch to activity_main.xml tab.

You should see the following 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" >

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:orientation="vertical" >

<EditText

android:id="@+id/editText1"

android:layout_width="match_parent"

android:layout_height="wrap_content" >

</EditText>

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button" />

</LinearLayout>

</RelativeLayout>

Take note of the highlighted (id) texts, i.e editText1 and button1.

Later, we will use these id names to bind Java codes to the XML layout.

4) VIEW JAVA CODES

4.1) In the Package Explorer panel, find the source file MainActivity.java.

4.2) Double-click the file name.

Notice two panels.

4.2.1) Main Panel.

5) EDITING JAVA CODES

5.1) Initially, XML Layout and Java Codes are not related and thus they do not know one another. Objects in the XML Layout (e.g. editText1 and button1) must be identified first before they can be processed by Java Codes.

5.2) Let’s say we want …

the button to respond to clicks by …

popping up a message containing text entered by user in the text field.

5.3) We need the following algorithm:

(blue colour text refers to the codes in Step 5.4)

1) Bind a button object to the button layout identified by button1. (line no.13)

2) Attach an onClickListener (a method to listen for click events) method to the button. (line no.14)

3) Override the onClick (a method to respond to click events) method to the button. (line no.16)

4) Bind a text object to the text layout identified by textEdit1. (line no.17)

5) Get the input value from the text object and convert the value to a string. (line no.18)

6) Display the string value using toast object. (line no.19)

5.4) Edit the codes as follows:

5.5) Error markers appear under certain keywords that are not recognized by Java compiler. However, Eclipse has a smart debugging function that is able to suggest corrections. In this example, choose the option to import the missing class.