57. An Android Studio Master/Detail Flow Tutorial
This chapter will explain the concept of the Master/Detail user interface design before exploring, in detail, the elements that make up the Master/Detail Flow template included with Android Studio. An example application will then be created that demonstrates the steps involved in modifying the template to meet the specific needs of the application developer.
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 detail pane. 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 pane.
On tablet sized Android device displays in landscape orientation, 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 pane in an arrangement referred to as two-pane mode. Figure 57-1, for example, shows the master/detail, two-pane arrangement with master items listed and the content of item one displayed in the detail pane:
...57.2 Creating a Master/Detail Flow Activity
In the next section of this chapter, the different elements that comprise the Master/Detail Flow template will be covered in some detail. This is best achieved by creating a project using the Master/Detail Flow template to use while working through the information. This project will subsequently be used as the basis for the tutorial at the end of the chapter.
Although the project creation wizard includes the option to select the Master/Detail Flow template, greater flexibility in terms of configuring the template is available by adding the activity after the project has been created.
Select the Start a new Android Studio project quick start option from the welcome screen and, within the resulting new project dialog, choose the Add No Activity template before clicking on the Next button.
Enter MasterDetailFlow into the Name field and specify com.ebookfrenzy.masterdetailflow as the package name. Before clicking on the Finish button...
57.3 The Anatomy of the Master/Detail Flow Template
Once a new project has been created using the Master/Detail Flow template, a number of Kotlin and XML layout resource files will have been created automatically. It is important to gain an understanding of these different files in order to be able to adapt the template to specific requirements. A review of the project within the Android Studio Project tool window will reveal the following files, where <item> is replaced by the Object Kind name that was specified when the project was created (this being “Website” in the case of the MasterDetailFlow example project):
•activity_<item>_list.xml – The top level layout file for the master list, this file is loaded by the <item>ListActivity class. This layout contains a toolbar, a floating action button and includes the <item>_list.xml file.
•<item>ListActivity.kt – The activity class responsible for displaying...
57.4 Modifying the Master/Detail Flow Template
While the structure of the Master/Detail Flow template can appear confusing at first, the concepts will become clearer as the default template is modified in the remainder of this chapter. As will become evident, much of the functionality provided by the template can remain unchanged for many master/detail implementation requirements.
In the rest of this chapter, the MasterDetailFlow project will be modified such that the master list displays a list of web site names and the detail pane altered to contain a WebView object instead of the current TextView. When a web site is selected by the user, the corresponding web page will subsequently load and display in the detail pane.
57.5 Changing the Content Model
The content for the example as it currently stands is defined by the DummyContent class file. Begin, therefore, by selecting the DummyContent.kt file (located in the Project tool window in the app -> java -> com.ebookfrenzy.masterdetailflow -> dummy folder) and reviewing the code. At the bottom of the file is a declaration for a class named DummyItem which is currently able to store two String objects representing a content string and an ID. The updated project, on the other hand, will need each item object to contain an ID string, a string for the web site name, and a string for the corresponding URL of the web site. To add these features, modify the DummyItem class so that it reads as follows:
data class DummyItem(val id: String, val website_name: String,
val website_url: String) {
override fun toString(): String = website_name
}
...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 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 this tutorial. To achieve this, navigate to the app -> res -> layout -> website_detail.xml file in the Project tool window and double-click on it to load it into the Layout Editor tool. Switch to Text mode and delete the current XML content from the file. Replace this content with the following XML:
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent...
57.7 Modifying the WebsiteDetailFragment Class
At this point the user interface detail pane has been modified but the corresponding Kotlin class is still designed for working with a TextView object instead of a WebView. Load the source code for this class by double-clicking on the WebsiteDetailFragment.kt file in the Project tool window.
In order to load the web page URL corresponding to the currently selected item only a few lines of code need to be changed. Once this change has been made, the code should read as follows:
package com.ebookfrenzy.masterdetailflow
.
.
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
.
.
import com.ebookfrenzy.masterdetailflow.dummy.DummyContent
class WebsiteDetailFragment : Fragment() {
/**
* The dummy content this fragment is presenting.
*/
&...
57.8 Modifying the WebsiteListActivity Class
A minor change also needs to be made to the WebsiteListActivity.kt file to make sure that the web site names appear in the master list. Edit this file, locate the onBindViewHolder() method and modify the setText() method call to reference the web site name as follows:
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val item = mValues[position]
holder.mIdView.text = item.id
holder.mContentView.text = item.website_name
.
.
}
57.9 Adding Manifest Permissions
The final step is to add internet permission to the application via the manifest file. This will enable the WebView object to access the internet and download web pages. Navigate to, and load the AndroidManifest.xml file in the Project tool window (app -> manifests), and double-click on it to load it into the editor. Once loaded, add the appropriate permission line to the file:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.masterdetailflow" >
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
...
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 pane as illustrated in two-pane mode in Figure 57-5:
A master/detail user interface consists of a master list of items which, when selected, displays additional information about that selection within a detail pane. The Master/Detail Flow is a template provided with Android Studio that allows a master/detail arrangement to be created quickly and with relative ease. As demonstrated in this chapter, with minor modifications to the default template files, a wide range of master/detail based functionality can be implemented with minimal coding and design effort.
© 2019 Packt Publishing Limited All Rights Reserved
