android material design: its impact on location-based apps
TRANSCRIPT
![Page 1: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/1.jpg)
Android material design: its impact on location-based apps
Will Crick, Jenee Jernigan, Dan O’Neill
![Page 2: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/2.jpg)
![Page 3: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/3.jpg)
What is material design?
![Page 4: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/4.jpg)
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: http://www.google.com/design/spec/material-design/introduction.html#
![Page 5: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/5.jpg)
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
![Page 6: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/6.jpg)
Lets see some then….
![Page 7: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/7.jpg)
Structure
3d layering of contentElevation of elements important – conveyed by shadows
Movement of surfaces under each otherGrouping of objects, siblings should move the same
Floating action buttons
![Page 8: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/8.jpg)
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
http://www.google.com/design/spec/style/imagery.html#imagery-best-practices
![Page 9: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/9.jpg)
Meaningful transitions
Content grows/shrinks from its source to destinationHelp organize the information architecture of the app
![Page 10: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/10.jpg)
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
![Page 11: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/11.jpg)
Animations
Authentic motion and consistent choreography
http://www.google.com/design/spec/animation/authentic-
motion.html#authentic-motion-mass-weight
Delightful details
http://www.google.com/design/spec/animation/delightful-
details.html
![Page 12: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/12.jpg)
Iconography
Simple, flat, consistentLongest page in the spec, so beware….
![Page 13: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/13.jpg)
More principals…
http://www.google.com/design/spec/material-design/introduction.html
It’s a lesson on how to write design guidelines…
https://medium.com/@orhnsnmz/how-to-upgrade-your-apps-design-from-holo-to-material-design-a-case-study-f77e33a528c8
![Page 14: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/14.jpg)
Clarifying some unclear areas in the guidelines
![Page 15: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/15.jpg)
Lists
Good for items with a few lines of text
Fewer actions
Similar types of information
Better for scanning text
![Page 16: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/16.jpg)
Cards
Mixed content
Multiple actions
Different lengths of content
Strong or dominant imagery
![Page 17: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/17.jpg)
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.
Color
![Page 18: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/18.jpg)
When is animation too much?
Is it distracting? Is it jarring?
Is it overkill?
Animation
![Page 19: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/19.jpg)
Take reasonable opportunities to do something interesting
![Page 20: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/20.jpg)
Take reasonable opportunities to do somethinginteresting.
![Page 21: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/21.jpg)
Rule of thumb:Enhancing the users experience
Places where you can expect enhanced design:
Start screen
Navigation Drawer
Loading Indicators
About screen
![Page 22: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/22.jpg)
“Flat” style
More minimal, sleeker lines - aka “Modern”
Beginning to incorporate animations as transitions
Consistency across our apps
What are some changes coming to Esri mobile apps?
![Page 23: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/23.jpg)
Old and new
![Page 24: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/24.jpg)
Old and new
![Page 25: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/25.jpg)
Old and new
![Page 26: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/26.jpg)
Old and not as new...
![Page 27: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/27.jpg)
Dan O’Neill
Material design demoArcGIS Basemaps demo & code
![Page 28: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/28.jpg)
Material Design
● ArcGIS Basemaps app○ DEMO
Dan
![Page 29: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/29.jpg)
Material Design
● ArcGIS Basemaps app○ Material design UI components used
■ RecyclerView■ CardView■ Floating Action Button■ Animations■ Ripples
➔ https://github.com/Esri/arcgis-runtime-demos-android/tree/master/2015-DS/M t i lB M
Dan
![Page 30: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/30.jpg)
Material Design
● 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
Dan
![Page 31: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/31.jpg)
Material Design - Model
● Basemaps
○ BasemapItem
■ Defined our basemap object
● PortalItem
● Bitmap Image
○ BasemapAdapter
■ Extendes RecyclerView.Adapter
■ ViewHolder pattern required by API
○ BasemapViewHolder
■ Stores each of the component views
○ BasemapClickListener
■ Listeners are not provided by RecyclerView
Dan
![Page 32: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/32.jpg)
Material Design - Presenter
● ArcGIS Android Portal API
○ FetchBasemapsItemId
■ Queries ArcGIS online for Basemap items
■ Background thread
○ OnTaskCompleted
■ Interface to process response from background thread
Dan
![Page 33: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/33.jpg)
Material Design - View
● 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
Dan
![Page 34: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/34.jpg)
Dan O’Neill
Material designArcGIS Basemaps code
![Page 35: Android Material Design: its Impact on Location-based Apps](https://reader031.vdocument.in/reader031/viewer/2022013013/58a2f2ab1a28ab4c028b9b54/html5/thumbnails/35.jpg)
please rate our session
Thanks!