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

Book Description

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

About This Book

  • Take an initial idea for an Android app and develop it into a detailed plan, supported by sketches and wireframes

  • Provide a better experience for your users by following best practices and the new material design principles

  • Work more efficiently and save time by testing your ideas at an early stage by building a prototype

  • Who This Book Is For

    If you are a Java developer with a keen interest in building stunning UIs for your applications in order to retain customers and create great experiences for them, then this book is for you. A good knowledge level of HTML, CSS, and some grounding in Android Development is assumed.

    What You Will Learn

  • Develop a user interface that adheres to all the core material design principles

  • Transform your initial app idea into a concrete and detailed plan

  • Add Views, ViewGroups, layouts, and common UI components to your own Android projects

  • Use fragments and various strategies to gather user input

  • Create a new Android Studio project and develop it into a prototype

  • Identify and solve problems with your app’s UI to deliver a better user experience

  • Start getting to grips with the new UI features coming up in Android N, including multi-window mode and direct reply notifications

  • In Detail

    Great design is one of the key drivers in the adoption of new applications, yet unfortunately design considerations are often neglected in the face of “will it work,” “can we make it quicker,” or “can we get more people using it”?

    This book seeks to redress this balance by showing you how to get your PM to start treating the design phase of your project seriously. This book is focused entirely on the development of UI features, and you’ll be able to practically implementing the design practices that we extol throughout the book.

    Starting by briefly outlining some of the factors you need to keep in mind when building a UI, you’ll learn the concepts of Android User Interface from scratch. We then move on to formulate a plan on how to implement these concepts in various applications. We will deep dive into how UI features are implemented in real-world applications where UIs are complex and dynamic.

    This book offers near complete coverage of UI-specific content including, views, fragments, the wireframing process, and how to add in splash screens—everything you need to make professional standard UIs for modern applications. It will then cover material design and show you how to implement Google's design aesthetic in a practical manner. Finally, it ensures the best possible user experience by analyzing the UI using various tools, and then addressing any problems they uncover.

    By the end of the book, you’ll be able to leverage the concepts of Android User Interface in your applications in order to attract new customers.

    Style and approach

    This book follows a comprehensive approach that focuses on the concepts of UI from scratch. The book ends with teaching Android developers on how to optimize their UI, best practices and securing applications.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the code file.

    Table of Contents

    1. Android UI Design
      1. Android UI Design
      2. Credits
      3. About the Author
      4. About the Reviewer
        1. eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      6. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book 
          3. Errata
          4. Piracy
          5. Questions
      7. 1. Introducing the Android UI
        1. What is a user interface anyway?
        2. Is developing UIs for Android really that different from other platforms?
        3. What are the characteristics of an effective UI?
        4. Why is UI essential for the success of your app?
          1. Instant familiarity
          2. Easy and enjoyable to use
          3. Consistency
          4. Preventing user frustration
          5. Helping users fix their mistakes
          6. Providing a better overall Android experience
        5. The UI case study – Google+
          1. The action bar
            1. Navigational controls
            2. Action buttons
            3. The action overflow
          2. Floating action button
          3. Menus
          4. Settings
          5. Dialogues
          6. Toasts
          7. Search
          8. Input controls
          9. Styles and themes
        6. Summary
      8. 2. What Goes into an Effective UI?
        1. What is a view?
        2. What is a layout?
        3. Building your UI – XML or Java?
          1. Declaring your UI with XML
          2. Declaring your UI programmatically
          3. Using both programmatic and XML layouts
        4. Deep dive – exploring layouts
          1. Defining the size of your layouts
            1. A supported keyword
            2. A dimension value
            3. Setting the layout size programmatically
        5. Exploring different layouts
          1. Everything you need to know about LinearLayout
          2. Everything you need to know about RelativeLayout
            1. Relative to the parent container
            2. Relative to other elements
            3. Aligning with other elements
        6. Creating views
          1. Assigning the ID attribute
          2. Setting a view's size
          3. Android gravity and layout gravity
          4. Setting the background – working with color
          5. Assigning a weight value
        7. Adding and customizing view objects
          1. TextView
            1. Brightening up your text
            2. Setting the size of your text
            3. Emphasizing your text
            4. Setting the typeface
            5. How many lines?
        8. EditText
          1. Controlling keyboard behavior - setting the inputType
          2. android:imeOptions
          3. Giving the user a hint
        9. ImageView
          1. Supporting multiple screens
            1. Supporting different screen densities
              1. Creating density-specific images
          2. Adding ImageView
        10. Buttons and ImageButtons
          1. Creating buttons with text labels
          2. Creating buttons with image labels
          3. Creating buttons with text and image labels
        11. State list resources
        12. Summary
      9. 3. Expanding your UI – Fragments, Resources, and Gathering User Input
        1. More resource types
          1. Creating and styling string resources
          2. Creating string arrays
          3. Defining dimensions in dimens.xml
          4. Color state lists
        2. Working with 9-patch images
          1. How do I create 9-patch images?
        3. Registering the user input
          1. Handling click events
            1. Handling onClick Via Java
            2. Handling onClick Via XML
          2. Registering the EditText input
            1. The example app
        4. Working with fragments
          1. Why do we need fragments?
          2. The fragment life cycle
          3. Creating a fragment
            1. Fragments and backwards compatibility
            2. Creating your fragment class
            3. Adding a fragment to your activity declaratively
          4. Adding a fragment to an activity at runtime
            1. Fragment transactions and the back stack
              1. Adding a fragment
              2. Removing a fragment
              3. Replacing a fragment
        5. The multi-window support in Android N
          1. How does the multi-window mode work?
          2. Getting your app ready for multi-window mode
            1. Testing your app's multi-window support
          3. Picture-by-picture mode
        6. Summary
      10. 4. Getting Started with Material Design
        1. The Material Design ethos
          1. Case study – Hangouts
          2. Case study – Google Calendar
          3. Case study – Google Maps
        2. Getting started with Material Design
          1. Applying the Material theme to your app
            1. Choosing your color scheme
            2. Backwards compatibility
          2. Creating a sense of depth
            1. Creating a Material Design structure
          3. Floating action buttons
          4. Bottom sheets
          5. CardView
          6. Lists and RecyclerView
          7. Animations and transitions
            1. Reinforcing the Material Design illusion
          8. Providing the user with a visual feedback
            1. Animations – a word of warning
          9. The finishing touches
            1. Designing your product icon
              1. System icons
            2. Typography and writing
              1. Typefaces
              2. Text opacity
              3. Writing guidelines
        3. Summary
      11. 5. Turning Your Bright Idea into a Detailed Sketch
        1. Brainstorming - taking advantage of mobile hardware
          1. Touch and gestures
          2. GPS
          3. Vibration
          4. Audio input/output
          5. Interacting with other devices
        2. The difference between UX and UI
        3. Brainstorming your app
          1. Writing a concept
          2. Creating an ultimate features list
          3. Identifying your app's primary task
          4. Is this application right for mobile?
          5. Do you have the budget?
        4. Planning your app
          1. Identifying your target audience
            1. Creating a persona
              1. The mobile persona
            2. Creating use cases
            3. Deciding on a feature list
            4. Taking a critical look at your target audience
              1. Does your target audience need a mobile app?
              2. Is your target audience on Android?
              3. Okay, so your target audience is on Android, but does it own a suitable Android device?
              4. Do they use this "type" of application?
              5. Would your target audience be willing to pay for this application?
              6. Are there enough people in your target audience for your project to be profitable?
          2. Identifying user and product goals
            1. Product goals
            2. User goals
          3. Creating a roadmap
          4. Some final things to think about
            1. What devices should you support?
            2. How should you market your app?
        5. Designing your application
          1. The high-level flow
          2. Creating a screen list
          3. Creating a screen map
            1. Grouping screens into multi-pane layouts
          4. Navigation
            1. What are your app's most important tasks?
            2. Are there any tasks you can group together?
            3. Is my navigation consistent?
          5. Common navigation patterns
            1. The embedded navigation
            2. Buttons and simple targets
            3. Lists
            4. Grids, cards, and carousels
            5. Tabs
            6. Horizontal paging (swipe views)
          6. The social layer
        6. Summary
      12. 6. Turning Your Sketches into Wireframes
        1. What is wireframing?
          1. What are the benefits of wireframing?
          2. Creating a Wireframe
            1. Creating your first wireframe
          3. Exploring more wireframes
            1. Wireframing a details screen
            2. Wireframing search screens
              1. The search screen as a fragment
          4. Digital wireframes
            1. Adding content to your wireframes
        2. What is paper prototyping?
          1. Usability testing
            1. Rapid prototyping
        3. Summary
      13. 7. Building a Prototype
        1. Creating a prototype in Android Studio
          1. Creating your first prototype
          2. Creating your second prototype
          3. Finalizing your design
            1. Visuals
            2. Background music and sound effects
            3. Your text
            4. Your app's personality
        2. Creating themes and styles
          1. Defining styles
            1. Inheritance
          2. Working with themes
        3. Get ready for errors!
          1. User input errors
        4. Summary
      14. 8. Reaching a Wider Audience – Supporting Multiple Devices
        1. Supporting different versions of Android
          1. Specifying minimum and target API levels
            1. minSdkVersion
            2. targetSdkVersion
            3. compileSdkVersion
          2. Check version at runtime
        2. Supporting different screens
          1. Configuration qualifiers
            1. How Android selects the perfect resource
            2. Creating alias resources
          2. Screen density
            1. Converting dpi into pixels and vice versa
          3. Providing different layouts for different screen sizes
            1. smallestWidth – sw<N>dp
            2. Available screen width – w<N>dp
            3. Available screen height – h<number>dp
          4. Designing for different screen orientations
            1. Reacting to orientation changes
          5. Testing across multiple screens
            1. Showing off your screen support
        3. Attracting an international audience
          1. Identifying the target languages and regions
            1. Providing alternate text
          2. What other resources might you need localizing?
          3. Why default resources are important
            1. Which configuration qualifiers are the most important?
          4. Getting your app translated
            1. Getting the most out of your translations
              1. Putting your strings in context
              2. Using terms consistently
              3. Getting your strings in order
              4. Not creating unnecessary strings
              5. Always marking non-translatable text
            2. Other things to consider
              1. Right to left support
              2. Formatting values
          5. Localizing your app – best practices
            1. Design a single set of flexible layouts
            2. Create alternate languages only when needed
          6. Testing your app across different locales
            1. Testing for different locales
              1. Look for common localization issues
            2. Testing for default resources
            3. Plan a beta release in key countries
            4. Get ready for lift off!
          7. Localize your Google Play store listing
          8. After launching your project
            1. Following a successful launch – supporting international users
              1. Monitor your app's international performance
        4. Summary
      15. 9. Optimizing Your UI
        1. Timing your code
        2. Identifying overdraw
        3. Simplifying your Hierarchy View
          1. Tree View
          2. Tree overview
          3. Layout View
        4. Spotting memory leaks
          1. Memory monitor
          2. Heap tab
          3. Object allocation – understanding memory churn
        5. Debugging your project
          1. Working with breakpoints
            1. Configuring your breakpoints
        6. Examining your code with Lint
        7. Optimizing your code with ProGuard
        8. Scrutinize each pixel
          1. Pixel Perfect pane
          2. Pixel Perfect tree
          3. Pixel Perfect Loupe pane
        9. Processes and threads
          1. Terminating processes
            1. Foreground processes
            2. Visible processes
            3. Service processes
            4. Background processes
            5. Empty processes
        10. Re-using layouts with > and <merge/>
          1. Loading views only when needed
        11. Summary
      16. 10. Best Practices and Securing Your Application
        1. Keeping user data secure
          1. Connecting to a network
        2. Requesting permissions
          1. The new permissions model – backwards compatibility
          2. Permission groups
          3. Declaring permissions
            1. Verifying permissions
            2. Handling the permissions request response
          4. Permissions and <uses-feature>
          5. Best practices for app permissions
            1. Making as few permission requests as possible
            2. Requesting critical permissions up front
            3. Providing extra information where necessary
            4. Paying attention to permissions required by libraries
            5. Being transparent about accessing the camera and microphone
            6. Considering alternatives
        3. Notifications
          1. Notification best practices
            1. Providing the right content
            2. Using notifications sparingly
            3. Giving users a choice
            4. Categorising notifications
            5. Making use of actions
            6. Using expanded layouts
              1. Big text style
              2. Big picture style
              3. Inbox style
          2. Direct reply notifications
          3. Bundled notifications
        4. Application widgets
          1. Declaring an AppWidgetProvider class in your project's Manifest
          2. Creating an AppWidgetProviderInfo file
          3. Creating the widget's layout
            1. App widget best practices
              1. Including margins for earlier versions of Android
              2. Providing flexible graphics and layouts
              3. Not updating too often
        5. Accessibility best practices
          1. Adding descriptive text to your UI controls
          2. Designing for focus navigation
          3. Custom view controls
            1. Providing alternatives to audio prompts
          4. Testing various font sizes
          5. Using recommended touch target sizes
          6. Providing alternatives to affordances that time out
        6. Testing your application's accessibility features
        7. Summary