Droiddraw tutorial 2: table layout
This tutorial describes how to create a simple input and tablelayout layout from droiddraw. This tutorial assumes that you have downloaded and installed the android SDK. This tutorial also assumes that you are quite familiar with GUI Programming Concepts and Java programming languages.
Start the droiddraw user interface designer.
Select relativelayout as the root layout.
Select the "layouts" tab
Drag a tablelayout object from the layouts panel to the center of the screen.
Double-click "tablelayout" to modify its attributes. Change its width to fill_parent"
Drag the three tablerow objects from the layouts panel to the tablelayout object. When you drag and drop a tablerow object, you should select tablelayout from the pop-up menu.
Drag and Drop a textview in each tablerow:
Double-click each textview to modify its properties. Modify the displayed text as follows:
Drag and Drop An edittext in each tablerow to the right of the existing text.
Select tablelayout and modify the "stretchable column" (Extensible column) attribute value to 1. This will expand all the edittext widgets to fill the table.
Edit the attributes of each edittext and set the text attribute ""
Drag a button to the blank area in the lower right corner of tablelayout. It should be out of tablelayout and right aligned with it.
Modify the properties of the button. Set the text to "OK"
Click "generate" to generate the. xml file.
Create a new Android project in eclipse
Replace the Res/layouts/mian. xml file with the XML generated in step 1.
Run your new project and you should see your GUI in Android. It should be like this:
- Android: Id = "@ + ID/widget49"
- Android: layout_width = "fill_parent"
- Android: layout_height = "fill_parent"
- Xmlns: Android = "http://schemas.android.com/apk/res/android">
- Android: Id = "@ + ID/widget54"
- Android: layout_height = "160px"
- Androidrientation = "vertical"
- Android: stretchcolumns = "1"
- Android: layout_alignparenttop = "true"
- Android: layout_centerhorizontal = "true" Android: layout_width = "fill_parent">
- Android: Id = "@ + ID/widget55"
- Android: layout_width = "fill_parent"
- Android: layout_height = "wrap_content"
- Androidrientation = "horizontal">
- Android: Id = "@ + ID/widget58"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: text = "name">
- Android: Id = "@ + ID/widget61"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: textsize = "18sp">
- Android: Id = "@ + ID/widget56"
- Android: layout_width = "fill_parent"
- Android: layout_height = "wrap_content"
- Androidrientation = "horizontal">
- Android: Id = "@ + ID/widget59"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: text = "hone">
- Android: Id = "@ + ID/widget62"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: textsize = "18sp">
- Android: Id = "@ + ID/widget57"
- Android: layout_width = "fill_parent"
- Android: layout_height = "wrap_content"
- Androidrientation = "horizontal">
- Android: Id = "@ + ID/widget60"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: text = "E-mail">
- Android: Id = "@ + ID/widget63"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: textsize = "18sp">
- Android: Id = "@ + ID/widget64"
- Android: layout_width = "wrap_content"
- Android: layout_height = "wrap_content"
- Android: text = "button"
- Android: layout_below = "@ + ID/widget54"
- Android: layout_alignright = "@ + ID/widget54">