Book Image

Learning Material Design

By : Kyle Mew, Nadir Belhaj
Book Image

Learning Material Design

By: Kyle Mew, Nadir Belhaj

Overview of this book

Google's Material Design language has taken the web development and design worlds by storm. Now available on many more platforms than Android, Material Design uses color, light, and movements to not only generate beautiful interfaces, but to provide intuitive navigation for the user. Learning Material Design will teach you the fundamental theories of Material Design using code samples to put these theories into practice. Focusing primarily on Android Studio, you’ll create mobile interfaces using the most widely used and powerful material components, such as sliding drawers and floating action buttons. Each section will introduce the relevant Java classes and APIs required to implement these components. With the rules regarding structure, layout, iconography, and typography covered, we then move into animation and transition, possibly Material Design's most powerful concept, allowing complex hierarchies to be displayed simply and stylishly. With all the basic technologies and concepts mastered, the book concludes by showing you how these skills can be applied to other platforms, in particular web apps, using the powerful Polymer library.

Related Content you might be interested in

Current Title:

Small book image
Learning Material Design
Kyle Mew | Nadir Belhaj
Dec, 2015 | 186 pages
No titles found
Table of Contents (17 chapters)
Learning Material Design
Learning Material Design
Credits
Credits
About the Author
About the Author
About the Reviewer
About the Reviewer
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Material Design
Getting Started with Material Design
Material properties
Setting up a development environment
The material theme
Customizing the material theme
Summary
2
Building a Mobile Layout
Building a Mobile Layout
Activities and layouts
Applying material to older devices
Summary
3
Common Components
Common Components
App bar style and code
Menus and dialogs
Summary
4
Sliding Drawers and Navigation
Sliding Drawers and Navigation
Drawer design
Drawer functionality
Summary
5
Lists, Cards, and Data
Lists, Cards, and Data
Generating lists
Adding list items
Connecting a dataset
Cards
Summary
6
Animations and Transitions
Animations and Transitions
Touch feedback
Revealing and hiding
Transitions
Summary
7
Material on Other Devices
Material on Other Devices
Material TV
Wearable material
Summary
8
Material Web Frameworks
Material Web Frameworks
Desktop layouts
Package management
Materialize
Material Design Lite
Alternative frameworks and libraries
Summary
9
The Materialize Framework
The Materialize Framework
Components
Transitions and motion
Summary
10
Material Design Lite
Material Design Lite
Components
Summary
Index
Index

Components

Materialize comes with a good collection of material components, such as cards and buttons, which we saw in the previous chapter as well as how to set them up. As a reminder, the minimum HTML you will need in your index.html file is as follows:

<!DOCTYPE html>
<head>
<title>Materialize Demo</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
</head>

<body>
   . . .
<script type="text/javascript"
     src="https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script type="text/javascript"
     src="js/materialize.min.js">
</script>
</body>

The markup for these components is intuitive and very simple to follow and allows us to produce material-compliant interfaces in next to no time. One of the most common components on any Web page is item lists.

Lists and badges

Materialize provides the collection class for organizing content into lists. For example, the...

Previous Section
End of Section 2
Next Section