Android - Building a Simple User Interface

This tutorial is a continuation of http://basic-steps.blogspot.com/2013/02/android-understanding-my-first-app.html.   

The steps in this tutorial is based on http://developer.android.com/training/basics/firstapp/building-ui.html#Button. It guides the reader to learn about Simple User Interface.

1) Run Eclipse and open MyFirstApp project.

2) Open {project root}/res/layout/activity_main.xml



3) First, delete the <TextView> element and change the <RelativeLayout> element to <LinearLayout>. Then add the android:orientation attribute and set it to "horizontal". The result looks like this:


4) To create a user-editable text field, add an <EditText> element inside the <LinearLayout>.


5) Add String Resources.
5.1) Open {project root}/res/values/strings.xml and edit as follows:


6) Add a Button.
6.1) Get back to {project root}/res/layout/activity_main.xml and  add a <Button> to the layout, immediately following the <EditText> element:


7) Run app.
7.1) Make sure that your Android Emulator is running and detected by Eclipse.
7.2) In project explorer panel, Right-click {project root}, choose Run As/Android Application.


7.3) Type Hello and click Send.


8) Re-edit the layout and run
8.1) Re-edit layout.xml as follows:


8.2) Run and observe the output.