Android-Eclipse: Building a Simple User Interface

---

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.