Mastering the Master Detail Pattern

Copyright © 2013 CommonsWare, LLC

Mastering the Master/Detail

Pattern

AnDevCon SF 2013


Who Made You the Master?

● Master/Detail Pattern– Master = a collection of content

● Title/display name● Other metadata

– Detail = specifics about one piece of content● Pattern

– Show master or detail on smaller screens– Show master and detail on larger screens


Who Made You the Master?

Image courtesy of Google and AOSP


Stamping Out a Template

● Master/Detail Flow App Template– Option in Eclipse when creating a new project– Results

● Two activities (master/detail and detail-only)● Two fragments (master and detail)● Four layouts (plus a layout alias)● Always single-pane or dual-pane, based on screen

size


Nuking an Activity

● One Activity/Two Fragments– In single-pane mode, Activity executes a

FragmentTransaction to replace list with detail● Adds to back stack to allow BACK to reverse the

transaction and return to master

– In dual-pane mode, just shows both fragments


Nuking an Activity

● Pros– One less activity (class, manifest, etc.)– Not limited by Intent extras


Nuking an Activity

● Cons: Too Many Scenarios– Do we have a master fragment in the FragmentManager?

● If yes, is it visible? Should it be?– Do we have a detail fragment in the FragmentManager?

● If yes, is it visible? Should it be?– What happens when the user presses BACK?

– What happens if we rotate the screen and change strategies?


Slip Sliding Away

● SlidingPaneLayout– Android Support package– Handles complexity for you

● Single-pane vs. dual-pane● Swipe gesture to show, hide master in single-pane

mode● All the configuration change idiosyncrasies


Slip Sliding Away

● SlidingPaneLayout Pros– Simplicity

● SlidingPaneLayout Cons– Confusion over swipe gesture– Detail-first single-pane flow

● Can be fixed, requires a bit of extra code


Yet More Horizontal Swiping

● ViewPager– ViewGroup, attached to a PagerAdapter

● FragmentPagerAdapter, FragmentStatePagerAdapter, or custom implementation

– Horizontal swipes move between pages– Optional “indicators” to show where the user is

in the sea of pages



● ViewPager and Design– “On a phone, since the master and detail are on

separate screens, this typically requires the user to jump back and forth between the list and the detail view, aka "pogo-sticking".”

– “In cases where users will want to view multiple detail items in succession, avoid pogo-sticking by using the swipe gesture to navigate to the next/previous detail view.”



● ViewPager in Master/Detail– Single-Pane: Consider ViewPager for Detail

● Swipe between peer details● BACK to return to master● Ideal: context provided by content, so no tabs, etc.

– Dual-Pane: Probably Not Necessary● Can randomly access any detail via master pane, so

swiping not necessary



● ViewPager Challenges– Switching Between Single-Pane/Dual-Pane

● Fragment*PagerAdapter is very “grabby”, does not like others messing with its contents

● Net: need another PagerAdapter implementation

– Yet More Collisions with Horizontal Swipe Gestures

● Probably need to skip SlidingPaneLayout


Lights Mode! Camera Mode! Action Mode!

● Action Modes– A.k.a., contextual action bar– Replaces regular action bar for contextual

actions● When 1+ selected for such actions● Can perform actions upon group of selected items,

such as “delete” or “move”

– Dismissed via Done or BACK



● Action Modes and Design– Replacement for old-style context menu– Trigger Options

● Always-available checklist● Long-press to select first, moves into a multi-select

mode



● Action Modes and Master/Detail– Master should support action modes

● Exception: no relevant actions (unlikely)● Read-only vs. read-write actions● Emphasis on multiple-selection scenario

– Detail should support actions● Single-pane: action bar● Dual-pane: action bar and action mode



● Action Mode Challenges– Multiple Flavors of Master List Highlighting

● Single-pane: regular or multiple-selection● Dual-pane: activated or multiple-selection

– Detail in Multiple-Selection?● First detail? Last detail? Empty? Special content?

– Retaining Action Mode and Selections● Configuration changes, etc.


But Wait! There's More!

● Presentation– What do we do when there is a secondary

screen?● Splitter

– Should we allow resizing of panes in dual-pane mode?


But Wait! There's More!

● Action Bar Items– Need to ensure change properly

● Moving between master, detail in single-pane mode● Reasonable blend of both in dual-pane mode

● Navigation Drawer– Yet more conflict with horizontal gestures– Fallacy of the “bezel swipe”


CWAC-MasterDetail

● Canned “best practices” in reusable form● Objectives

– Maximum adherence to design guidelines– Minimum additional code to plug in your content


CWAC-MasterDetail

● Library Usage– Subclass MasterDetailActivity– Override buildMasterDetailHelper(),

returning instance of own subclass of MasterDetailHelper

– Override buildPagerAdapter() and buildModelCollection() in MasterDetailHelper

– Beer!


CWAC-MasterDetail

● Library Functionality, Today– Automatic handling of configuration changes– ViewPager in single-pane mode– Splitter support– Custom empty views (list, detail) and

multiple-choice view (detail)– Optional action mode support– Optional custom master contents


CWAC-MasterDetail

● Library Functionality, Future– Undo bar– Display vs. edit modes for detail– Presentation support– Filtering support– Ordered list support– And more!

Mastering the Master Detail Pattern

Technology

Transcript of Mastering the Master Detail Pattern