Pro Android UI
Copyright © 2014 by Wallace Jackson
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its current version, and permission for use must always be obtained from Springer. Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under the respective Copyright Law.
ISBN-13 (pbk): 978-1-4302-4986-3
ISBN-13 (electronic): 978-1-4302-4987-0
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The images of the Android Robot (01 / Android Robot) are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License. Android and all Android and Google-based marks are trademarks or registered trademarks of Google, Inc., in the U.S. and other countries. Apress Media, L.L.C. is not affiliated with Google, Inc., and this book was written without endorsement from Google, Inc.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
President and Publisher: Paul ManningLead Editor: Steve AnglinDevelopment Editors: James Markham, Chris Nelson, Anne Marie WalkerTechnical Reviewer: Chád DarbyEditorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Louise Corrigan,
James T. DeWolf, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Steve Weiss
Coordinating Editor: Anamika PanchooCopy Editor: Linda SeifertCompositor: SPi GlobalIndexer: SPi GlobalArtist: SPi GlobalCover Designer: Anna Ishchenko
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail [email protected], or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary materials referenced by the author in this text is available to readers at www.apress.com. For detailed information about how to locate your book’s source code, go to www.apress.com/source-code/.
This book is dedicated to everyone in the ever-expanding open source community who is working diligently to make professional level software and new media development tools
available for everybody to use to achieve their dreams and goals. Last, but certainly not least, to my loving family, life-long friends, and rancher neighbors for all their help, assistance, laughs, and those
fabulous late night BBQs.
v
Contents at a Glance
About the Author ��������������������������������������������������������������������������������������������������������������� xix
About the Technical Reviewer ������������������������������������������������������������������������������������������� xxi
Acknowledgments ����������������������������������������������������������������������������������������������������������� xxiii
Introduction ���������������������������������������������������������������������������������������������������������������������� xxv
Part 1: Introduction to the Core Classes for Android UI Design: ■Development Tools, Layout Containers and Widgets ������������������������������������ 1
Chapter 1: Android UI Design Tools: Setting Up Your Android Development System ■ ���������3
Chapter 2: Android UI Layouts: Layout Containers and the ViewGroup Class ■ �����������������29
Chapter 3: Android UI Widgets: User Interface Widgets and the View Class ■ �������������������61
Part 2: Introduction to Android Menu Classes for UI Design: ■OptionsMenu, ContextMenu, PopupMenu and ActionBar ��������������������������� 95
Chapter 4: Android UI Options Menus: OptionsMenu Class and the Action Bar ■ ��������������97
Chapter 5: Android UI Local Menus: The ContextMenu Class and PopupMenu Class ■ ����131
Chapter 6: Android UI Action Bar: Advanced Action Bar Design and ■ActionBar Class �������������������������������������������������������������������������������������������������������������153
vi Contents at a Glance
Part 3: Android UI Design: Layout Considerations, Android OS Design ■Concepts and Android UI Design Guidelines �������������������������������������������� 191
Chapter 7: Android UI Design Considerations: Styles, Screen Density ■Targets and New Media Formats �����������������������������������������������������������������������������������193
Chapter 8: Android UI Design Concepts: Wire-framing & UI Layout Design Patterns ■ ����225
Chapter 9: Android UI Layout Conventions, Differences and Approaches ■ ���������������������251
Chapter 10: Android UI Theme Design and Digital Media Concepts ■ ������������������������������273
Part 4: Basic Android UI Design: Basic Layout Containers: ■FrameLayout, LinearLayout, RelativeLayout and GridLayout ������������������ 309
Chapter 11: Android’s FrameLayout Class: Using Digital Video in Your UI Design ■ ��������311
Chapter 12: Android’s LinearLayout Class: Horizontal and Vertical UI Design ■ ��������������349
Chapter 13: Android’s RelativeLayout Class: UI Design Using One Layout Container ■ ����387
Chapter 14: Android’s GridLayout Class: UI Design Using a Grid-based Layout ■ ������������411
Part 5: Advanced Android UI Design: Advanced Layout Containers: ■DrawerLayout, SlidingPane, ViewPager, PagerTitleStrip and PagerTabStrip ������������������������������������������������������������������������������������������� 443
Chapter 15: Android’s DrawerLayout Class: Using a UI Drawer in Your UI Design ■ ��������445
Chapter 16: Android’s SlidingPaneLayout Class: Using SlidingPanes in ■Your UI Design ���������������������������������������������������������������������������������������������������������������473
Chapter 17: Android’s ViewPager Class: Using ViewPager to Navigate Horizontally ■ ����497
Chapter 18: Android’s PagerTitleStrip and PagerTabStrip: ViewPager Navigation UI ■ ����517
Index ���������������������������������������������������������������������������������������������������������������������������������541
vii
Contents
About the Author ��������������������������������������������������������������������������������������������������������������� xix
About the Technical Reviewer ������������������������������������������������������������������������������������������� xxi
Acknowledgments ����������������������������������������������������������������������������������������������������������� xxiii
Introduction ���������������������������������������������������������������������������������������������������������������������� xxv
Part 1: Introduction to the Core Classes for Android UI Design: ■Development Tools, Layout Containers and Widgets ������������������������������������ 1
Chapter 1: Android UI Design Tools: Setting Up Your Android Development System ■ ���������3
Java 6: Download and Install the Foundation for Android �������������������������������������������������������������4
Android ADT Bundle: Find and Download Android’s IDE ����������������������������������������������������������������7
Android ADT Bundle: Installing the Android IDE �����������������������������������������������������������������������������9
Android ADT Bundle: Launch the IDE and Update the ADT ����������������������������������������������������������12
UI Wireframing Tool: Downloading and Installing Pencil �������������������������������������������������������������17
Digital Image Editing: Download and Install GIMP 2�8�10 ������������������������������������������������������������20
3D Modeling and Animation: Download and Install Blender ��������������������������������������������������������22
Digital Audio Editing: Downl oad and Install Audacity 2�0�5 ��������������������������������������������������������23
Digital Video Editing: Download and Install Lightworks 11�5 ������������������������������������������������������26
Summary �������������������������������������������������������������������������������������������������������������������������������������28
viii Contents
Chapter 2: Android UI Layouts: Layout Containers and the ViewGroup Class ■ �����������������29
Layout Containers: Using XML for Tag-based UI Design ��������������������������������������������������������������30
Using Parameters: Refining and Customizing the UI Tags �����������������������������������������������������������31
Android ViewGroup: Our Layout Container’s Superclass �������������������������������������������������������������32
ViewGroup�LayoutParams: Nested Class Controls Layout �����������������������������������������������������������33
ViewGroup�MarginLayoutParams: Nested Class for Margin ��������������������������������������������������������33
The Difference Between Margins and Padding Parameters ��������������������������������������������������������34
Animating Your ViewGroup: LayoutAnimationController ��������������������������������������������������������������35
Create a UserInterface Project and pro�android�ui Package �������������������������������������������������������36
The New Android Application Dialog �������������������������������������������������������������������������������������������������������������������� 37
New Android Application – Configure Project Dialog ������������������������������������������������������������������������������������������� 39
New Android Application – Configure Launcher Icon ������������������������������������������������������������������������������������������ 40
New Android Application – Create Activity Dialog ����������������������������������������������������������������������������������������������� 41
New Android Application – Blank Activity Dialog ������������������������������������������������������������������������������������������������� 42
ViewGroup XML Attributes: Configuring the RelativeLayout ��������������������������������������������������������43
View XML Attributes: Configuring the TextView UI Widget �����������������������������������������������������������47
View Padding Parameter: Add Space Inside the Container ���������������������������������������������������������49
The AnalogClock Widget: Adding a View to the ViewGroup ���������������������������������������������������������51
Using the Values Folder: Finish Your UI Design Using XML ����������������������������������������������������������56
Summary �������������������������������������������������������������������������������������������������������������������������������������59
Chapter 3: Android UI Widgets: User Interface Widgets and the View Class ■ �������������������61
The Android View Class: The Superclass for UI Widgets ��������������������������������������������������������������62
Android View Direct Subclasses: Key Widgets and Utilities ��������������������������������������������������������63
Using View Properties: Important Parameters �����������������������������������������������������������������������������64
Focus of a View: Which UI Widget has the User’s Attention���������������������������������������������������������65
View Listeners: Making a UI Widget Respond to the User �����������������������������������������������������������66
UI Layout Creation: Using the setContentView() Method �������������������������������������������������������������68
Adding a Button UI Widget to Our RelativeLayout Container �������������������������������������������������������69
ixContents
Eclipse ADT Problems Tab: Debugging XML Errors in ADT ����������������������������������������������������������71
Relative Positioning: Adding the UI Button to the Hierarchy ��������������������������������������������������������74
String Constants: Adding a <string> Tag for Our UI Button ���������������������������������������������������������76
Event Handling: Adding an OnClickListener in Java Code �����������������������������������������������������������77
Controlling AnalogClock Visibility: �setVisibility() Method ������������������������������������������������������������82
Install and Configure an Emulator: Testing Our Java Code ����������������������������������������������������������84
Completing the UI Design Simulation: Adding Two Buttons ���������������������������������������������������������88
Summary �������������������������������������������������������������������������������������������������������������������������������������93
Part 2: Introduction to Android Menu Classes for UI Design: ■OptionsMenu, ContextMenu, PopupMenu and ActionBar ��������������������������� 95
Chapter 4: Android UI Options Menus: OptionsMenu Class and the Action Bar ■ ��������������97
Android Menu Class: A Public Interface for Making Menus ���������������������������������������������������������98
Menus for Android User Interface Design: An Overview ��������������������������������������������������������������98
The Options Menu ������������������������������������������������������������������������������������������������������������������������������������������������ 99
The Context Menu ������������������������������������������������������������������������������������������������������������������������������������������������ 99
The Popup Menu ������������������������������������������������������������������������������������������������������������������������������������������������ 100
Using XML to Define a Menu: <menu> and <item> Tags ���������������������������������������������������������100
Defining the Menu Attributes: Using Child Tag Parameters �������������������������������������������������������102
Options Menu Design: Using the main�xml Menu Definition �����������������������������������������������������103
Customizing Our OptionsMenu: Adding String Constants ����������������������������������������������������������107
Customizing Our OptionsMenu: Editing the Parameters �����������������������������������������������������������108
Expanding Our OptionsMenu: Adding Six More MenuItems ������������������������������������������������������110
Basic Digital Imaging with GIMP: Creating Our Menu Icons ������������������������������������������������������111
Setting a Target Emulator: The Run Configurations Dialog ��������������������������������������������������������117
Testing Our OptionsMenu: Using Switch Orientation Mode �������������������������������������������������������118
OptionsMenu Event Handling: onOptionsItemSelected( ) ����������������������������������������������������������120
Summary �����������������������������������������������������������������������������������������������������������������������������������129
x Contents
Chapter 5: Android UI Local Menus: The ContextMenu Class and PopupMenu Class ■ ����131
ContextMenu Overview: The ContextMenu Public Interface ������������������������������������������������������132
ContextMenu Methods: How to Implement a ContextMenu ������������������������������������������������������133
ContextMenu Event Handling via onContextItemSelected( ) ������������������������������������������������������134
Creating a ContextMenu for Our UserInterface Application �������������������������������������������������������135
String Constants for Our ContextMenu: Using a <string> Tag ��������������������������������������������������������������������������� 137
Creating an onCreateContextMenu( ) Method and Inflating the ContextMenu ��������������������������������������������������� 137
Registering Our ContextMenu Using registerForContextMenu( )������������������������������������������������������������������������ 138
Creating an onContextItemSelected( ) Method to Handle MenuItem Selection ������������������������������������������������� 139
Android’s PopupMenu Class: A UI Widget Localized Menu ��������������������������������������������������������143
Creating a PopupMenu UI for the UserInterface Application �����������������������������������������������������144
Defining Our PopupMenu MenuItem Objects Using XML Markup ���������������������������������������������������������������������� 144
Instantiating Our TextView UI Widget Object for Use with a PopupMenu����������������������������������������������������������� 146
Upgrading Our Application API Level Support to Level 11 ��������������������������������������������������������������������������������� 148
Instantiating a PopupMenu Inside an OnClickListener( ) ������������������������������������������������������������������������������������ 149
Test a PopupMenu in Android’s AVD Nexus One Emulator ��������������������������������������������������������������������������������� 151
Summary �����������������������������������������������������������������������������������������������������������������������������������152
Chapter 6: Android UI Action Bar: Advanced Action Bar Design and ActionBar Class ■ ���153
ActionBar Components ��������������������������������������������������������������������������������������������������������������154
The ActionBar Navigation Modes ����������������������������������������������������������������������������������������������154
The Android ActionBar Class �����������������������������������������������������������������������������������������������������155
Creating an XML Foundation for ActionBar Tabs: Layouts ���������������������������������������������������������155
Creating a Java Foundation for ActionBar Tabs: Fragments ������������������������������������������������������160
Android’s LayoutInflater Class ���������������������������������������������������������������������������������������������������164
Using LayoutInflater ������������������������������������������������������������������������������������������������������������������165
clockTabListener: A Private Class Implements TabListener �������������������������������������������������������165
The FragmentTransaction Class: �����������������������������������������������������������������������������������������������170
Using FragmentTransaction �������������������������������������������������������������������������������������������������������171
The FragmentTransaction Class ������������������������������������������������������������������������������������������������175
Summary �����������������������������������������������������������������������������������������������������������������������������������190
xiContents
Part 3: Android UI Design: Layout Considerations, Android OS Design ■Concepts and Android UI Design Guidelines �������������������������������������������� 191 Chapter 7: Android UI Design Considerations: Styles, Screen Density ■Targets and New Media Formats �����������������������������������������������������������������������������������193
Android Media Formats: Digital Images and Digital Video���������������������������������������������������������194
The Terminology of Digital Image and Digital Video Color ���������������������������������������������������������195
Digital Image Compression: Concepts and Terminology �����������������������������������������������������������196
Sound for Android: Digital Audio Codecs and Formats ��������������������������������������������������������������197
The Terminology Behind Digital Audio and Sound Design ���������������������������������������������������������199
Sampling Sound ������������������������������������������������������������������������������������������������������������������������������������������������ 200
Digital Video Compression: 4D Concepts and Terminology �������������������������������������������������������201
Define a UI Screen Look and Feel: An Introduction to Styles �����������������������������������������������������202
Creating a Style for Our UserInterface Application Clocks ��������������������������������������������������������203
Using Digital Images and Alpha Channels: A New Media UI ������������������������������������������������������209
Using GIMP 2�8�10 with Android: Compositing Two Images ������������������������������������������������������214
Creating Resolution Density Image Assets for All Devices ��������������������������������������������������������219
Summary �����������������������������������������������������������������������������������������������������������������������������������223
Chapter 8: Android UI Design Concepts: Wire-framing & UI Layout Design Patterns ■ ����225
Prototyping the UI Design: Wire-framing Using Pencil 2�0�5 ����������������������������������������������������226
Setting Up a Pencil Working Environment for Android OS ��������������������������������������������������������������������������������� 226
Replicating Our ActionBar UI Design Using Pencil 2�0�5 ������������������������������������������������������������������������������������ 228
Adding the Application Icon and Title to the ActionBar �������������������������������������������������������������������������������������� 231
Prototyping Your Landscape UI Design Using Pencil 2�0�5 ��������������������������������������������������������236
Rescaling the UI Design in Pencil to Landscape ������������������������������������������������������������������������������������������������ 237
Android UI Design Is Complex: The Many Considerations ���������������������������������������������������������238
Basic Android UI Design Rules: Conforming to Android UI���������������������������������������������������������240
Android UI Screen Navigation: Primary Gestures Used in Android ��������������������������������������������241
Advanced UI Navigation Classes: Navigation Drawer or Swipe View ����������������������������������������242
Android Intra-Application Navigation: The Difference Between Up and Back ���������������������������243
Allowing Users to Configure Your Apps: Settings and Help �������������������������������������������������������244
xii Contents
Feedback in UI Design: Notification and Confirmation ��������������������������������������������������������������244
Branding in UI Design: Writing Style, Fonts, and Icons ��������������������������������������������������������������245
UI Design Patterns: Grouping Devices by Product Genres ���������������������������������������������������������246
UI Design Patterns: Why Different Layouts Are Necessary ��������������������������������������������������������247
UI Design for Backward Compatibility: Android 2, 3, and 4 �������������������������������������������������������248
Android UI Design Principles: Exciting, Simple, and Personal ���������������������������������������������������249
Summary �����������������������������������������������������������������������������������������������������������������������������������250
Chapter 9: Android UI Layout Conventions, Differences and Approaches ■ ���������������������251
UI Layout Spacing: The 48 DIP User Interface Layout Rule �������������������������������������������������������252
UI Layout Panes: Single Pane Versus Multi-Pane Layouts ���������������������������������������������������������252
UI Layout Compound View Types: Orientation Changes �������������������������������������������������������������252
Auto-Scaling and Positioning UI Design: Layout Constants �������������������������������������������������������253
Design UI Elements Relative to Each Other: RelativeLayout ������������������������������������������������������254
Using Multiple UI Layout Definitions: Resource Qualifiers ���������������������������������������������������������255
Defining the Same Layout More Than Once: Layout Aliases ������������������������������������������������������������������������������ 255
Pre-Android 3�2 Resource Qualifiers: Small, Large, XLarge ������������������������������������������������������������������������������� 256
Post-Android 3�2 Resource Qualifiers: Screen Size in DIP ��������������������������������������������������������������������������������� 257
App Screen Size Support: Declaring Via AndroidManifest ��������������������������������������������������������������������������������� 259
Creating Morphable UI Designs: Using Resource Qualifiers ������������������������������������������������������259
AnalogClock Graphics: Adding a Button to Our UI Design ���������������������������������������������������������������������������������� 260
Creating Multiple Button Labels: Adding String Constants �������������������������������������������������������������������������������� 262
Creating Multiple Button Elements: Using RelativeLayout ��������������������������������������������������������������������������������� 263
Create a Resource Qualifier Folder and Landscape Layout ������������������������������������������������������������������������������� 266
Summary �����������������������������������������������������������������������������������������������������������������������������������271
Chapter 10: Android UI Theme Design and Digital Media Concepts ■ ������������������������������273
Introduction to Themes: Styling an Entire App or Activity ����������������������������������������������������������274
Applying Application-wide Theme: The <application> Tag �������������������������������������������������������275
Customizing the Theme: Creating a Grey Color ActionBar ���������������������������������������������������������279
Customizing the Theme: Creating Red Title Text ������������������������������������������������������������������������������������������������ 281
xiiiContents
Applying an Activity-wide Theme: Using <activity> Tags ����������������������������������������������������������283
Android Digital Image Formats: PNG8, PNG24, PNG32, JPEG, GIF, WebP �����������������������������������283
Digital Image Resolution: Pixel Arrays and Aspect Ratios ��������������������������������������������������������������������������������� 284
Digital Image Color Values: Color Theory and Color Depth ��������������������������������������������������������285
Image Compositing: Alpha Channels and Blending Modes �������������������������������������������������������286
Represent Color or Alpha in Code: Hexadecimal Notation ���������������������������������������������������������287
Digital Image and UI Masking: Alpha Channel UI Compositing ��������������������������������������������������288
Achieving Smooth Edges in a Design: Using Anti-Aliasing ��������������������������������������������������������289
Digital Image Optimization: Compression and Dithering �����������������������������������������������������������290
Digital Image Resolution and Color Depth ��������������������������������������������������������������������������������������������������������� 290
Dithering ������������������������������������������������������������������������������������������������������������������������������������������������������������ 291
Alpha Channel ���������������������������������������������������������������������������������������������������������������������������������������������������� 292
Creating Our World Clock Image Asset: GIMP Compositing �������������������������������������������������������293
Creating Our Golden Hoop Clock: Shifting the Hue in GIMP�������������������������������������������������������295
Implementing AnalogClock UI in Java Code: Finishing Up! �������������������������������������������������������297
Screen Size Resource Qualifiers: An AnalogClock in Space ������������������������������������������������������300
Summary �����������������������������������������������������������������������������������������������������������������������������������308
Part 4: Basic Android UI Design: Basic Layout Containers: ■FrameLayout, LinearLayout, RelativeLayout and GridLayout ������������������ 309
Chapter 11: Android’s FrameLayout Class: Using Digital Video in Your UI Design ■ ��������311
Android’s FrameLayout Class: Framing Individual Content �������������������������������������������������������312
The FrameLayout�LayoutParams Nested Class: Gravity ������������������������������������������������������������������������������������ 313
Android’s VideoView Class: Using Digital Video in a Frame �������������������������������������������������������315
An Android Video Lifecycle: Eight Video Playback Stages ��������������������������������������������������������������������������������� 316
Android’s MediaPlayer Class: The Video Playback Engine���������������������������������������������������������317
The MediaController Class: Controlling Video Playback ������������������������������������������������������������318
A UserInterface App SplashScreen: Using a FrameLayout �������������������������������������������������������������������������������� 320
Android’s URI Class: Referencing Data in an Android App ��������������������������������������������������������������������������������� 322
Using the Uri�Parse( ) Method: Feeding Our VideoView Data ����������������������������������������������������������������������������� 323
Core Digital Video Concepts: Frames, Frame Rate, or FPS �������������������������������������������������������������������������������� 324
xiv Contents
Digital Video in Android: MPEG4 H�264 and WebM Format �������������������������������������������������������������������������������� 325
Digital Video Compression: Bit-Rate, Streams, SD and HD �������������������������������������������������������������������������������� 326
Digital Video Compression: Using Codecs and Settings ������������������������������������������������������������������������������������ 327
Creating Digital Video Content: Using Terragen3 Software �������������������������������������������������������������������������������� 329
Creating an Uncompressed AVI Format: Using VirtualDub ��������������������������������������������������������������������������������� 331
Applying Video Compression: Using Sorenson Squeeze ������������������������������������������������������������������������������������ 334
Editing Your Squeeze Pro Presets ���������������������������������������������������������������������������������������������������������������������� 337
Starting Video Playback: Testing the VideoView Java Code ������������������������������������������������������������������������������� 340
Looping Video in Android: Using an OnPreparedListener( ) �������������������������������������������������������������������������������� 344
Stream Digital Video in Android: Use an HTTP URL in URI ��������������������������������������������������������������������������������� 345
Implement a Media Transport UI: Using a MediaController �������������������������������������������������������������������������������� 346
Summary �����������������������������������������������������������������������������������������������������������������������������������348
Chapter 12: Android’s LinearLayout Class: Horizontal and Vertical UI Design ■ ��������������349
LinearLayout Class: Android’s Most Used UI Class ��������������������������������������������������������������������350
The LinearLayout Class: Horizontal or Vertical UI Design ���������������������������������������������������������������������������������� 350
UI Element Spacing in LinearLayout: Using Layout Weight �������������������������������������������������������������������������������� 351
LinearLayout�LayoutParams Nested Class: Layout Weight �������������������������������������������������������������������������������� 352
ImageButton Class: Create Custom Button Graphics ����������������������������������������������������������������352
Android ImageButton Class: Multi-State Graphical Buttons ������������������������������������������������������������������������������ 352
ImageButton States: Normal, Pressed, Focused, and Hovered �������������������������������������������������������������������������� 353
Creating a UserInterface Menu Structure: UI Layouts Menu �����������������������������������������������������354
Using GIMP Digital Imaging Software for UI Design ������������������������������������������������������������������361
Creating Multi-State ImageButton Assets: Using GIMP 2�8�10 �������������������������������������������������������������������������� 361
Creating Multi-State ImageButtons: Using a <selector> tag ����������������������������������������������������������������������������� 366
Creating a LinearLayout UI Design: Using <LinearLayout> ������������������������������������������������������������������������������� 368
Inflating the LinearLayout UI Design: Coding LinearActivity ������������������������������������������������������������������������������ 373
Nesting UI Layout Containers for Advanced Design ������������������������������������������������������������������376
Complex LinearLayouts: Nesting LinearLayout Containers �������������������������������������������������������������������������������� 376
Three Deep LinearLayouts: Nesting Nested LinearLayouts ������������������������������������������������������������������������������� 378
Making the LinearLayout Functional: Java Event Handling ������������������������������������������������������������������������������� 382
Summary �����������������������������������������������������������������������������������������������������������������������������������385
xvContents
Chapter 13: Android’s RelativeLayout Class: UI Design Using One Layout Container ■ ����387
The RelativeLayout Class: UI Design Using Your Relatives ��������������������������������������������������������388
The RelativeLayout�LayoutParams Nested Class: UI Design ������������������������������������������������������������������������������ 389
Adding RelativeLayout to the UserInterface Menu Structure����������������������������������������������������������������������������� 391
Porting a LinearLayout Design to a RelativeLayout Design ������������������������������������������������������������������������������� 395
Positioning UI Designs Using RelativeLayout Position Tags ������������������������������������������������������������������������������� 398
Aligning the UI Design Using RelativeLayout Alignment ������������������������������������������������������������������������������������ 401
Margin Aligning a UI Design Using the Anchor UI Element ��������������������������������������������������������403
Using a MarginTop Parameter to Center Your Planet Names ����������������������������������������������������������������������������� 404
Balancing Your RelativeLayout UI Design by Tweaking Parameters ������������������������������������������������������������������ 405
Summary �����������������������������������������������������������������������������������������������������������������������������������408
Chapter 14: Android’s GridLayout Class: UI Design Using a Grid-based Layout ■ ������������411
The GridLayout Class: UI Design Using a Grid ���������������������������������������������������������������������������412
Using the RowSpec and ColumnSpec Parameters �������������������������������������������������������������������������������������������� 412
About GridLayout Locations, Flexibility, Space, and Gravity ������������������������������������������������������������������������������� 413
Using Visibility with the GridLayout Class: Using GONE ������������������������������������������������������������������������������������� 414
Shortcomings of GridLayout Class: No Weight Parameter ��������������������������������������������������������������������������������� 414
Layout Parameters in GridLayout: Nested Classes ��������������������������������������������������������������������415
The GridLayout�LayoutParams Nested Class: Layout Parameters ��������������������������������������������������������������������� 415
GridLayout�Alignment Nested Class: Alignment Constants �������������������������������������������������������������������������������� 417
GridLayout�Spec Nested Class: Horizontal or Vertical Spec ������������������������������������������������������������������������������� 418
The Many GridLayout Class Parameters: Default Settings �������������������������������������������������������������������������������� 418
Implementing GridLayout in the UserInterface App �������������������������������������������������������������������419
Adding GridLayout to the UserInterface Menu Structure ����������������������������������������������������������������������������������� 419
Defining The GridLayout: Foundation for a Grid UI Design ��������������������������������������������������������������������������������� 422
Adding More Planets and Information: Upgrading strings�xml �������������������������������������������������������������������������� 425
Interacting with GridLayout UI via Java in GridActivity�java ������������������������������������������������������������������������������� 427
Using Gravity Parameters to Control GridLayout Positioning ����������������������������������������������������������������������������� 428
Using a Column Span Feature to Add Center TextView Area������������������������������������������������������������������������������ 430
xvi Contents
Adding the Java Code to Make Your GridLayout Interactive ������������������������������������������������������������������������������ 435
Adding New Media Elements and Compositing to Your Grid UI ������������������������������������������������������������������������� 439
Summary �����������������������������������������������������������������������������������������������������������������������������������442
Part 5: Advanced Android UI Design: Advanced Layout Containers: ■DrawerLayout, SlidingPane, ViewPager, PagerTitleStrip and PagerTabStrip ������������������������������������������������������������������������������������������� 443
Chapter 15: Android’s DrawerLayout Class: Using a UI Drawer in Your UI Design ■ ��������445
The DrawerLayout Class: Designing Using a Retractable UI �����������������������������������������������������446
Android Classes Used with DrawerLayout ��������������������������������������������������������������������������������447
The Android ListView Class: UI Design with Selection Lists ������������������������������������������������������������������������������ 447
Android’s AbsListView Class: Base Class for Virtual Lists���������������������������������������������������������������������������������� 448
The Android AdapterView Class: Using Array-based Views ������������������������������������������������������������������������������� 449
The Android Adapter Interface: Using Array-based Views ��������������������������������������������������������������������������������� 450
Creating a DrawerLayout Activity for Your UserInterface App ���������������������������������������������������450
Defining DrawerLayout: Creating a UI Drawer XML Definition �������������������������������������������������������������������������� 450
Building Out Your DrawerActivity Java Activity Subclass ���������������������������������������������������������������������������������� 452
Adding ListView Event Handling: Making the UI Functional ������������������������������������������������������������������������������ 459
Adding <string> Constants for Planet Mars: More Planet Info �������������������������������������������������������������������������� 462
Adding Auto-Drawer Retraction: The closeDrawer( ) Method����������������������������������������������������������������������������� 464
Refining the DrawerLayout in Your DrawerActivity Class ���������������������������������������������������������������������������������� 465
Changing ImageView and Backgrounds for Each ListView ������������������������������������������������������������������������������� 469
Summary �����������������������������������������������������������������������������������������������������������������������������������472
Chapter 16: Android’s SlidingPaneLayout Class: Using SlidingPanes in ■Your UI Design ���������������������������������������������������������������������������������������������������������������473
SlidingPaneLayout Class: UI Design Across Device Types ���������������������������������������������������������473
The SlidingPaneLayout Class Hierarchy ������������������������������������������������������������������������������������������������������������ 474
Optimal UI Design Usage for a SlidingPaneLayout Class ����������������������������������������������������������������������������������� 474
Using a Weight Parameter with Your SlidingPaneLayout ����������������������������������������������������������������������������������� 475
Exploring the Three SlidingPaneLayout Nested Classes ������������������������������������������������������������������������������������ 476
xviiContents
Adding a SlidingPaneLayout to Your UserInterface App ������������������������������������������������������������476
Defining a SlidingPaneLayout: Code a SlidingPane UI in XML ��������������������������������������������������������������������������� 476
Creating a SlidingPaneActivity Subclass to Launch Your UI ������������������������������������������������������������������������������ 481
Adding SlidingPaneActivity Class to the Android Manifest �������������������������������������������������������������������������������� 482
Tweaking Your SlidingPaneLayout UI Design Layout Width ������������������������������������������������������������������������������� 484
Compositing Imagery in Your SlidingPaneLayout UI Design ������������������������������������������������������������������������������ 485
Using Multiple Images in the SlidingPaneLayout UI Design ������������������������������������������������������������������������������ 486
Making the SlidingPaneLayout Design Interactive Using Java �������������������������������������������������������������������������� 488
Testing the SlidingPaneLayout Using a Different Emulator ������������������������������������������������������������������������������� 493
Summary �����������������������������������������������������������������������������������������������������������������������������������496
Chapter 17: Android’s ViewPager Class: Using ViewPager to Navigate Horizontally ■ ����497
The ViewPager Class: Horizontal Sliding Screen UI Design �������������������������������������������������������498
ViewPager�LayoutParams Nested Class: Layout Attributes�������������������������������������������������������������������������������� 499
The PagerAdapter Class: Manage an Array of ViewPages ��������������������������������������������������������������������������������� 500
Define a ViewPaging Layout: Coding Multi-Pane UIs in XML �����������������������������������������������������504
Add a ViewPagingActivity Class to Your MainActivity Menu ������������������������������������������������������505
Configuring AndroidManifest�xml ���������������������������������������������������������������������������������������������������������������������� 507
Finish Defining Planet UI Pane: Adding Four ImageButtons ������������������������������������������������������507
Create a ViewPagingActivity Class to Swipe Space Images ������������������������������������������������������509
Adding ViewPagerAdapter Class to the ViewPagingActivity ������������������������������������������������������511
Adding the getCount( ) Method �������������������������������������������������������������������������������������������������������������������������� 511
Adding the �instantiateItem( ) Method ���������������������������������������������������������������������������������������������������������������� 512
Adding the �destroyItem( ) Method ��������������������������������������������������������������������������������������������������������������������� 513
Adding the �isViewFromObject( ) Method ����������������������������������������������������������������������������������������������������������� 514
Adding the public Parcelable �saveState( ) Method ������������������������������������������������������������������������������������������ 515
Adding �restoreState( ), �startUpdate( ), and �finishUpdate( ) ������������������������������������������������������������������������������ 515
Testing Your Galaxy Digital Image Asset Paging UI Interface ����������������������������������������������������515
Summary �����������������������������������������������������������������������������������������������������������������������������������516
xviii Contents
Chapter 18: Android’s PagerTitleStrip and PagerTabStrip: ViewPager Navigation UI ■ ����517
The PagerTitleStrip Class: Horizontal Sliding Screen Titles �������������������������������������������������������518
Loading the PagerTitleStrip Data: Create a String[ ] Array �������������������������������������������������������������������������������� 519
Calling the PagerTitleStrip Layout: �getPageTitle( ) Method ������������������������������������������������������������������������������� 520
Define a PagerTitleStrip Layout: Coding TitleStrips in XML ������������������������������������������������������������������������������� 522
Testing Your ViewPagingActivity Class with PagerTitleStrip ������������������������������������������������������������������������������ 523
Configuring the PagerTitleStrip: Using Java Methods ��������������������������������������������������������������������������������������� 524
The PagerTabStrip Class: Horizontal Sliding Screen Tabs ���������������������������������������������������������529
Morph a PagerTitleStrip UI into a PagerTabStrip UI Design ������������������������������������������������������������������������������� 530
Using Image Compositing in Your PagerTabStrip UI Design������������������������������������������������������������������������������� 537
Summary �����������������������������������������������������������������������������������������������������������������������������������539
Index ���������������������������������������������������������������������������������������������������������������������������������541
xix
About the Author
Wallace Jackson has been writing for leading new media publications regarding his production work in new media content development since the advent of Multimedia Producer Magazine, more than two decades ago, when he wrote about computer processor architectures for the magazine’s centerfold distributed at SIGGRAPH.
Since then, Wallace has written for several other leading publications about his work in interactive 3D and new media brand and advertising campaign design, including 3D Artist, Desktop Publishers Journal, CrossMedia, AV Video, and Kiosk Magazine.
A COBOL and RPG2 programmer since he was in his early teens, Wallace has also written several popular application programming books covering the use of Eclipse, Java, and XML for the Android development environment for Apress (Springer Scientific) over the past decade.
Wallace Jackson is also the CEO of Mind Taffy Design, a new media content production and digital marketing and branding campaign design and development agency located in Northern Santa Barbara County, halfway between their clientele in the Silicon Valley in Northern California, and in the Hollywood, Irvine, and San Diego areas of Southern California.
Mind Taffy Design has created digital new media content deliverables using open source technology (HTML5, CSS, JavaScript, Java, JavaFX, XML, and Android) over the past two decades for many of the leading branded manufacturers in the world, including Sony, Tyco, Samsung, Nokia, Epson, Compaq, IBM, TEAC, CTX, KDS, Sun, Micron, SGI, EIZO Nanao, Techmedia, ArtMedia, KFC, and Mitsubishi.
Mr. Jackson received his undergraduate degree in Business Economics from the University of California at Los Angeles (UCLA), and his graduate degree in MIS Design and Implementation from the University of Southern California (USC). His post-graduate degree, in Marketing Strategy, is also from USC. Wallace also attended and completed the USC Graduate Entrepreneurship Program.
xxi
About the Technical Reviewer
Chád Darby is an author, instructor, and speaker in the Java development world. As a recognized authority on Java applications and architectures, he has presented technical sessions at software development conferences worldwide (U.S., U.K., India, Russia, and Australia). In his 15 years as a professional software architect, he’s had the opportunity to work for Blue Cross/Blue Shield, Merck, Boeing, Red Hat, and a handful of startup companies.
Chád is a contributing author to several Java books, including Professional Java E-Commerce (Wrox Press), Beginning Java Networking (Wrox Press), and XML and Web Services Unleashed (Sams Publishing). Chád has Java certifications from Sun Microsystems and IBM. He holds a B.S. in Computer Science from Carnegie Mellon University.
xxiii
Acknowledgments
I would like to acknowledge all the fantastic editors and their support staff at Apress who worked so very long and hard on this book, making it the ultimate all-around Pro Android User Interface Design application production book.
Steve Anglin, for his work as the Lead Editor on the book, and for his acquisition of myself as an author for Apress, as well as his experience and guidance during the process of writing this book.
James Markham, for his work as the Development Editor on the book, and for his experience and guidance during the process of making Pro Android UI truly great.
Anamika Panchoo, for her work as the Coordinating Editor on the book, and for her diligence in making sure I either hit my deadlines, or that I surpassed them.
Linda Seifert, for her work as the Copy Editor on the book, and for her attention to detail and conforming the text to Apress writing standards.
Chád Darby, for his work as the Technical Reviewer on the book. Chád made sure I didn’t make any mistakes, because code with mistakes does not run properly, if at all, unless they are very lucky mistakes, which is quite rare in computer programming.
Finally I’d like to acknowledge Oracle for acquiring Sun Microsystems, and for continuing to enhance Java, as well as JavaFX, so that they remain the premiere open source programming languages.
I would also like to acknowledge Google for making Android OS the premiere open source operating system, and for acquiring ON2’s VP8 video codec, and for making the VP8 WebM and WebP formats available to all of us open source platform multimedia content producers.
xxv
Introduction
Google’s Android Operating System continues to gain market share, making it one of the most often utilized OSes internationally. Android currently powers everything from smartwatches to iTV sets to smartphones to smartglasses to touchscreen tablets to e-book readers to game consoles and now homes, appliances, audio products, car dashboards, and more.
One of the most important design considerations for any Android application is the UI Design (User Interface Design), as this defines how the Android application user interfaces with the objective of the application itself. An Android application that features a streamlined, simple, and elegant UI Design will please users and enhance sales volumes within the Android applications marketplace.
The Android OS contains a plethora of UI Design classes that have been specifically created to help Android developers implement creative UI designs, as well as to conform their UI Design to Android OS UI Design standards. This book covers those primary UI Layout Container classes and methods, as well as all the Android UI Design standards and guidelines, which every Android developer should understand and follow in their application design work process.
I wrote Pro Android UI to help readers delve into the inner workings of the Android UI Design standards, to explore the most popular UI layout classes and methods, and to be a complimentary title to my recent Pro Android Graphics title. Pro Android UI targets those readers who are already technically proficient, that is, those who are familiar with computer programming concepts and techniques. This title covers the latest Android 4.x Operating System revisions (4.0, 4.1.2, 4.2.2, 4.3.1, and 4.4.2), as well as covering earlier Android OS versions.
This book also covers the usage of a wide variety of related open source software packages that can be used in the Android application development work process. Such packages include seasoned open source new media applications like GIMP, Lightworks, Pencil, Blender, and Audacity. We take a look at how the usage of these packages fits into the overall Android application development work process. We also take a look at new media elements and supported formats, how they work, and how to leverage them in your UI Design process.
Using a multiple open source software package implementation approach will serve to set Pro Android UI distinctly apart from the other Android user interface design titles currently on the market. This book starts out with the reader installing the latest Java SE and Android SDKs using the Eclipse Kepler IDE, with the Android ADT Bundle, and then many of the most popular open source new
xxvi Introduction
media production applications for digital imaging, digital audio editing, digital video production, user interface wireframing and prototyping, and more.
The book then progresses through creating Menu UI Designs, ActionBar UI Designs, Android UI Rules and Guidelines, and then finally through the primary types of UI Layout Containers that developers specifically implement for their Android application UI Design.
We look at static user interface design using XML mark-up, dynamic user interface design using Java, using digital imaging within your user interface design, using digital video and animation in your user interface design, Android OS user interface design rules and standards , as well as other advanced new media concepts and multimedia application features that are currently popular in Android UI Design for Android application development.
We look at the core Android UI Design areas, including UI layout containers, UI widgets, ActionBar UI Design, New Media formats, codecs, concepts and implementations, and advanced concepts such as Fragments, all in fine detail. If you want to get an overview of and a handle on Android UI Design, this title is a great place to start that process.