34,333
edits
Changes
no edit summary
== Adding an XML Resource File to the Project ==
The next task is to add our own XML layout resource file to the project to contain the user interface design. Right-click on the LayoutSample project name in the Package Explorer panel and select New -> Android XML File… from the resulting menu. In the next screen, name the file layout and select RelativeLayout for the Root Element as illustrated in Figure 1413-1:
[[Image:eclipse_create_new_xml_layout_file.png|Adding an XML layout file to an Android Activity]]
Figure 1413-1
Remaining on the same screen, click Finish to create the layout resource file. Using the Package Explorer window, locate the new layout.xml file (which by default will have been placed in the res -> layout project folder) and double-click on it to load it into the Graphical Layout tool. Using the configuration menu at the top of the layout tool, select the Amazon KindleFire HD 7” device configuration and change the orientation to Portrait if it defaults to Landscape. Once loaded, the Graphical Layout panel should appear as illustrated in Figure 1413-2:
[[Image:android_graphical_layout_tool_panel.png|The Android Graphical Layout Tool]]
Figure 1413-2
Once in place, the view may only be moved and resized if permitted by the parent view (in the case of this example, a RelativeLayout view). Unwanted changes made to the layout may be undone by selecting the Edit -> Undo menu option or pressing the Ctrl-Z keyboard sequence (Command-Z for Mac OS X).
From within the Form Widgets palette category, drag a Button view object into the center of the display view. Note that green horizontal and vertical dashed lines appear to indicate the center axes of the display. Once centered, release the mouse button to drop the view into position. Repeat these steps to place a plain text EditText view (the top item located under the Text Fields palette category) directly above the Button object in the display view as illustrated in Figure 1413-3:
[[Image:android_example_graphical_layout2.png|An example Android user interface layout]]
Figure 1413-3
== Editing View Properties ==
== Using the View Properties Sheet ==
In addition to the context menu approach to modifying view properties, another option is to use the View Properties sheet. By default, this panel is displayed within the Eclipse window immediately beneath the Outline panel. The properties sheet displays a list of all the properties available for the currently selected view object. The current value (if any) for each property is listed in the right-hand column of the sheet and may be changed to a new value by clicking within the corresponding cell. For properties where a pre-defined range of options is available, a button to launch a settings dialog will appear from which a selection may be made. Figure 14 13-4, for example, shows the property sheet for the Button view:
[[Image:android_adt_view_property_sheet2.png|The Eclipse Android Property Sheet]]
Figure 1413-4
The next step in the project is to create a new activity to go with the layout we have designed. Once again, because we instructed Eclipse not to create an activity for us, we are now going to create our own. This will be a valuable learning exercise since there are many instances in the course of developing Android applications where new activities need to be created from the ground up.
Right-click on the LayoutSample project in the Package Explorer panel and select the New -> Class menu option. In the resulting New Java Class dialog (Figure 14 13-5), we will need to configure the new activity class. Begin by clicking in the Package text field. Within this field, we need to enter the package name of our project. Either this can be typed manually, or the Ctrl-Space keyboard combination used to pop up a Content Assist panel containing a list of package names from which to choose. In this case, type in the package name for the application as declared when the project was created, for example com.example.layoutsample.
Name the new activity LayoutSampleActivity. Since most activities are subclassed from the Activity class, change the Superclass value from java.lang.Object to android.app.Activity before clicking on Finish to create the new class.
[[Image:eclipse_create_new_android_Activity_class.png|Adding a new Activity class to an Eclipse Android project]]
Figure 1413-5
In order to notify the Android runtime system about the existence of the LayoutSampleActivity activity, it will be necessary to add an entry for the activity to this manifest file.
Locate the AndroidManifest.xml file for the LayoutSample project and double click on it to load the Manifest editor panel as illustrated in Figure 1413-6:
[[Image:eclipse_android_manifest_editor.png|The Eclipse Android Manifest Editor]]
Figure 1413-6
The hierarchy viewer can only be used to inspect applications that are either running within an Android emulator, or on a device running a development version of Android. To run the tool on the LayoutSample application created in this chapter, launch the application on an Android Virtual Device emulator and wait until it has loaded and is visible on the emulator display. Once running, select the Window -> Open Perspective -> Hierarchy View menu option.
When the Hierarchy Viewer appears, it will consist of a number of different panels. The left hand panel, illustrated in Figure 14 13-7, lists all the activities currently running on the device. The activity listed in bold is the current foreground activity, which should, in this case, be LayoutSampleActivity.
[[Image:android_hierarchy_viewer_activity_list.png|The Android Hierarchy Viewer listing running Activities]]
Figure 1413-7
Selecting the activity will cause the hierarchy to load into the Tree View panel as shown in Figure 14 13-8 (note that there may be a short delay between selection of the activity and the hierarchy diagram appearing):
[[Image:android_hierarchy_viewer_tree_view.png|The Android Hierarchy Viewer Tree View]]
Figure 1413-8
Whilst it is possible to zoom in and out of the tree view using the scale at the bottom of the panel or by spinning the mouse wheel, in most cases the tree will be too large to view entirely within the Tree View panel. To move the view window around the tree simply click and drag in the Tree View panel, or move the lens within the Tree Overview panel (Figure 1413-9):
[[Image:android_hierarchy_viewer_tree_overview.png|The Android Hierarchy Viewer Tree View Overview]]
Figure 1413-9
When reviewing the tree view, keep in mind that some views in addition to those included in the activity layout will be displayed. These are the views and layouts that, for example, display the status bar across the top of the screen and provide an area for the activity to be displayed.
Selecting a node in the Tree View will cause the corresponding element in the user interface representation to be highlighted in red in the Layout View. In Figure 14 13-10 the RelativeLayout view is currently selected:
[[Image:android_hierarchy_viewer_layout_view.png|The Android Hierarchy Viewer Layout View]]
Figure 1413-10
