Material Design
Nsikak Thompson
@thompson_nsikak
#DevFestse16 Nov.18,2016
Slide 2
Slide 2 text
Nsikak Thompson
Founder Locus+
Thompson_nsikak Nsikak Thompson
Lead Android Developer @StartHubTech
I believe Apps developed in Africa can be more
beautiful.
Profile
Slide 3
Slide 3 text
To the game of Material
Design
Slide 4
Slide 4 text
What is Material Design?
“Material design is a design language that
synthesizes the classic principles of good design
with the innovation and possibility of technology
and science.”
Introduced by Google in 2014,
Material Design makes more liberal use of grid-based
layouts, responsive animations and transitions.
Slide 5
Slide 5 text
Principles of Material Design
Tangible
surfaces
Print-based
design
Meaningful
motion
Slide 6
Slide 6 text
Other Components
Cards List Tabs
Slide 7
Slide 7 text
What's new in Material
Design?
Slide 8
Slide 8 text
What's New in Material Design?
As at August 2016
● Notifications including new
content areas, interactions,
user controls, and short text
input
● Widgets contains guidance on
user engagement, retention, and
acquisition.
Slide 9
Slide 9 text
What's new in Material Design?
Notifications
Notifications provide
short, timely, and
relevant information
about your app when it’s
not in use.
Slide 10
Slide 10 text
What's new in Material Design?
Widgets
Information widgets Collection widgets Control widgets
Slide 11
Slide 11 text
Tools & resources
Slide 12
Slide 12 text
Tools & resources
Android
● AppCompat library for android
compile 'com.android.support:appcompat-v7:24.2.0'
● Design library.
compile 'com.android.support:design:24.2.0'
● 3rd party open source libraries.
https://android-arsenal.com/search?q=materia
Slide 13
Slide 13 text
Tools & resources
Overview
Slide 14
Slide 14 text
What you’ll need
● Android Studio version 2.1+ and
JDK 8+
● Experience developing Android
Apps
● A test device with Android 4.1+
● A USB micro to USB cable.
Slide 15
Slide 15 text
Setting up
Download the sample app or Clone the sample
project from git
$ git clone https://github.com/googlecodelabs/android-design-library.git
Run the sample app
Slide 16
Slide 16 text
Themes, Colors and Typography
Themes let you apply a consistent tone to an apps.
Slide 17
Slide 17 text
Themes, Colors and Typography
Custom Colors
Custom colors can also be defined using
theme attributes e.g colorPrimaryDark for
the Status Bar, colorPrimary for the App
Bar and colorAccent for FAB.
Slide 18
Slide 18 text
Themes, Colors and Typography
Custom Colors
Slide 19
Slide 19 text
Layout and Animation
Toolbar
Slide 20
Slide 20 text
Layout and Animation
Tabs
Slide 21
Slide 21 text
Layout and Animation
CardView and recyclerView
● build.gradle
dependencies {
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:23.4.0'
compile 'com.android.support:cardview-v7:23.4.0'
compile 'com.android.support:recyclerview-v7:23.4.0'
}
Slide 22
Slide 22 text
Layout and Animation
CardView and recyclerView
Slide 23
Slide 23 text
Vector Drawables
Using Vector assets for images
1.Adding Config to the Gradle File
Build.gradle
// Gradle Plugin 2.0+
android {
defaultConfig {
vectorDrawables.useSupportLibrary = true
}
}
2. Import Vector Assets to Android Studio
Slide 24
Slide 24 text
Page Elements
NavigationDrawer
Slide 25
Slide 25 text
Page Elements
Floating Action Button (FAB)
1. add a FloatingActionButton to the end of the CoordinatorLayout.
FAB
Slide 26
Slide 26 text
Congratulations!
Yeaaaaaaa…...
Yeaaaaaaa…...
Slide 27
Slide 27 text
App DEMO....
Slide 28
Slide 28 text
Tools & resources
Web
Polymer
https://www.polymer-project.org/1.0/
Material Design Lite
https://getmdl.io/
Slide 29
Slide 29 text
Tools & resources
Others
Color Palette
https://material.google.com/style/color.html#color-color-palette
Slide 30
Slide 30 text
Tools & resources
Related CodeLabs
https://codelabs.developers.google.com/codel
abs/material-design-style/index.html?index=.
.%2F..%2Fio2016#0
Slide 31
Slide 31 text
References
Material design guidelines
https://www.google.com/design/spec/material-design/introduction.html
Google Design
https://design.google.com
Slide 32
Slide 32 text
Questions?
Slide 33
Slide 33 text
Go and get Started with
Material Design!
Thompson_nsikak +Nsikak Thompson