Android User Interface Design

In one of my previous post I discussed about Creating Android Databases. In this tutorial I’ll discuss simple way to create Android UI using Eclipse and DroidDraw tool which support drag-and-drop of widgets like buttons, labels, text boxes, etc.

Displaying the user interface is done by Activity, the fundamental unit of an Android application. The setContentView() method of the Activity class load the XML UI located in the res/layout folder in the onCreate() event.

An Activity has Views and ViewGroups. Here View is a widget and collection of one or more View can be considered as ViewGroup. ViewGroup plays a major role by providing us layout to arrange the appearance and sequence of views. Well, let’s built our first User Interface in Android.

1. First create simple Android project.

2. Then using DroidDrow design your interface (show steps) and click "Generate" button at the top left corner.

First open DroidDrow and select AbsoluteLayout because using that layout you can easily place widgets as you want.

Then drag–and-drop widgets you want to the design surface.

You can change properties of your widgets using "Properties" tab. There if you want to change the Id, change the things after "@+id/".

Finally click "Generate" button to get the XML code to the "output" textbox.

3. Now add new XML file to "layout" folder as follows. There I’ll give the file name as "testview.xml". Don’t use capital letters for the name.

4. Then click on "testview.xml" tab and replace existing code by generated code from the DroidDrow tool.

5. Now replace the "setContentView(R.layout.main);" using "setContentView(R.layout.testview);". Now your "onCreate" method should appear as follows.

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.testview);
}

Finally save all and run the project to see your interface in Android.

If you are interested please refer Event Handling in Android to learn how to handle events for these widgets.