Android: Add some UI element to the project

3. Add some UI element to the project

The project we created in Android is a very specific one, it is an Activity project (we did pass the --activity directive when we first created the project). As such, it included a default class that extended Activity. You can think of Activities as some sort of UI projects, they are intended to communicate to the user via GUI interfaces.

Think of Activity classes as some sort of a Window or a Frame in, like in javax.swing, but they are coded an manipulated a little differently. In Swing programming, the individual widgets (buttons, textfields etc) are declared and added to the Frame programmatically. The widgets are instantiated, usually within the same source file where a JFrame has been extended, then they are added to a Container---usually the JFrame. When using Activities, you will need to work with an XML file in order to define the widgets and their layouts. You will also need to work with a Java source file (the class that extended the Activity) in order to respond to events.

Go to your project folder, to the src directory and drill down to the java source file, you will see the default source code that the Android create project command generated for us.

package com.thelogbox;

import android.app.Activity;

import android.os.Bundle;

import android.widget.Toast;

import android.content.Context;

import android.view.View;

public class HelloWorld extends Activity

{

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}

It is a basic Java class that extended the android.app.Activity class. Take a look at the last statement inside the onCreate() method. That last statement is an directive on where and how to the get the instructions for building the user interface.

The setContentView() is an overloaded method of Activity, it can take various parameter(s) and type. In our example, what was passed as param was R.layout.main—it is an integer constant. The R class was auto-generated by Android—specifically, it was generated by the appt, short for android asset packaging tool. If you want to take a look at the source, it will be in folder gen/your-package-name/R.java. That is not important right now though, what is important to know is that the Activity class provides for a method (setContentView) where we can point to an XML resource, this XML resource is where we will draw our user interface.

R.layout.main maps to main.xml which can be found on the folder res/layout/main.xml Here is what Android generated for us.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Hello World"

    />

   

</LinearLayout>

The main node is LinearLayout, this is not always the case, there are a couple of layouts to choose from in Android--we will circle back to this later, but for now, let's use the LinearLayout. You can think of the LinearLayout as the equivalent of java.awt.FlowLayout in JSE programming. It organizes the widgets by stacking them together linearly, from left to right, then top to bottom. Inside the main LinearLayout node is a another XML tag, the TextView tag. TextView is the equivalent of java.awt.Label or javax.swing.JLabel, it is a static text widget, you won't be able to edit them, they are good for, well, labels. The order of how the views are defined in the XML affects the order of how the views are displayed. This is the simplest layout, that is why I chose this as a starting point.

We will add another view to our screen, an editable text component. Go back to the editor and insert another view inside the LinearLayout main node.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="Hello World"

    />

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

    />

</LinearLayout>

EditText is an editable text component, very similar to javax.swing.JTextField. The android platform knows how to handle the EditText. Once this view has focus, the on-screen keyboard will pop so that the user can begin input. You do not need to handle the popping of the keyboard, it will be done for you automatically.

Save the project, then compile and run.

$ ant clean

$ ant debug install

This is what the app will look like on the device.

The layout seems okay but it's a little weird because labels are usually laid out to the left of a text field, not on top. The reason for this is because our LinearLayout's orientation is "vertical" which causes the components to flow from top to bottom. We can change this behavior so that components inside the layout will flow from left to right.

The reason for this is because LinearLayout as it is defined right now is oriented vertically. That is easy to remedy, just change the orientation of the layout to "horizontal",

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <TextView 

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="Hello World"

    />

    <EditText

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

    />

</LinearLayout>

Save the project, compile, then run. Notice any difference?

The Name TextView is now immediately to the left of the EditText, as compared to our first version of our layout where the Name TextView was on top of the editable text.

There were two changes that made the second layout possible.

1.   Change the android:orientation of LinearLayout from "vertical" to "horizontal", this caused TextView and the EditableText views to flow from left to right, rather than top to bottom

2.   Change android:layout_width of the TextView from "fill_parent" to "wrap_content". Had we not made that change, the EditableText view would not have been visible. "Fill_parent" causes the view to occupy whatever space is remaining to right of the component. "Wrap_content" on the other hand, simply uses whatever space the component needs to display itself and allows the next component to occupy the next slot.