27,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Fachliteratur
- Sprache: Englisch
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.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 185
Veröffentlichungsjahr: 2015
Ähnliche
Table of Contents
Learning Material Design
Learning Material Design
Copyright © 2015 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: December 2015
Production reference: 1181215
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78528-981-1
www.packtpub.com
Credits
Author
Kyle Mew
Reviewer
Will Haering
Commissioning Editor
Ashwin Nair
Acquisition Editors
Vivek Anantharaman
Harsha Bharwani
Content Development Editor
Priyanka Mehta
Technical Editor
Mohita Vyas
Copy Editor
Angad Singh
Project Coordinator
Izzat Contractor
Proofreader
Safis Editing
Indexer
Rekha Nair
Graphics
Abhinash Sahu
Production Coordinator
Melwyn D'sa
Cover Work
Melwyn D'sa
About the Author
Kyle Mew has been programming since the early eighties and has written for several technology websites. He has also written three radio plays and two other books on Android development.
I would like to dedicate this book to Amber and thank her for being a constant inspiration throughout.
About the Reviewer
Will Haering is a self-taught frontend developer, with significant experience in both web technologies and data processing. He has been designing and developing sites and web apps for 5 years, starting as a freelancer and then switching paths to begin working as a client engineer for Symphony Commerce in San Francisco. Earlier in 2015, he participated in a research project on studying the evidence of gravitational waves. He did this by processing NASA's test data using Julia. In 2014, as a member of the Precision Engineering Research Group at the Massachusetts Institute of Technology, Will developed an audio analysis script with industrial and agricultural applications. He is currently completing his senior year of high school at Phillips Exeter Academy. You can find him online at http://www.wch.io/.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.
Preface
Welcome to Learning Material Design, a comprehensive guide to the latest and hottest design philosophy for mobile and web applications. More than just a design language, Material Design represents a powerful shift in how modern digital interfaces look and behave. Based largely on traditional design principles, Material Design brings a tactile look and feel to apps and pages, giving screen elements physical properties such as fluid, realistic motion and the ability to depict a third dimension using shadows.
Covering all major design principles and guidelines and including enough of the technologies and code required to implement them, the book is designed so that you can get started with building your own material interfaces from the very beginning.
All the commonly used material components, such as cards and sliding drawers, are covered in terms of both design guidelines and code structures. This element-specific approach is coupled with details on how Material Design can be applied to interfaces in general, and how to use these guidelines to create material transitions and navigation processes.
Although concentrating largely on mobile interface design and using the powerful Android Studio development environment, the latter part of the book focuses on how the principles learned earlier can be just as easily applied to designs of web and desktop interfaces with a number of helpful and simple-to-use CSS frameworks, particularly Materialize and Material Design Lite.
This book is only the beginning of a journey into what may well become one of the most persistent digital design paradigms we have yet seen. But by the end, you will have learned not only the design theory behind materials, but also enough of technical know-how to put what you have learned into practice and be in a position to create or convert Material Design applications on your own.
What this book covers
Chapter 1, Getting Started with Material Design, introduces some of the basic precepts of Material Design, but concentrates largely on how to set up a development environment and create a simple "Hello World" app. This includes an introduction to the material theme and palette.
Chapter 2, Building a Mobile Layout, is where we concentrate on some fundamental processes in designing an Android interface, such as the content hierarchy and how components are positioned and scaled within it. The second portion of this chapter covers support libraries and how these can help us make Material Design backward compatible.
Chapter 3, Common Components, covers the most frequently used mobile material components, such as app bars, menus, and modal dialogs, along with the creation of action icons for menus.
Chapter 4, Sliding Drawers and Navigation, explains the typical material navigation techniques, in particular, the navigation menu and sliding drawers.
Chapter 5, Lists, Cards, and Data, is where we see how the recycler view can be used to organize data in the form of a list, and how separate fields of mixed media can be applied to the card view widget.
Chapter 6, Animations and Transitions, covers transition from one screen to another, including hide and reveal animations and how components that are shared across screens are animated.
Chapter 7, Material on Other Devices, is where we look at how Material Design is applied to the Android TV and Wear platforms.
Chapter 8, Material Web Frameworks, takes us on a brief tour of one of the most commonly used technologies for applying Material Design to web pages. This is done using ready-made CSS and JavaScript frameworks.
Chapter 9, The Materialize Framework, delves deeper into the Materialize web frameworks, demonstrating how common components, animations, and navigation are achieved.
Chapter 10, Material Design Lite, is the final chapter. It covers the most popular material framework—Material Design Lite. As in the previous chapter, we explore the most commonly used components and features.
What you need for this book
Android Studio and SDK are both open source and free, and instructions on installation and configuration are included in the book.
Who this book is for
This book is ideal for web developers and designers who are interested in implementing Material Design in their mobile and web apps. No prior knowledge or experience of Material Design is required, but some familiarity with procedural languages such as Java and markup languages such as HTML will provide an advantage.
Conventions
In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The Tools directory contains exactly what it says, that is, tools."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
Any command-line input or output is written as follows:
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "You can then open the SDK manager from the menu via Tools | Android | SDK Manager or the matching icon on the main toolbar."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the color images of this book
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from https://www.packtpub.com/sites/default/files/downloads/LearningMaterialDesign_ColoredImages.pdf.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.
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:
Material properties
As mentioned in the introduction, material can be thought of as being bound by physical laws. There are things it can do and things it cannot. It can split apart and heal again, and change color and shape, but it cannot occupy the same space as another sheet of material or rotate around two of its axes. We will be dealing with these properties throughout the book, but it is a good idea to begin with a quick look at the things material can and can't do.
The third dimension is fundamental when it comes to material. This is what gives the user the illusion that they are interacting with something more tangible than a rectangle of light. The illusion is generated by the widening and softening of shadows beneath material that is closer to the user. Material exists in virtual space, but a space that, nevertheless, represents the real dimensions of a phone or tablet. The x axis can be thought of as existing between the top and bottom of the screen, the y axis between the right and left edges, and the z axis confined to the space between the back of the handset and the glass of the screen. It is for this reason that material should not rotate around the x or y axes, as this would break the illusion of a space inside the phone.
The basic laws of the physics of material are outlined, as follows, in the form of a list:
This covers the basic rules of material behavior but we have said nothing of its content. If material can be thought of as smart paper, then its content can only be described as smart ink. The rules governing how ink behaves are a little simpler:
Setting up a development environment
The Android development environment consists mainly of two distinct components: the SDK, which provides the code libraries behind Android and Android Studio, and a powerful code editor that is used for constructing and testing applications for Android phones and tablets, Wear, TV, Auto, Glass, and Cardboard. Both these components can both be downloaded as a single package from http://developer.android.com/sdk/index.html.
Installing Android Studio
The installation is very straightforward. Run the Android Studio bundle and follow the on-screen instructions, installing HAXM hardware acceleration if prompted, and selecting all SDK components, as shown here:
Android Studio is dependent on theJava JDK. If you have not previously installed it, this will be detected while you are installing Android Studio, and you will be prompted to download and install it. If for some reason it does not, it can be found at http://www.oracle.com/technetwork/java/javase/downloads/index.html, from where you should download the latest version.
This is not quite the end of the installation process. There are still some SDK components that we will need to download manually before we can build our first app. As we will see next, this is done using theAndroid SDK Manager.
Configuring the Android SDK
People often refer to
