Learning Material Design

Learning Material Design

by Kyle Mew
Released December 2015
Publisher(s): Packt Publishing
ISBN: 9781785289811

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Master Material Design and create beautiful, animated interfaces for mobile and web applications

About This Book

  • Master the highly acclaimed Material Design paradigm and give your apps and pages the look that everyone is talking about
  • Get a mix of key theoretical concepts combined with enough practical examples to put each theory into practice so you can create elegant material interfaces with Android Studio and Polymer
  • Written by Kyle Mew, successful author with over a decade of mobile and web development experience, this book has both the touch of a developer as well as an experienced writer

Who This Book Is For

This book is ideal for web developers and designers who are interested in implementing Material Design in their mobile and web apps. No prior knowledge or experience of Material Design is required, but some familiarity with procedural languages such as Java and markup languages such as HTML will provide an advantage.

What You Will Learn

  • Implement Material Design on both mobile and web platforms that work on older handsets and browsers
  • Design stylish layouts with the Material Theme
  • Create and manage cards, lists, and grids
  • Design and implement sliding drawers for seamless navigation
  • Coordinate components to work together
  • Animate widgets and create transitions and animation program flow
  • Use Polymer to bring Material Design to your web pages

In Detail

Google's Material Design language has taken the web development and design worlds by storm. Now available on many more platforms than Android, Material Design uses color, light, and movements to not only generate beautiful interfaces, but to provide intuitive navigation for the user.

Learning Material Design will teach you the fundamental theories of Material Design using code samples to put these theories into practice.

Focusing primarily on Android Studio, you'll create mobile interfaces using the most widely used and powerful material components, such as sliding drawers and floating action buttons. Each section will introduce the relevant Java classes and APIs required to implement these components. With the rules regarding structure, layout, iconography, and typography covered, we then move into animation and transition, possibly Material Design's most powerful concept, allowing complex hierarchies to be displayed simply and stylishly.

With all the basic technologies and concepts mastered, the book concludes by showing you how these skills can be applied to other platforms, in particular web apps, using the powerful Polymer library.

Style and approach

Learning Material Design combines the theories behind material design with practical examples of how these can be implemented and further reinforcing the guidelines covering style, layout and structure.

Table of contents

  1. Learning Material Design
    1. Table of Contents
    2. Learning Material Design
    3. Credits
    4. About the Author
    5. About the Reviewer
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. 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 color images of this book
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with Material Design
      1. Material properties
      2. Setting up a development environment
        1. Installing Android Studio
        2. Configuring the Android SDK
        3. Emulating Android devices
        4. Connecting a real device
      3. The material theme
        1. Applying styles
      4. Customizing the material theme
      5. Summary
    9. 2. Building a Mobile Layout
      1. Activities and layouts
        1. RelativeLayouts
        2. LinearLayouts
        3. Gravity properties
        4. Inserting and scaling images
        5. Strings and translation
        6. Screen rotation
      2. Applying material to older devices
        1. The AppCompat support library
        2. Applying the material theme
        3. Adding a material toolbar
        4. Action icons
      3. Summary
    10. 3. Common Components
      1. App bar style and code
        1. Applying a material palette
        2. Image assets
        3. Applying actions
        4. The app bar structure
          1. Phones
          2. Tablets and desktops
        5. Capturing action calls with Java code
      2. Menus and dialogs
        1. Menus
          1. Options menu
          2. Contextual menus
        2. Dialogs
          1. Creating a material dialog
            1. Title
            2. Content
            3. Actions
          2. Click listeners
      3. Summary
    11. 4. Sliding Drawers and Navigation
      1. Drawer design
        1. The layout
        2. Navigation components and keylines
          1. Structure and metrics
          2. Ratio keylines
          3. Configuration qualifiers
      2. Drawer functionality
        1. Activating the navigation drawer
        2. Opening fragments
        3. Other sliding drawers
      3. Summary
    12. 5. Lists, Cards, and Data
      1. Generating lists
      2. Adding list items
      3. Connecting a dataset
        1. Layout managers and adapters
      4. Cards
        1. Tiles
      5. Summary
    13. 6. Animations and Transitions
      1. Touch feedback
        1. Ripple animations
      2. Revealing and hiding
      3. Transitions
        1. Exits and entrances
        2. Shared components
        3. Realistic movement
      4. Summary
    14. 7. Material on Other Devices
      1. Material TV
        1. Banners
        2. TV app structure
        3. Recommendation cards
      2. Wearable material
        1. Connecting to a Wearable device
        2. Managing differently shaped screens
        3. Wearable layouts
      3. Summary
    15. 8. Material Web Frameworks
      1. Desktop layouts
      2. Package management
      3. Materialize
        1. Setting up
        2. Material theme
        3. Layouts and grids
        4. Cards
        5. Buttons and icons
      4. Material Design Lite
        1. Layouts and grids
        2. Cards
      5. Alternative frameworks and libraries
      6. Summary
    16. 9. The Materialize Framework
      1. Components
        1. Lists and badges
        2. Navigation bars, menus, and icons
        3. Text input and display
      2. Transitions and motion
        1. Wave animations
        2. Accordions and pop-outs
        3. Dividing content with tabs
        4. Displaying images
      3. Summary
    17. 10. Material Design Lite
      1. Components
        1. Headers
        2. Navigation bars
        3. Tabs
        4. Search fields
        5. Menus
        6. Forms
        7. Tables
      2. Summary
    18. Index

Product information

  • Title: Learning Material Design
  • Author(s): Kyle Mew
  • Release date: December 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781785289811