Android material design:
its impact on location-based apps
Will Crick, Jenee Jernigan, Dan O’Neill
What is material design?
Google’s answer to Apple’s design dominance…
“…a visual language for our users that synthesizes the classic principles of
good design with the innovation and possibility of technology and science.”
Unified experience across platforms, device sizes and human computer
interaction (touch, voice, mouse & keyboard)
Creating a Google brand AND an Android brand
From: [Link]
Principles
Material is the metaphor – modern tech inspired by paper and ink
(not skeuomorphic – does
not replicate)
Bold, graphic, intentional – print based design guides
visual treatment
Motion provides meaning – user actions initiate movement
Lets see some then….
Structure
3d layering of content
Elevation of elements important – conveyed by shadows
Movement of surfaces under each other
Grouping of objects, siblings should move the same
Floating action buttons
Layout and color
Sizing of components (toolbars = 56dp / 64dp)
Never split sheets with another sheet!
Grids and templates – take care of your dp!!!
Cards for related data (not homogenous content)
Fixed width, variable height
Color & Themes - material theme
3 from primary, one from accent palette
Chips, Snackbars and Toasts, Tasty…
Imagery - don’t use stock images
Use Hero images!
Maximise your content, take up the screen real estate
[Link]
Meaningful transitions
Content grows/shrinks from its source to destination
Help organize the information architecture of the app
Interaction feedback
Highlight/selection of paper
Effects
Surface reaction – touch ripple
Material response – lift up when touched
Helps guide user in what to do next
Animations
Authentic motion and consistent choreography
[Link]
[Link]#authentic-motion-mass-weight
Delightful details
[Link]
[Link]
Iconography
Simple, flat, consistent
Longest page in the spec, so beware….
More principals…
[Link]
It’s a lesson on how to write design guidelines…
[Link]
holo-to-material-design-a-case-study-f77e33a528c8
Clarifying some unclear
areas in the guidelines
Lists
Good for items with a few lines of text
Fewer actions
Similar types of information
Better for scanning text
Cards
Mixed content
Multiple actions
Different lengths of content
Strong or dominant imagery
Color
Bright colors work well in moderation.
Bright colors work well in muted environments.
Bright colors work great when they are the focal point.
Design can be fairly uneventful and yet still interesting.
Animation
When is animation too much?
Is it distracting? Is it jarring?
Is it overkill?
Take reasonable opportunities to do
something interesting
Take reasonable
opportunities
to do something
interesting.
Rule of thumb:
Enhancing the users experience
Places where you can expect enhanced design:
Start screen
Navigation Drawer
Loading Indicators
About screen
What are some changes coming to Esri mobile apps?
“Flat” style
More minimal, sleeker lines - aka “Modern”
Beginning to incorporate animations as transitions
Consistency across our apps
Old and new
Old and new
Old and new
Old and not as new...
Material design demo
ArcGIS Basemaps demo & code
Dan O’Neill
Material Design
Dan
● ArcGIS Basemaps app
○ DEMO
Material Design
Dan
● ArcGIS Basemaps app
○ Material design UI components used
■ RecyclerView
■ CardView
■ Floating Action Button
■ Animations
■ Ripples
➔ [Link]
Material Design
Dan
● ArcGIS Basemaps app
○ Model - View - Presenter pattern
■ Model
● Defines data to be displayed
■ View
● Displays data
■ Presenter
● Middleman
● Retrieves data from model, formats for view
Material Design - Model
Dan
● Basemaps
○ BasemapItem
■ Defined our basemap object
● PortalItem
● Bitmap Image
○ BasemapAdapter
■ Extendes [Link]
■ ViewHolder pattern required by API
○ BasemapViewHolder
■ Stores each of the component views
○ BasemapClickListener
■ Listeners are not provided by RecyclerView
Material Design - Presenter
Dan
● ArcGIS Android Portal API
○ FetchBasemapsItemId
■ Queries ArcGIS online for Basemap items
■ Background thread
○ OnTaskCompleted
■ Interface to process response from background thread
Material Design - View
Dan
● User Interface
○ MainActivity
■ Displays results of data from Presenter
■ Basemaps images and Titles displayed as Cards
○ MapActivity
■ Recieves BasemapItems from MainActivity
■ Creates a MapView to display the map
■ Floating Action Bar Button to turn on/off you location
Material design
ArcGIS Basemaps code
Dan O’Neill
Thanks!
please rate our session
