greglui.com

The draggable Android workspace with multiple screens is actually a ViewGroup containing multiple child views. Each of these child views is one screen which may contain icons, folders or widgets. A wallpaper is loaded onto the ViewGroup spanning multiple screens.

By default, our Android project’s main.xml file contains a TextView wrapped around by a LinearLayout. To continue building the gridded workspace, we shall replace the LinearLayout with a custom ViewGroup called Workspace. In Eclipse, right click on your Java package and choose New->Class. Name it Workspace and type android.view.ViewGroup for the Superclass. Note that by default a class which extends ViewGroup must at least implement a constructor and override the onLayout() function in order to compile. Eclipse can generate these method stubs for you:

package waffle.android.launcher;

import android.content.Context;
import android.util.AttributeSet;
import android.view.ViewGroup;

public class Workspace extends ViewGroup {

    public Workspace(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    @Override
    protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
        // TODO Auto-generated method stub
    }

}

Now in our main.xml, replace the LinearLayout with our new custom ViewGroup:

<?xml version="1.0" encoding="utf-8"?>
<waffle.android.launcher.Workspace
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</waffle.android.launcher.Workspace>

At this point, your project will compile. However if you run the activity, nothing will show on the screen. This is because we haven’t implemented the necessary methods in our custom ViewGroup to draw its child views onto the screen. More information regarding building custom Android components can be found at the Android Developer site. Essentially, there are two methods we will need to extend, which are onMeasure() and onLayout(). Since we only have one child view so far, we don’t need to do much to make it visible. Simply add the following code to the Workspace class:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    if (widthMode != MeasureSpec.EXACTLY) {
        throw new IllegalStateException("Workspace can only be used in EXACTLY mode.");
    }

    final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    if (heightMode != MeasureSpec.EXACTLY) {
        throw new IllegalStateException("Workspace can only be used in EXACTLY mode.");
    }

    getChildAt(0).measure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    final View child = getChildAt(0);
    child.layout(0, 0, child.getMeasuredWidth(), child.getMeasuredHeight());
}

The onMeasure() and onLayout() functions will require more work as we continue to add code and build towards the draggable, gridded workspace that we want.

As and Android developer you probably would at some point want to try out different apps on the emulator. The best way to get new apps is probably through the Android Market, however, the Android SDK by default does not come with the Android Market. Luckily, there is an easy way to get the Android Market running on your emulator.

Step 1) Download the Android 1.6 System Image with Android Market from here the HTC Developer Center: http://developer.htc.com/google-io-device.html

Step 2) In Eclipse, open the Android SDK and AVD Manager and create a new AVD targeting Android 1.6.

Step 3) Launch the new AVD once, check that there is a network connection, then terminate it. Without performing this step one may not be able get an Internet connection with the downloaded image.

Step 4) Unzip the image file downloaded in Step 1, and copy the system.img file to your new AVD directory. Typically the folder can be located in %userprofile%/.android/avd if under Windows.

Step 5) Launch the new AVD, and the image should be loaded.

Step 6) Follow the on screen instructions to set up the system. If you get stuck at a screen where you are asked to slide open the keypad, simply skip or cancel out of it and return to the home screen.

Step 7) The Android Market should be in your app drawer now. Launch it and sign in with your Google account, and you will be able to browse and install new apps just like on a real phone.

I even got Talking Tom running in the emulator!

Note: If you keep running into network connection problems, try using the images provided on this site:
http://techdroid.kbeanie.com/2009/11/android-market-on-emulator.html

Android’s GUI toolkit include all the common UI widgets like text labels, buttons, input fields, etc. While these widgets can be created and attached to our activities using Java code, in Android development it is more common to do it using XML-based layout files. An XML layout files is a specification of the widgets’ relationships to each other, and are stored in the res/layout directory inside an Android project tree.

Labels
The simplest UI element is probably the label, which is basically just text. In Android the label is referred to as a TextView. If you have created an application skeleton with Eclipse, the text that the default activity outputs to the screen is actually such a TextView. The TextView is defined in main.xml, and placed into the activity’s view via a setcontentView call:

 setContentView(R.layout.main);

The definition of the TextView itself looks like this:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />

Note that the text specified in the above TextView definition tells the widget to use the string resource with the identifier “hello” as the text, which is defined in res/values/strings.xml as:

<resources>
    <string name="hello">Hello World, HelloWorld!</string>
</resources>

If we run the application, we will see that this label widget showing the text properly on the screen.

Buttons
The Android Button class is actually a subclass of TextView, to define a button we can try adding the following code to our layout xml file:

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button"
    />

When we run the activity, here is what we will see:

Since all we have done is adding the button to the layout, it will not do anything when we click on it. What we need to do is to define a method in our activity, then associate the button to this method by adding an onClick attribute to the button XML element. Note that when implementing this we need to import two additional packages to our code:

import android.view.View;
import android.widget.Button;

Now in the activity we can add the method:

    public void onClick(View theButton) {
    	Button btn=(Button)findViewById(R.id.button);
    	btn.setText("Button Clicked!");
    }

And the following to the xml layout file:

<Button
    android:id="@+id/button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Button"
    android:onClick="onClick"
    />

The above code changes the text of our button when we click on it. When running the activity on the emulator here is what you should see:

Note that this method is only supported by Android 1.6 and above. Although there is another possible method to achieve the same thing, which is to define the activity to implement the View.OnClickListener interface.

ImageView and ImageButton
As their names suggest, ImageView and ImageButton are the image based versions of TextView and button. To specify the image to be used, we use the android:src attribute in the XML element, which usually references a drawable resource in the project. For instance, when the Eclipse project wizard creates a project skeleton, it includes an image, icon.png in the drawable folder by default. We can try to show this image by adding the following code to the layout XML file:

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/icon"
    />

When we run the activity in the emulator here is what we will see:

ImageButton works the same way as the regular button, with which we can use an onClick attribute to attach a handler method to a click event.

Fields
Fields are input areas where the user can type in text. To use Android fields, use the EditText widget in the layout XML file as follows:

<EditText
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>

What will show up in our UI is this:

The EditText widget is also a subclass of the TextView, but it has many other attributes that can be specified to alter the behavior of the field. For instance: android:autoText, android:capitalize, android:digits and android:singleLine to name a few. The purposes of these attributes are self-evident.

Checkbox
To use Android checkboxes, use the CheckBox widget in the layout XML file as follows:

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is a checkbox"
/>

In Java, we can use the methods isChecked(), setChecked(), toggle() to check or modify the state of our checkbox. Alternatively, we can implement the CompoundButton.OnCheckedChangedListener interface with our activity, and use setOnCheckedChangeListener() to attach a callback function to handle the check/uncheck events.

Radio Buttons
Android’s RadioButton widget inherits from the CompoundButton, which in turn inherits from TextView. Multiple RadioButtons can be put inside a RadioGroup, which means that only one button of the group can be selected at a time. The following example XML code place a group of RadioButtons in our activity’s layout:

<RadioGroup
	android:orientation="vertical"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	<RadioButton
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Radio Button 1" />
	<RadioButton
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Radio Button 2" />
	<RadioButton
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Radio Button 3" />
</RadioGroup>

When the activity is run in the emulator, this is what it will look like: