Droiddraw tutorial 2: table layout

Droiddraw tutorial 2: table layout

• Step 0

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.

• Step 1

Start the droiddraw user interface designer.

• Step 2

Select relativelayout as the root layout.

• Step 3

Select the "layouts" tab

• Step 4

Drag a tablelayout object from the layouts panel to the center of the screen.

• Step 5

Double-click "tablelayout" to modify its attributes. Change its width to fill_parent"

• Step 6

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.

• Step 7

Drag and Drop a textview in each tablerow:

• Step 8

Double-click each textview to modify its properties. Modify the displayed text as follows:

• Step 9

Drag and Drop An edittext in each tablerow to the right of the existing text.

• Step 10

Select tablelayout and modify the "stretchable column" (Extensible column) attribute value to 1. This will expand all the edittext widgets to fill the table.

• Step 11

Edit the attributes of each edittext and set the text attribute ""

• Step 12

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.

• Step 13

Modify the properties of the button. Set the text to "OK"

 

 

• Step 14

Click "generate" to generate the. xml file.

• Step 15

Create a new Android project in eclipse

• Step 16

Replace the Res/layouts/mian. xml file with the XML generated in step 1.

• Step 17

Run your new project and you should see your GUI in Android. It should be like this:

• Complete XML file

2. Android: Id = "@ + ID/widget49"
3. Android: layout_width = "fill_parent"
4. Android: layout_height = "fill_parent"
5. Xmlns: Android = "http://schemas.android.com/apk/res/android">
7. Android: Id = "@ + ID/widget54"
8. Android: layout_height = "160px"
9. Androidrientation = "vertical"
10. Android: stretchcolumns = "1"
11. Android: layout_alignparenttop = "true"
12. Android: layout_centerhorizontal = "true" Android: layout_width = "fill_parent">
14. Android: Id = "@ + ID/widget55"
15. Android: layout_width = "fill_parent"
16. Android: layout_height = "wrap_content"
17. Androidrientation = "horizontal">
19. Android: Id = "@ + ID/widget58"
20. Android: layout_width = "wrap_content"
21. Android: layout_height = "wrap_content"
22. Android: text = "name">
25. Android: Id = "@ + ID/widget61"
26. Android: layout_width = "wrap_content"
27. Android: layout_height = "wrap_content"
28. Android: textsize = "18sp">
32. Android: Id = "@ + ID/widget56"
33. Android: layout_width = "fill_parent"
34. Android: layout_height = "wrap_content"
35. Androidrientation = "horizontal">
37. Android: Id = "@ + ID/widget59"
38. Android: layout_width = "wrap_content"
39. Android: layout_height = "wrap_content"
40. Android: text = "hone">
43. Android: Id = "@ + ID/widget62"
44. Android: layout_width = "wrap_content"
45. Android: layout_height = "wrap_content"
46. Android: textsize = "18sp">
50. Android: Id = "@ + ID/widget57"
51. Android: layout_width = "fill_parent"
52. Android: layout_height = "wrap_content"
53. Androidrientation = "horizontal">
55. Android: Id = "@ + ID/widget60"
56. Android: layout_width = "wrap_content"
57. Android: layout_height = "wrap_content"
58. Android: text = "E-mail">
61. Android: Id = "@ + ID/widget63"
62. Android: layout_width = "wrap_content"
63. Android: layout_height = "wrap_content"
64. Android: textsize = "18sp">
68. Android: Id = "@ + ID/widget64"
69. Android: layout_width = "wrap_content"
70. Android: layout_height = "wrap_content"
71. Android: text = "button"
72. Android: layout_below = "@ + ID/widget54"
73. Android: layout_alignright = "@ + ID/widget54">

• Result