1

+
12A Material Design

Melissa Densmore, UCT CSC2002S

1
+ 2

Material Design
material.io

 Guideline on how android interface elements should appear and

interact

 Assigned Reading: Read about Material Design for Android on

the Material Design website
 Material System (all, especially case studies)
 Material Foundation (all)
 Material Guidelines (all)

 Key Principles
 Material is Metaphor: inspired by physical world and textures
 Bold, graphic, intentional: guided by print methods
TYPOGRAPHY, grids, space, scale, color and imagery
 Motion provides meaning: use motion to focus attention and
reorganize the environment with coherent transitions and subtle
feedback

Melissa Densmore, UCT CSC2002S

2
 + 3

Material Properties
What can materials do?

Solid
Occupies Unique Points
in Space
Impenetrable
Mutable shape
Changes in size only
along plane
Unbendable
Can join to other material
Can separate, split, heal
Can be created or
destroyed
Move along any axis

Melissa Densmore, UCT CSC2002S

Characteristics
Solid
Occupies Unique Points in Space
Impenetrable
Mutable shape
Changes in size only along plane
Unbendable
Can join to other material
Can separate, split, heal
Can be created or destroyed
Move along any axis
Physical Properties
Varying x&y dimensions
Uniform thickness (1dp)
Casts shadows naturally from relative position
Content is displayed on material, but does not add thickness
Content is independent but stays within bounds
Solid
Transforming
Changes shape
But not bends or fold
Can join sheets
Can heal

3
Movement
Spontaneous generation or destruction
Move on any axis
Z‐motion on interaction with user

3
 + 4

Material Components
Interactive building blocks for creating an interface

Melissa Densmore, UCT CSC2002S

Material Design comes with a set of open source widgets that you can use to assemble the
interface. Use of these widgets increases consistency and learnability of an interface.

The guideline outlines how each component should be used.

Read: Components

4
 5

Material Case Study: Crane

• Supports content filtering
• Simple high-level sections
• Grid System
• Consistency across devices
• Use of color and shadow to
create layering

Melissa Densmore, UCT CSC2002S

So how do you put all the components together? Pulling from this case study on a travel
booking site, you can see how they’ve been assembled using colors and layering to
organize and emphasize key elements.

Full case study with rationale for each component design here:
https://material.io/design/material‐studies/crane.html

5
 +
12B Navigation

CSC2002S Melissa Densmore, UCT 6

6
 7

+
Bars
1 Status Bar
2 Navigation Bar
3 Combined Bar
Melissa Densmore, UCT CSC2002S

All these bars can be dimmed or hidden depending on what you want your application to
look like. Some apps make more sense in full screen!
Lean Back – swipe to bring them back
Immersive – tap to bring them back
Lights out – automatically fade the bars after inactivity ‐ deprecated

7
 8

Top level views

The top level of the app typically

consists of the different views that
your app supports. The views
either show different
representations of the same data
or expose an altogether different
functional facet of your app.

Category views

Category views allow you to drill

deeper into your data.

Detail/edit view

The detail/edit view is where you

consume or create data.

Melissa Densmore, UCT CSC2002S

8
 Navigation Bar 9
• You have a

+
large number

Top-Level Switching
of top-level
Fixed Tabs views.
• You expect your app's • You want to
users to switch views provide direct
frequently. access to
• You have a limited number screens on
of up to three top-level lower levels.
views. • You have
• You want the user to be particularly
highly aware of the deep
alternate views. navigation
branches.

Spinners
• You don't want to give up the vertical screen
real estate for a dedicated tab bar.
• The user is switching between views of the
same data set or data sets of the same type.
Melissa Densmore, UCT CSC2002S

9
 + 10

Melissa Densmore, UCT CSC2002S

Action Bar referred to as the App Bar now

10
 11

+
Contextual Action Bar
Melissa Densmore, UCT CSC2002S

Instead of secondary/context menus, you should use the contextual action bar
You can dynamically adjust the action bar menu items based on what is selected

11
 12

+
Melissa Densmore, UCT CSC2002S

12
 +
12C Notifications

CSC2002S Melissa Densmore, UCT 13

13
 + 14

Drawer Notifications …
expandable
actionable
groupable

Melissa Densmore, UCT CSC2002S

Built into the design of these widgets are the design principles we’ve already covered.
Guidelines for Android notifications seek to increase the signal to noise ratio, and to show
the most important information first.

Use of mapping and clear affordances helps people to know what to do with a notification
at a glance

And use of channels and importance levels gives control to the user over notifications.

Drawer – chronologically+priority sorted, swipe to remove unless it is an ongoing

notification
Short: 1‐2 lines, optional timestamp
Time sensitive events ‐ especially if they involve other people
Use Stacked notifications rather than multiple notifications – expand to view more

https://developer.android.com/guide/topics/ui/notifiers/notifications

14
 15

+
Other notifications
Heads-up Notification – a floating
window above the current app
Lock-screen – can change what
content appears or not for privacy
App icon badge, and notification
dot

Melissa Densmore, UCT CSC2002S

15
 16
Alerts for warnings and

+
confirmations

In-app Notifications
Snackbars and Toasts for
lightweight feedback

Dialogs and Popups for decisions and

actions

Melissa Densmore, UCT CSC2002S

16
+ 17

Melissa Densmore, UCT CSC2002S

17
 +
12D Gestures

CSC2002S Melissa Densmore, UCT 18

18
+ 19

Swipe between detailed views

Melissa Densmore, UCT CSC2002S

19
 20

+
Gestures
Touch Long press Swipe or drag
Triggers the Enters data selection
default mode. Avoid using Scrolls overflowing
functionality for a long press for showing content, or navigates
given item. contextual menus. between views in the same
hierarchy.
Action Action
Press, lift Press, wait, lift Action
Press, move, lift
Melissa Densmore, UCT CSC2002S

20
 21

+
Gestures
Long press drag Double touch Pinch
Rearranges data Scales up. Also used Zooms into/out of
within a view, or as a secondary content.
moves data into a gesture for text
container selection. Action
2-finger press, move
Action Action outwards/inwards, lift
Long press, move, Two touches in quick
lift succession
Melissa Densmore, UCT CSC2002S

21
 22

Melissa Densmore, UCT CSC2002S

Almost everything I’ve covered today is on developer.android.com – I suggest you go to the

website and look through it if you want to know more about the Android look and feel, and
patterns you can use to make your apps consistent with other android apps, and hopefully
intuitive for your users.

22
+ 23

Resources

 Open Handset Alliance:

http://www.openhandsetalliance.com/
Assigned Reading:
 Mobile Design Pattern Gallery, by Theresa Neil
Read about Material
 Websites listing android design patterns Design for Android:
http://www.androiddesignpatterns.com • Components
http://unitid.nl/androidpatterns • Shrine
• Accessibility
 Android Developer’s Guide: Design
http://developer.android.com/design/index.html https://material.io

 iOS App Anatomy

 https://developer.apple.com/library/iOS/design/

Melissa Densmore, UCT CSC2002S

23