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.
Table of Contents (17 chapters)

Chapter 1. Getting Started with Material Design

Google first announced Material Design at their I/O conference in the summer of 2014, and it has since gone on to create quite a storm among developers and designers alike. Originally a formalization and expansion of the Google Now UI, Material Design has grown (and is still growing) into a comprehensive and systematic set of design philosophies.

Material can be thought of as something like smart paper. Like paper, it has surfaces and edges that reflect light and cast shadows, but unlike paper, material has properties that real paper does not, such as its ability to move, change its shape and size, and merge with other material. Despite this seemingly magical behavior, material should be treated like a physical object with a physicality of its own.

Material can be seen as existing in a three-dimensional space, and it is this that gives its interfaces a reassuring sense of depth and structure. Hierarchies become obvious when it is instantly clear whether an object is above or below another.

Based largely on age-old principles taken from color theory, animation, traditional print design, and physics, Material Design provides a virtual space where developers can use surface and light to create meaningful interfaces and movement to design intuitive user interactions.

This book covers both the design principles and the tools required to create the elegant and responsive interfaces that have made Material Design so popular and successful. The journey begins with the Android SDK and Android Studio, which we will use to build working material UIs for a variety of form factors, ranging from tiny wearable devices to large flat screen TVs. This will provide a solid foundation for the design principles behind the subject, and how mobile interfaces are defined using XML and then brought to life with Java.

With the aspects of design covered, the book concludes by exploring the different guidelines and tools required to build material web apps. There are several subtle differences in the design rules, and the possible absence of a touch-screen on desktop computers requires a different approach to user interaction. More significantly, when building web pages, we will need to work in HTML, and to implement material, we will need a tool called Polymer and its associate, Paper Elements.

With the journey outlined, we will begin by taking a quick look at the physical properties of material, and then we'll dive straight in and produce our first interface. To do this, we will need to download and configure Android Studio and SDK tools, as well as create a device emulator to compile and run our apps on. With our development environment in place, we can then take a look at the material themes available as default on recent Android versions.

In this chapter, you will learn how to:

  • Understand the physical properties of material

  • Install Android Studio

  • Configure the Android SDK

  • Install Google support libraries

  • Create a virtual device

  • Set up a real device for development

  • Create a hello world app in Android Studio

  • Create an Android style with XML

  • Customize the material theme

  • Apply a material palette