You are previewing Pro Android UI.
O'Reilly logo
Pro Android UI

Book Description

If you're an Android application developer, chances are you're using fixed, scrolling, swipe-able, and other cutting-edge custom UI Designs in your Android development projects. These UI Design approaches as well as other Android ViewGroup UI layout containers are the bread and butter of Pro Android User Interface (UI) design and Android User Experience (UX) design and development.

Using a top down approach, Pro Android UI shows you how to design and develop the best user interface for your app, while taking into account the varying device form factors in the increasingly fragmented Android environment. Pro Android UI aims to be the ultimate reference and customization cookbook for your Android UI Design, and as such will be useful to experienced developers as well as beginners.

With Android's powerful UI layout classes, you can easily create everything from the simplest of lists to fully tricked-out user interfaces. While using these UI classes for boring, standard user interfaces can be quite simple, customizing a unique UI design can often become extremely challenging.

What you'll learn

  • How to design and develop a sleek looking and highly functional user interface (UI) design and experience (UX) design using Android APIs

  • What Android layout containers are, and how to best leverage them

  • How to design user-friendly UI layouts that conform to Android UI guidelines

  • What, when, why and how to use fundamental Android UI layout containers (ViewGroup subclasses) and Android UI widgets (View subclasses)

  • How to use new media assets such as images, video, and animation in a UI

  • How to create UI Fragments for UI design for specific ActionBar or Activity classes that you wish to create for UI designs within your applications

  • Scaling UI Design for the various Android smartphone and tablet form factors

  • Who this book is for

    This book is for experienced Android app developers. It can also be for app developers and UI designers working on other platforms like iOS and BlackBerry who might also be interested in Android.

    Table of Contents

    1. Title Page
    2. Dedication
    3. Contents at a Glance
    4. Contents
    5. About the Author
    6. About the Technical Reviewer
    7. Acknowledgments
    8. Introduction
    9. 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
        1. Java 6: Download and Install the Foundation for Android
        2. Android ADT Bundle: Find and Download Android’s IDE
        3. Android ADT Bundle: Installing the Android IDE
        4. Android ADT Bundle: Launch the IDE and Update the ADT
        5. UI Wireframing Tool: Downloading and Installing Pencil
        6. Digital Image Editing: Download and Install GIMP 2.8.10
        7. 3D Modeling and Animation: Download and Install Blender
        8. Digital Audio Editing: Downl oad and Install Audacity 2.0.5
        9. Digital Video Editing: Download and Install Lightworks 11.5
        10. Summary
      2. Chapter 2: Android UI Layouts: Layout Containers and the ViewGroup Class
        1. Layout Containers: Using XML for Tag-based UI Design
        2. Using Parameters: Refining and Customizing the UI Tags
        3. Android ViewGroup: Our Layout Container’s Superclass
        4. ViewGroup.LayoutParams: Nested Class Controls Layout
        5. ViewGroup.MarginLayoutParams: Nested Class for Margin
        6. The Difference Between Margins and Padding Parameters
        7. Animating Your ViewGroup: LayoutAnimationController
        8. Create a UserInterface Project and pro.android.ui Package
        9. ViewGroup XML Attributes: Configuring the RelativeLayout
        10. View XML Attributes: Configuring the TextView UI Widget
        11. View Padding Parameter: Add Space Inside the Container
        12. The AnalogClock Widget: Adding a View to the ViewGroup
        13. Using the Values Folder: Finish Your UI Design Using XML
        14. Summary
      3. Chapter 3: Android UI Widgets: User Interface Widgets and the View Class
        1. The Android View Class: The Superclass for UI Widgets
        2. Android View Direct Subclasses: Key Widgets and Utilities
        3. Using View Properties: Important Parameters
        4. Focus of a View: Which UI Widget has the User’s Attention
        5. View Listeners: Making a UI Widget Respond to the User
        6. UI Layout Creation: Using the setContentView() Method
        7. Adding a Button UI Widget to Our RelativeLayout Container
        8. Eclipse ADT Problems Tab: Debugging XML Errors in ADT
        9. Relative Positioning: Adding the UI Button to the Hierarchy
        10. String Constants: Adding a <string> Tag for Our UI Button
        11. Event Handling: Adding an OnClickListener in Java Code
        12. Controlling AnalogClock Visibility: .setVisibility() Method
        13. Install and Configure an Emulator: Testing Our Java Code
        14. Completing the UI Design Simulation: Adding Two Buttons
        15. Summary
    10. Part 2: Introduction to Android Menu Classes for UI Design: OptionsMenu, ContextMenu, PopupMenu and ActionBar
      1. Chapter 4: Android UI Options Menus: OptionsMenu Class and the Action Bar
        1. Android Menu Class: A Public Interface for Making Menus
        2. Menus for Android User Interface Design: An Overview
        3. Using XML to Define a Menu: <menu> and <item> Tags
        4. Defining the Menu Attributes: Using Child Tag Parameters
        5. Options Menu Design: Using the main.xml Menu Definition
        6. Customizing Our OptionsMenu: Adding String Constants
        7. Customizing Our OptionsMenu: Editing the Parameters
        8. Expanding Our OptionsMenu: Adding Six More MenuItems
        9. Basic Digital Imaging with GIMP: Creating Our Menu Icons
        10. Setting a Target Emulator: The Run Configurations Dialog
        11. Testing Our OptionsMenu: Using Switch Orientation Mode
        12. OptionsMenu Event Handling: onOptionsItemSelected()
        13. Summary
      2. Chapter 5: Android UI Local Menus: The ContextMenu Class and PopupMenu Class
        1. ContextMenu Overview: The ContextMenu Public Interface
        2. ContextMenu Methods: How to Implement a ContextMenu
        3. ContextMenu Event Handling via onContextItemSelected()
        4. Creating a ContextMenu for Our UserInterface Application
        5. Android’s PopupMenu Class: A UI Widget Localized Menu
        6. Creating a PopupMenu UI for the UserInterface Application
        7. Summary
      3. Chapter 6: Android UI Action Bar: Advanced Action Bar Design and ActionBar Class
        1. ActionBar Components
        2. The ActionBar Navigation Modes
        3. The Android ActionBar Class
        4. Creating an XML Foundation for ActionBar Tabs: Layouts
        5. Creating a Java Foundation for ActionBar Tabs: Fragments
        6. Android’s LayoutInflater Class
        7. Using LayoutInflater
        8. clockTabListener: A Private Class Implements TabListener
        9. The FragmentTransaction Class:
        10. Using FragmentTransaction
        11. The FragmentTransaction Class
        12. Summary
    11. Part 3: Android UI Design: Layout Considerations, Android OS Design Concepts and Android UI Design Guidelines
      1. Chapter 7: Android UI Design Considerations: Styles, Screen Density Targets and New Media Formats
        1. Android Media Formats: Digital Images and Digital Video
        2. The Terminology of Digital Image and Digital Video Color
        3. Digital Image Compression: Concepts and Terminology
        4. Sound for Android: Digital Audio Codecs and Formats
        5. The Terminology Behind Digital Audio and Sound Design
        6. Digital Video Compression: 4D Concepts and Terminology
        7. Define a UI Screen Look and Feel: An Introduction to Styles
        8. Creating a Style for Our UserInterface Application Clocks
        9. Using Digital Images and Alpha Channels: A New Media UI
        10. Using GIMP 2.8.10 with Android: Compositing Two Images
        11. Creating Resolution Density Image Assets for All Devices
        12. Summary
      2. Chapter 8: Android UI Design Concepts: Wire-framing & UI Layout Design Patterns
        1. Prototyping the UI Design: Wire-framing Using Pencil 2.0.5
        2. Prototyping Your Landscape UI Design Using Pencil 2.0.5
        3. Android UI Design Is Complex: The Many Considerations
        4. Basic Android UI Design Rules: Conforming to Android UI
        5. Android UI Screen Navigation: Primary Gestures Used in Android
        6. Advanced UI Navigation Classes: Navigation Drawer or Swipe View
        7. Android Intra-Application Navigation: The Difference Between Up and Back
        8. Allowing Users to Configure Your Apps: Settings and Help
        9. Feedback in UI Design: Notification and Confirmation
        10. Branding in UI Design: Writing Style, Fonts, and Icons
        11. UI Design Patterns: Grouping Devices by Product Genres
        12. UI Design Patterns: Why Different Layouts Are Necessary
        13. UI Design for Backward Compatibility: Android 2, 3, and 4
        14. Android UI Design Principles: Exciting, Simple, and Personal
        15. Summary
      3. Chapter 9: Android UI Layout Conventions, Differences and Approaches
        1. UI Layout Spacing: The 48 DIP User Interface Layout Rule
        2. UI Layout Panes: Single Pane Versus Multi-Pane Layouts
        3. UI Layout Compound View Types: Orientation Changes
        4. Auto-Scaling and Positioning UI Design: Layout Constants
        5. Design UI Elements Relative to Each Other: RelativeLayout
        6. Using Multiple UI Layout Definitions: Resource Qualifiers
        7. Creating Morphable UI Designs: Using Resource Qualifiers
        8. Summary
      4. Chapter 10: Android UI Theme Design and Digital Media Concepts
        1. Introduction to Themes: Styling an Entire App or Activity
        2. Applying Application-wide Theme: The <application> Tag
        3. Customizing the Theme: Creating a Grey Color ActionBar
        4. Applying an Activity-wide Theme: Using <activity> Tags
        5. Android Digital Image Formats: PNG8, PNG24, PNG32, JPEG, GIF, WebP
        6. Digital Image Color Values: Color Theory and Color Depth
        7. Image Compositing: Alpha Channels and Blending Modes
        8. Represent Color or Alpha in Code: Hexadecimal Notation
        9. Digital Image and UI Masking: Alpha Channel UI Compositing
        10. Achieving Smooth Edges in a Design: Using Anti-Aliasing
        11. Digital Image Optimization: Compression and Dithering
        12. Creating Our World Clock Image Asset: GIMP Compositing
        13. Creating Our Golden Hoop Clock: Shifting the Hue in GIMP
        14. Implementing AnalogClock UI in Java Code: Finishing Up!
        15. Screen Size Resource Qualifiers: An AnalogClock in Space
        16. Summary
    12. Part 4: Basic Android UI Design: Basic Layout Containers: FrameLayout, LinearLayout, RelativeLayout and GridLayout
      1. Chapter 11: Android’s FrameLayout Class: Using Digital Video in Your UI Design
        1. Android’s FrameLayout Class: Framing Individual Content
        2. Android’s VideoView Class: Using Digital Video in a Frame
        3. Android’s MediaPlayer Class: The Video Playback Engine
        4. The MediaController Class: Controlling Video Playback
        5. Summary
      2. Chapter 12: Android’s LinearLayout Class: Horizontal and Vertical UI Design
        1. LinearLayout Class: Android’s Most Used UI Class
        2. ImageButton Class: Create Custom Button Graphics
        3. Creating a UserInterface Menu Structure: UI Layouts Menu
        4. Using GIMP Digital Imaging Software for UI Design
        5. Nesting UI Layout Containers for Advanced Design
        6. Summary
      3. Chapter 13: Android’s RelativeLayout Class: UI Design Using One Layout Container
        1. The RelativeLayout Class: UI Design Using Your Relatives
        2. Margin Aligning a UI Design Using the Anchor UI Element
        3. Summary
      4. Chapter 14: Android’s GridLayout Class: UI Design Using a Grid-based Layout
        1. The GridLayout Class: UI Design Using a Grid
        2. Layout Parameters in GridLayout: Nested Classes
        3. Implementing GridLayout in the UserInterface App
        4. Summary
    13. Part 5: Advanced Android UI Design: Advanced Layout Containers: DrawerLayout, SlidingPane, ViewPager, PagerTitleStrip and PagerTabStrip
      1. Chapter 15: Android’s DrawerLayout Class: Using a UI Drawer in Your UI Design
        1. The DrawerLayout Class: Designing Using a Retractable UI
        2. Android Classes Used with DrawerLayout
        3. Creating a DrawerLayout Activity for Your UserInterface App
        4. Summary
      2. Chapter 16: Android’s SlidingPaneLayout Class: Using SlidingPanes in Your UI Design
        1. SlidingPaneLayout Class: UI Design Across Device Types
        2. Adding a SlidingPaneLayout to Your UserInterface App
        3. Summary
      3. Chapter 17: Android’s ViewPager Class: Using ViewPager to Navigate Horizontally
        1. The ViewPager Class: Horizontal Sliding Screen UI Design
        2. Define a ViewPaging Layout: Coding Multi-Pane UIs in XML
        3. Add a ViewPagingActivity Class to Your MainActivity Menu
        4. Finish Defining Planet UI Pane: Adding Four ImageButtons
        5. Create a ViewPagingActivity Class to Swipe Space Images
        6. Adding ViewPagerAdapter Class to the ViewPagingActivity
        7. Testing Your Galaxy Digital Image Asset Paging UI Interface
        8. Summary
      4. Chapter 18: Android’s PagerTitleStrip and PagerTabStrip: ViewPager Navigation UI
        1. The PagerTitleStrip Class: Horizontal Sliding Screen Titles
        2. The PagerTabStrip Class: Horizontal Sliding Screen Tabs
        3. Summary
    14. Index