LinearLayout Example

So if you want to create a UI using a XML file, you will need to put the XML file into your project's res/layouts folder. Here is a simple UI using the LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#000044"
android:orientation="vertical">
<TextView
id="@+id/textName"
android:text="Name:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
<EditText
id="@+id/editName"
android:text=""
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<TextView
id="@+id/textPasswd"
android:text="Password:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"/>
<EditText
id="@+id/editPasswd"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:password="true"/>
<Button
id="@+id/buttonSignIn"
android:text="Sign In"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

If you start your "Hello world!!" app having this file in a proper place (i.e. res/layouts/main.xml) you shall still see the same "Hello world!!" text on the emulator's screen. To tell the Android to use the XML file you have to change one line in the Java code. Concretely this line:

setContentView(tv);

To this:

setContentView(R.layout.main);

Now, after the compilation and running the app you should see our new screen presence of the app. It should be a simple "Sign In" form.

Try to make some changes to the XML file to get yourself more familiar with a XML defined UI. If you need some help, check the Android's API reference page or leave me a comment.