WIXLIB

Android UserInterface Design

Addison-Wesley Usability and HCI SeriesVisit informit.com/series/usability for a complete list of available publications.Essential Guides for Human-ComputerInteraction and User Interface DesignersBooks in the HCI and Usability series provide practicing programmers withunique, high-quality references and tutorials on interaction and interfacedesign, a critical component of success for any mobile app or website. The booksin this series bring the full range of methods and options available to meet thechallenge of designing for a natural and intuitive global user experience.Make sure to connect with us!informit.com/socialconnect

Android UserInterface DesignImplementing Material Designfor DevelopersSecond EditionIan G. CliftonNew York Boston Indianapolis San FranciscoToronto Montreal London Munich Paris MadridCape Town Sydney Tokyo Singapore Mexico City

Many of the designations used by manufacturers and sellers to distinguish their productsare claimed as trademarks. Where those designations appear in this book, and thepublisher was aware of a trademark claim, the designations have been printed with initialcapital letters or in all capitals.The author and publisher have taken care in the preparation of this book, but make noexpressed or implied warranty of any kind and assume no responsibility for errors oromissions. No liability is assumed for incidental or consequential damages in connectionwith or arising out of the use of the information or programs contained herein.For information about buying this title in bulk quantities, or for special sales opportunities(which may include electronic versions; custom cover designs; and content particular toyour business, training goals, marketing focus, or branding interests), please contact ourcorporate sales department at corpsales@pearsoned.com or (800) 382-3419.For government sales inquiries, please contact governmentsales@pearsoned.com.For questions about sales outside the U.S., please contact international@pearsoned.com.Visit us on the Web: informit.com/awLibrary of Congress Control Number: 2015950113Copyright 2016 Pearson Education, Inc.All rights reserved. Printed in the United States of America. This publication is protectedby copyright, and permission must be obtained from the publisher prior to any prohibitedreproduction, storage in a retrieval system, or transmission in any form or by any means,electronic, mechanical, photocopying, recording, or likewise. To obtain permission touse material from this work, please submit a written request to Pearson Education, Inc.,Permissions Department, 200 Old Tappan Road, Old Tappan, New Jersey 07675, or youmay fax your request to (201) 236-3290.Google is a registered trademark of Google, Inc.Android, Chromecast, Gmail, Google Maps, Google Play, and Nexus are trademarks ofGoogle, Inc.Amazon and Kindle Fire are registered trademarks of Amazon.com, Inc.Java is a registered trademark of Oracle and/or its affiliates.Illustrator and Photoshop are registered trademarks of Adobe Systems Incorporated.ISBN-13: 978-0-134-19140-9ISBN-10: 0-134-19140-4Text printed in the United States on recycled paper at RR Donnelley in Crawfordsville, Indiana.First printing: November 2015Editor-in-ChiefMark TaubExecutive EditorLaura LewinDevelopment EditorSonglin QiuManaging EditorKristy HartProject EditorNamita GahtoriCopy EditorCenveo PublisherServicesIndexerCenveo PublisherServicesProofreaderCenveo PublisherServicesTechnical ReviewersCameron BangaJoshua JamisonAdam PorterEditorial AssistantOlivia BasegioCover DesignerChuti PrastersithCompositorCenveo PublisherServices

Dedicated to those who care about user experience

This page intentionally left blank

Contents at a GlanceIntroductionPart I1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1The Basics of Android User InterfacesAndroid UI and Material Design. . . . . . . . . . . . . . . . . . . . . . 52 Understanding Views—The UI Building Blocks . . . . . . . . . . . 273Creating Full Layouts With View Groups and Fragments . . . . . 514Adding App Graphics and Resources . . . . . . . . . . . . . . . . . 75Part II The Full Design and Development Process5Starting A New App . . . . . . . . . . . . . . . . . . . . . . . . . . . .1076Prototyping and Developing the App Foundation . . . . . . . . .1297Designing the Visuals . . . . . . . . . . . . . . . . . . . . . . . . . . .1678Applying the Design . . . . . . . . . . . . . . . . . . . . . . . . . . . .1919Polishing with Animations . . . . . . . . . . . . . . . . . . . . . . . .231Part III Advanced Topics for Android User Interfaces10Using Advanced Techniques . . . . . . . . . . . . . . . . . . . . . . .26311Working with the Canvas and Advanced Drawing . . . . . . . . 30312Developing Custom Views . . . . . . . . . . . . . . . . . . . . . . . .33113 Handling Input and Scrolling . . . . . . . . . . . . . . . . . . . . . 349Appendix A Google Play Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . .387Appendix B Common Task Reference . . . . . . . . . . . . . . . . . . . . . . . . 403Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

This page intentionally left blank

ContentsIntroduction.1Audience for This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Organization of This Book . . . . . . . . . . . . . . . . . . . . . . . . . 1How to Use This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2This Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . 2Part I The Basics of Android User Interfaces1Android UI and Material Design. . . . . . . . . . . . . . . . . . . . . . 5A Brief History of Android Design. . . . . . . . . . . . . . . . . . . . . 6Material Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8The Android Design Website . . . . . . . . . . . . . . . . . . . . . . 13Core Principles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14Standard Components . . . . . . . . . . . . . . . . . . . . . . . . . . 20Supporting Multiple Devices . . . . . . . . . . . . . . . . . . . . . . 23Avoiding Painful Mistakes . . . . . . . . . . . . . . . . . . . . . . . . 24Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262Understanding Views—The UI Building Blocks . . . . . . . . . . . 27What Is a View? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Displaying Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Displaying Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Views for Gathering User Input . . . . . . . . . . . . . . . . . . . . . 42Other Notable Views. . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Listening to Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Other Listeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

xContEntS3Creating Full Layouts With View Groups and Fragments . . . . . 51Understanding ViewGroup and the CommonImplementations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Encapsulating View Logic with Fragments . . . . . . . . . . . . . . 64The Support Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744Adding App Graphics and Resources . . . . . . . . . . . . . . . . . 75Introduction to Resources in Android . . . . . . . . . . . . . . . . . 76Resource Qualifiers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Understanding Density . . . . . . . . . . . . . . . . . . . . . . . . . . 81Supported Image Files . . . . . . . . . . . . . . . . . . . . . . . . . . 83Nine-Patch Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84XML Drawables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86Other Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106Part II The Full Design and Development Process5 Starting A New App . . . . . . . . . . . . . . . . . . . . . . . . . . . .107Design Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108Defining Goals. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110High-Level Flow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117Continuing with Content Pieces . . . . . . . . . . . . . . . . . . . 122Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1286Prototyping and Developing the AppFoundation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129Organizing into Activities and Fragments . . . . . . . . . . . . . 130Creating the First Prototype . . . . . . . . . . . . . . . . . . . . . . 131Evaluating the First Prototype . . . . . . . . . . . . . . . . . . . . . 160Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

ContEntS7Designing the Visuals . . . . . . . . . . . . . . . . . . . . . . . . . . .167Wireframes and Graphical Design . . . . . . . . . . . . . . . . . . 168Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Lighting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171Text Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . 178Other Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . 183Designing Step-by-Step. . . . . . . . . . . . . . . . . . . . . . . . . 185Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1898Applying the Design . . . . . . . . . . . . . . . . . . . . . . . . . . . .191Working with the Designer. . . . . . . . . . . . . . . . . . . . . . . 192Slicing the Graphics Assets . . . . . . . . . . . . . . . . . . . . . . . 193Themes and Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199Breaking Comps into Views . . . . . . . . . . . . . . . . . . . . . . 200Developing the Woodworking App . . . . . . . . . . . . . . . . . 201Basic Testing Across Device Types . . . . . . . . . . . . . . . . . . 228Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2299Polishing with Animations . . . . . . . . . . . . . . . . . . . . . . . .231Purpose of Animations . . . . . . . . . . . . . . . . . . . . . . . . . 232View Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232Property Animations. . . . . . . . . . . . . . . . . . . . . . . . . . . 233Property Animation Control . . . . . . . . . . . . . . . . . . . . . . 235ViewPropertyAnimator . . . . . . . . . . . . . . . . . . . . . . . . . 241Animating Form Errors . . . . . . . . . . . . . . . . . . . . . . . . . 242Animating Icons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246Simple Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262xi