DroidDraw TableLayout Tutorial

Step Zero

This tutorial describes how to build a simple input form using DroidDraw and TableLayout. This tutorial assumes that you have downloaded and installed the Android SDK. This tutorial also assumes that you are reasonably familiar with concepts in GUI programming and the Java programming language.

Step One

Start up the DroidDraw User Interface Designer.

Step Two

Switch the root layout to RelativeLayout

Step Three

Select the "Layouts" tab

Step Four

Drag and drop a TableLayout object from the Layouts panel into the top-center of the screen

Step Five

Double click on the TableLayout to modify its properties. Change its width to "fill_parent".

Step Six

Drag and drop three TableRow objects from the Layouts panel into the TableLayout object. When you drop the TableRow objects, you should select TableLayout from the pop-up menu.

  

Step Seven

Drag and drop a TextView into each of the table rows:

Step Eight

Double-click on each TextView to edit its properties, change the text so that it matches the following image:

Step Nine

Drag and drop an EditText box into each table row to the right of the existing text.

Step Ten

Select the TableLayout, modify the "Stretchable Column" property to have the value "1", this will stretch out all of the EditText widgets to fil the table.

Step Eleven

Edit the properties of each EditText, make the text ""

Step Twelve

Drag and drop a Button widget to the space just below the lower right corner of the TableLayout. It should be outside of the TableLayout and aligned with its right side.

Step Thirteen

Edit the properties of this button to make the text "Ok"

Step Fourteen

Press "Generate" to generate the .xml file.

Step Fifteen

In Eclipse, create a new Android project.

Step Sixteen

Replace the contents of res->layouts->main.xml with the xml generated in step twelve.

Step Seventeen

Run your new project, you should see your GUI in Android. It should look something like:

Done!