TableLayout Example

Today's sample code will implement very similar UI to the one created in the LinearLayout Example. But here we will be using a TableLayout widget instead.

Each TableLayout consists of a number of TableRow objects and each TableRow object contains zero or more cells. Each cell can hold one View object. The table has as many columns as the row with the most cells and cells can of course span columns. Here is a simple example of a "Sign In" form created with the TableLayout container:

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

Notice, that there aren't specified layout_width and layout_height attributes in the XML file. It's because TableRow always enforces those values to be respectively fill_parent and wrap_content.

Source: Google Android

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.

Implementing a User Interface

To give your application some "face" you will have to somehow define the UI. The Android API gives you two ways how to do it. You can write your app's UI directly in the Java code using objects and their methods or you can define it through a XML file. I guess that the most of programmers (including me) will choose the second option.

The Basic units of a user interface are Views and ViewGroups. Those basic screen elements are held in a tree structure as shown on a picture below. Every View represents some screen widget (TextView, EditView, Button etc.) and every ViewGroup serves as a base class for layouts.

Next time we will provide you with some examples of a simple UIs using several layouts.
Source: Google Android