Mastering the Master Detail Pattern

AnDevCon SF 2013

Mastering the
Master/Detail
Pattern
Copyright © 2013 CommonsWare, LLC

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
●
●

BACK to return to master

●

–

Swipe between peer details
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
●
●

Read-only vs. read-write actions

●

–

Exception: no relevant actions (unlikely)
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

More Related Content

Viewers also liked

Similar to Mastering the Master Detail Pattern

More from CommonsWare

Recently uploaded

Mastering the Master Detail Pattern