34,333
edits
Changes
no edit summary
The number of columns in a table is dictated by the row with the most columns and, by default, the width of each column is defined by the widest cell in that column. Columns may be configured to be shrinkable or stretchable (or both) such that they change in size relative to the parent TableLayout. In addition, a single cell may be configured to span multiple columns.
Consider the user interface layout shown in Figure 4241-1:
[[Image:android_studio_database_example_layout.png|An Android Studio TableLayout example UI]]
Figure 4241-1
From the visual appearance of the layout, it is difficult to identify the TableLayout structure used to design the interface. The hierarchical tree illustrated in Figure 4241-2, however, makes the structure a little easier to understand:
[[Image:android_studio_tablelayout_tree.png|A TableLayout hierarchy diagram]]
Figure 4241-2
Clearly, the layout consists of a parent LinearLayout view with TableLayout and LinearLayout children. The TableLayout contains three TableRow children representing three rows in the table. The TableRows contain two child views, with each child representing the contents of a column cell. The LinearLayout child view contains three Button children.
The layout shown in Figure 4241-2 is the exact layout that is required for the database example that will be completed in the next chapter. The remainder of this chapter, therefore, will be used to work step by step through the design of this user interface using the Android Studio Designer tool.
== Creating the Database Project ==
Locate the LinearLayout (Vertical) component from the Layouts section of the Designer palette and drag and drop it onto the device screen layout.
Once again referring to the Layouts section of the Palette, drag and drop a TableLayout view so that it is positioned at the top of the LinearLayout canvas area as illustrated in Figure 4241-3:
[[Image:android_studio_tablelayout_added.png|A TableLayout in the Android Studio Designer tool]]
Figure 4241-3
Once these initial steps are complete, the Component Tree for the layout should resemble that shown in Figure 4241-4:
[[Image:android_studio_tablelayout_component_tree.png|A TableLayout in the Android Studio Designer Component Tree]]
Figure 4241-4
== Adding and Configuring the TableRows ==
Now that the TableLayout has been added to the user interface layout, three TableRow instances need to be added as children. From the Designer palette, locate the TableRow entry listed under Layouts and drag and drop an instance directly onto the top of the TableLayout entry in the Component Tree panel. Repeat this step to add two more TableRows so that the component tree matches Figure 4241-5:
[[Image:android_studio_tablelayout_with_tablerows.png|TableRows added to a TableLayout in Android Studio Designer]]
Figure 4241-5
From within the Widgets section of the palette, drag and drop two Large Text TextView objects onto the uppermost TableRow entry in the Component Tree (Figure 4241-6):
[[Image:android_studio_table_row_with_textviews.png|Children added to a TableRow in Android Studio]]
Figure 4241-6
Drag and drop three Button objects onto the new LinearLayout and assign string resources for each button that read “Add”, “Find” and “Delete” respectively.
With the new horizontal Linear Layout view selected in the Component Tree, click on the Gravity button in the Designer toolbar (Figure 4241-7) and select the Center gravity option so that the buttons are centered horizontally within the display:
[[Image:android_studio_designer_gravity_menu.png|Changing the gravity of a view in Android Studio Designer]]
Figure 4241-7
[[Image:android_studio_component_tree_for_tablelayout_example.png|The Component Tree hierarchy for the completed Android Studio TableLayout example]]
Figure 4241-8
== Adjusting the Layout Margins ==
All that remains is to adjust some of the layout settings. Begin by clicking on the first TableRow entry in the Component Tree panel so that it is selected. Hold down the Ctrl-key on the keyboard and click in the second and third TableRows so that all three items are selected. In the Properties panel, locate the layout:margin property category and, once located, unfold the category and change the all setting to 10dp as shown in Figure 4241-9:
[[Image:android_studio_change_margin_property.png|Setting margin properties within Android Studio Designer]]
Figure 4241-9
With margins set on all four sides of the three TableRows, the user interface should appear as illustrated in Figure 4241-1. For the sake of completeness, and for comparison purposes in the event that your layout does not match that in Figure 4241-1, the full activity_database.xml structure for this layout is outlined below.
