34,333
edits
Changes
no edit summary
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Overview of Android SQLite Databases|Previous]]<td align="center">[[Kindle Fire Android 4 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[34. An Android SQLite Database Tutorial|Next]]</td>
<tr>
<td width="20%">An Overview of Android SQLite Databases<td align="center"><td width="20%" align="right">An Android SQLite Database Tutorial</td>
<google>BUY_KINDLE_FIREBUY_ANDROID</google>
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 3335-1:
[[Image:kindle_fire_android_tablelayout_ui.png|The layout of an Android TableLayout example]]
Figure 3335-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 33 35-2, however, makes the structure a little easier to understand:
[[Image:tablelayout_tree_small.png|The hierarchy of an example TableLayout implementation]]
Figure 3335-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 3335-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 Graphical Layout tool.
== Creating the Database Project ==
Switch back to the Graphical Layout view, right-click on the white background representing the RelativeLayout view, select the Change Layout… menu option and change the New Layout Type: menu to Linear Layout (Vertical).
Click on the Layouts section of the Palette and drag and drop a TableLayout view so that it is positioned at the top of the LinearLayout canvas area as illustrated in Figure 3335-3:
[[Image:android_tablelayout_with_tablerow.png|A TableLayout with a single TableRow]]
Figure 3335-3
By default, the Table Layout will have associated with it four Table Rows. This can be verified by referring to the Outline panel, which should appear as shown in Figure 3335-4:
[[Image:new_android_tablelayout_outline.png|A TableLayout with four TableRows]]
Figure 3335-4
From within the Form Widgets section of the palette, drag and drop two Large Text TextView objects onto the uppermost TableRow. As the TextView object is moved over the TableRow, orange lines will appear to indicate where the columns are located. Be sure to position the two views so that they are side by side in the uppermost Table Row as illustrated in Figure 3335-5:
[[Image:android_tablerow_two_children.png|An Android TableRow with two children]]
Figure 3335-5
[[Image:linear_layout_gravity.png|Changing the gravity of an Android LinearLayout view]]
Figure 3335-6
At this point, the user interface should appear as shown in Figure 3335-7:
[[Image:android_tablelayout_no_padding.png|The UI of an Android TableLayout example]]
Figure 3335-7
Before proceeding, also check the outline of the layout in the Outline panel, taking extra care to ensure the view ID names match those in the following figure:
[[Image:android_tablelayout_outline.png|The outline of an Android TableLayout example UI]]
Figure 3335-8
All that remains is to adjust some of the layout settings. In the first instance, right-click on the tableRow1 entry in the Outline panel and select the Other Properties -> Layout Parameters -> Layout Margin menu option and set the margin to 20dp. Repeat these steps for tableRow2 and tableRow3.
With these settings complete, the user interface should appear as illustrated in Figure 3335-1. For the sake of completeness, and for comparison purposes in the event that your layout does not match that in Figure 33 35-1, the full activity_database.xml structure for this layout is outlined below.
<pre>
<google>BUY_KINDLE_FIREBUY_ANDROID</google>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[An Overview of Android SQLite Databases|Previous]]<td align="center">[[Kindle Fire Android 4 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[34. An Android SQLite Database Tutorial|Next]]</td>
<tr>
<td width="20%">An Overview of Android SQLite Databases<td align="center"><td width="20%" align="right">An Android SQLite Database Tutorial</td>
</table>
