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