34,333
edits
Changes
no edit summary
A master/detail flow is an interface design concept whereby a list of items (referred to as the master list) is displayed to the user. On selecting an item from the list, additional information relating to that item is then presented to the user within a details panel. An email application might, for example, consist of a master list of received messages consisting of the address of the sender and the subject of the message. Upon selection of a message from the master list, the body of the email message would appear within the detail panel.
On tablet sized Android device displays, the master list appears in a narrow vertical panel along the left hand edge of the screen. The remainder of the display is devoted to the detail panel in an arrangement referred to as two-pane mode. Figure 2426-1, for example, shows the master/detail two-pane arrangement with three master items listed and the content of item three listed in the detail panel:
[[Image:android_studio_large_screen_master_detail.png|Master/Detail flow on a large Android screen]]
Figure 2426-1
On smaller, phone sized Android devices, the master list takes up the entire screen and the detail panel appears on a separate screen which appears when a selection is made from the master list. In this mode, the detail screen includes an action bar entry to return to the master list. Figure 2426-2, for example, illustrates both the master and detail screens for the same three item list on a 4” phone screen:
[[Image:android_studio_small_screen_master_detail.png|Master/Detail flow on a small Android screen]]
Figure 2426-2
== Creating a Master/Detail Flow Activity ==
The next screen (Figure 26 425 -4) provides the opportunity to configure the objects that will be displayed within the master/detail activity. In the tutorial later in this chapter, the master list will contain a number of web site names which, when selected, will load the chosen web site into a web view within the detail panel. With these requirements in mind, set the Object Kind field to “Website” and the Object Kind Plural and Title settings to “Websites”.
[[Image:android_studio_configure_master_detail_kinds.png|Configuring Master/Detail Flow items in Android Studio]]
Figure 26 -4
== Changing the Detail Pane ==
The detail information shown to the user when an item is selected from the master list is currently displayed via the layout contained in the fragment_website_detail.xml file. By default this contains a single view in the form of a TextView. Since the TextView class is not capable of displaying a web page, this needs to be changed to a WebView object for the purposes of this tutorial. To achieve this, navigate to the MasterDetailFlow -> app -> src -> main -> res -> layout -> fragment_website_detail.xml file in the Project tool window and double click on it to load it into the Designer tool. Switch to Design mode before right-clicking on the white background of the display canvas (which represents the TextView) and selecting the Delete menu option from the resulting menu to remove the TextView from the layout. Locate the WebView component from the Widgets section of the Designer tool palette and drag and drop it onto the layout canvas. With the newly added WebView instance selected in the design layout, use either the Properties panel or the Designer toolbar buttons to change both the layout:height and layout:width properties to match_parent so that the view fills the available space as illustrated in Figure 2426-5:
[[Image:android_studio_detail_webview.png|A WebView added to a layout in Android Studio Designer]]
Figure 2426-5
== Running the Application ==
Compile and run the application on a suitably configured emulator or an attached Android device. Depending on the size of the display, the application will appear either in small screen or two-pane mode. Regardless, the master list should appear primed with the names of the three web sites defined in the content model. Selecting an item should cause the corresponding web site to appear in the detail panel as illustrated in two-pane mode in Figure 2426-6:
[[Image:android_studio_master_detail_example_running.png|The completed Android Studio based Master Detail Flow example app running]]
Figure 2426-6