Android UI Design

363 Pages·2016·17.722 MB·English

by  Jessica Thornsby

Android UI Design

Plan, design, and build engaging user interfaces for your
Android applications

Jessica Thornsby

BIRMINGHAM - MUMBAI
Android UI Design

Copyright © 2016 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: May 2016
Production reference: 1180516

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78588-742-0
www.packtpub.com
Credits
Author Copy Editor

Jessica Thornsby Yesha Gangani
Reviewer Project Coordinator

Leonardo Risuleo Sanchita Mandal
Commissioning Editor
Proofreader
Edward Gordon
Safis Editing
Acquisition Editor Indexer

Larissa Pinto Rekha Nair

Pratik Shah
Content Development Editor Production Coordinator

Samantha Gonsalves Aparna Bhagat
Technical Editor

Shivani K. Mistry
About the Author
Jessica Thornsby studied poetry, prose, and scriptwriting at Bolton University before
discovering the world of open source and technical writing, and has never looked back
since. Today, she is a technical writer and full-time Android enthusiast residing in sunny
Sheffield, England.
She enjoys writing about rooting and flashing mobile devices, Java, Eclipse, and all things
Android and Google. She is also the co-author of iWork: The Missing Manual.
When not wordsmithing about technology and obsessing over the latest Android
developments, she keeps a blog about her local food scene and writes about looking after
exotic pets. On the rare occasions that she's dragged away from her computer, she enjoys
beer gardens, curry houses, the great British seaside, scary movies, and spending lots of
time with her house rabbits and chinchillas.
I'd like to thank the entire team at Packt Publishing for their support and encouragement on this
project. I also have to thank all my friends and family for putting up with me during the writing
process (and in general!), with special thanks to my parents, Peter and Pauline, and my fiancé, Toby.
Last, but not least, I'd like to thank my menagerie for keeping me company even when deadlines keep
me shackled to my keyboard: my chinchillas Taco, Buca, Churro, and house bunnies Peanut and
Stewart.
About the Reviewer
Leonardo Risuleo is the owner and creative director at Small Screen Design. He is a
designer and developer with several years of experience in mobile, new media, and user
experience. Leonardo is a highly dedicated professional, and he's passionate about what he
does. He started his career back in 2003, and during past few years, he has worked on a
variety of different mobile and embedded platforms for a number of well-known brands
and studios. Leonardo designs, prototypes, and develops mobile applications, games,
widgets, and web sites.

He has had the honor of being Nokia Developer Champion, a recognition and reward
program for top mobile developers worldwide, for 3 years in a row (2008 to 2010). In 2008,
Leonardo founded Small Screen Design (www.smallscreendesign.com), a design and
development studio focused on mobile design and user experience. In 2015, he became
Digital Champion for Squillace, an ambassador for Digital Agenda, to help every European
become digital.
www.PacktPub.com
For support files and downloads related to your book, please visit www.PacktPub.com.
eBooks, discount offers, and more
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.
h t t p s : / / w w w 2 . p a c k t p u b . c o m / b o o k s / s u b s c r i p t i o n / p a c k t l i b
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?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Free access for Packt account holders
Get notified! Find out when new books are published by following @PacktEnterprise on
Twitter or the Packt Enterprise Facebook page.
Table of Contents
Chapter 1: Introducing the Android UI 7
What is a user interface anyway? 8
Is developing UIs for Android really that different from other platforms? 11
What are the characteristics of an effective UI? 12
Why is UI essential for the success of your app? 13
Instant familiarity 13
Easy and enjoyable to use 13
Consistency 14
Preventing user frustration 14
Helping users fix their mistakes 14
Providing a better overall Android experience 15
The UI case study – Google+ 15
The action bar 16
Navigational controls 16
Action buttons 17
The action overflow 18
Floating action button 19
Menus 20
Settings 21
Dialogues 23
Toasts 24
Search 24
Input controls 26
Styles and themes 26
Summary 27
Chapter 2: What Goes into an Effective UI? 28
What is a view? 28
What is a layout? 29
Building your UI – XML or Java? 30
Declaring your UI with XML 30
Declaring your UI programmatically 33
Using both programmatic and XML layouts 34
Deep dive – exploring layouts 35
Defining the size of your layouts 35
A supported keyword 35
A dimension value 36
Setting the layout size programmatically 36
Exploring different layouts 37
Everything you need to know about LinearLayout 37
Everything you need to know about RelativeLayout 39
Relative to the parent container 39
Relative to other elements 41
Aligning with other elements 42
Creating views 43
Assigning the ID attribute 44
Setting a view's size 45
Android gravity and layout gravity 45
Setting the background – working with color 46
Assigning a weight value 49
Adding and customizing view objects 51
TextView 51
Brightening up your text 52
Setting the size of your text 53
Emphasizing your text 53
Setting the typeface 54
How many lines? 55
EditText 55
Controlling keyboard behavior – setting the inputType 57
android:imeOptions 59
Giving the user a hint 60
ImageView 60
Supporting multiple screens 61
Supporting different screen densities 62
Creating density-specific images 64
Adding ImageView 65
Buttons and ImageButtons 66
Creating buttons with text labels 67
Creating buttons with image labels 67
Creating buttons with text and image labels 67
State list resources 68
Summary 70
Chapter 3: Expanding your UI – Fragments, Resources, and Gathering
User Input 71
More resource types 71
[ ii ]
Creating and styling string resources 72
Creating string arrays 73
Defining dimensions in dimens.xml 74
Color state lists 77
Working with 9-patch images 79
How do I create 9-patch images? 81
Registering the user input 83
Handling click events 83
Handling onClick Via Java 83
Handling onClick Via XML 84
Registering the EditText input 84
The example app 85
Working with fragments 89
Why do we need fragments? 90
The fragment life cycle 92
Creating a fragment 93
Fragments and backwards compatibility 94
Creating your fragment class 95
Adding a fragment to your activity declaratively 97
Adding a fragment to an activity at runtime 98
Fragment transactions and the back stack 100
Adding a fragment 101
Removing a fragment 101
Replacing a fragment 101
The multi-window support in Android N 102
How does the multi-window mode work? 103
Getting your app ready for multi-window mode 103
Testing your app's multi-window support 104
Picture-by-picture mode 105
Summary 107
Chapter 4: Getting Started with Material Design 108
The Material Design ethos 109
Case study – Hangouts 110
Case study – Google Calendar 111
Case study – Google Maps 112
Getting started with Material Design 113
Applying the Material theme to your app 113
Choosing your color scheme 116
Backwards compatibility 116
Creating a sense of depth 117
[ iii ]
Creating a Material Design structure 119
Floating action buttons 119
Bottom sheets 121
CardView 123
Lists and RecyclerView 126
Animations and transitions 127
Reinforcing the Material Design illusion 128
Providing the user with a visual feedback 129
Animations – a word of warning 129
The finishing touches 129
Designing your product icon 130
System icons 131
Typography and writing 132
Typefaces 132
Text opacity 132
Writing guidelines 133
Summary 134
Chapter 5: Turning Your Bright Idea into a Detailed Sketch 135
Brainstorming – taking advantage of mobile hardware 136
Touch and gestures 136
GPS 137
Vibration 137
Audio input/output 137
Interacting with other devices 138
The difference between UX and UI 139
Brainstorming your app 139
Writing a concept 140
Creating an ultimate features list 140
Identifying your app's primary task 140
Is this application right for mobile? 141
Do you have the budget? 141
Planning your app 142
Identifying your target audience 142
Creating a persona 143
The mobile persona 145
Creating use cases 146
Deciding on a feature list 147
Taking a critical look at your target audience 148
Does your target audience need a mobile app? 148
Is your target audience on Android? 148
[ iv ]