Learning Material Design
Description
- [*]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
Book DescriptionGoogle'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. 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
Who this book is forThis 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.
All prices
More details
Other editions
Additional editions
Persons
Kyle Mew has been programming since the early '80s and has written for several technology websites. Also, he has written three radio plays and four other books on Android development.
Content
- Cover
- Copyright
- Credits
- About the Author
- About the Reviewer
- www.PacktPub.com
- Table of Contents
- Preface
- Chapter 1: Getting Started with Material Design
- Material properties
- Setting up a development environment
- Installing Android Studio
- Configuring the Android SDK
- Emulating Android devices
- Connecting a real device
- The material theme
- Applying styles
- Customizing the material theme
- Summary
- Chapter 2: Building a Mobile Layout
- Activities and layouts
- RelativeLayouts
- LinearLayouts
- Gravity properties
- Inserting and scaling images
- Strings and translation
- Screen rotation
- Applying material to older devices
- The AppCompat support library
- Applying the material theme
- Adding a material toolbar
- Action icons
- Summary
- Chapter 3: Common Components
- App bar style and code
- Applying a material palette
- Image assets
- Applying actions
- The app bar structure
- Phones
- Tablets and desktops
- Capturing action calls with Java code
- Menus and dialogs
- Menus
- Options menu
- Contextual menus
- Dialogs
- Creating a material dialog
- Click listeners
- Summary
- Chapter 4: Sliding Drawers and Navigation
- Drawer design
- The layout
- Navigation components and keylines
- Structure and metrics
- Ratio keylines
- Configuration qualifiers
- Drawer functionality
- Activating the navigation drawer
- Opening fragments
- Other sliding drawers
- Summary
- Chapter 5: Lists, Cards, and Data
- Generating lists
- Adding list items
- Connecting a dataset
- Layout managers and adapters
- Cards
- Tiles
- Summary
- Chapter 6: Animations and Transitions
- Touch feedback
- Ripple animations
- Revealing and hiding
- Transitions
- Exits and entrances
- Shared components
- Realistic movement
- Summary
- Chapter 7: Material on Other Devices
- Material TV
- Banners
- TV app structure
- Recommendation cards
- Wearable material
- Connecting to a Wearable device
- Managing differently shaped screens
- Wearable layouts
- Summary
- Chapter 8: Material Web Frameworks
- Desktop layouts
- Package management
- Materialize
- Setting up
- Material theme
- Layouts and grids
- Cards
- Buttons and icons
- Material Design Lite
- Layouts and grids
- Cards
- Alternative frameworks and libraries
- Summary
- Chapter 9: The Materialize Framework
- Components
- Lists and badges
- Navigation bars, menus, and icons
- Text input and display
- Transitions and motion
- Wave animations
- Accordions and pop-outs
- Dividing content with tabs
- Displaying images
- Summary
- Chapter 10: Material Design Lite
- Components
- Headers
- Navigation bars
- Tabs
- Search fields
- Menus
- Forms
- Tables
- Summary
- Index
Setting up a development environment
The Android development environment consists mainly of two distinct components: the SDK, which provides the code libraries behind Android and Android Studio, and a powerful code editor that is used for constructing and testing applications for Android phones and tablets, Wear, TV, Auto, Glass, and Cardboard. Both these components can both be downloaded as a single package from http://developer.android.com/sdk/index.html.
Installing Android Studio
The installation is very straightforward. Run the Android Studio bundle and follow the on-screen instructions, installing HAXM hardware acceleration if prompted, and selecting all SDK components, as shown here:
Android Studio is dependent on the Java JDK. If you have not previously installed it, this will be detected while you are installing Android Studio, and you will be prompted to download and install it. If for some reason it does not, it can be found at http://www.oracle.com/technetwork/java/javase/downloads/index.html, from where you should download the latest version.
This is not quite the end of the installation process. There are still some SDK components that we will need to download manually before we can build our first app. As we will see next, this is done using the Android SDK Manager.
Configuring the Android SDK
People often refer to Android versions by name, such as Lollipop, or an identity number, such as 5.1.1. As developers, it makes more sense to use the API level, which in the case of Android 5.1.1 would be API level 22. The SDK provides a platform for every API level since API level 8 (Android 2.2). In this section, we will use the SDK Manager to take a closer look at Android platforms, along with the other tools included in the SDK.
Start a new Android Studio project or open an existing one with the minimum SDK at 21 or higher. You can then open the SDK manager from the menu via Tools | Android | SDK Manager or the matching icon on the main toolbar.
Tip
The Android SDK Manager can also be started as a stand alone program. It can be found in the /Android/sdk directory, as can the Android Virtual Device (AVD) manager.
As can be seen in the preceding screenshot, there are really three main sections in the SDK:
- A
Toolsfolder - A collection of platforms
- An
Extrasfolder
All these require a closer look. The Tools directory contains exactly what it says, that is, tools. There are a handful of these but the ones that will concern us are the SDK manager that we are using now, and the AVD manager that we will be using shortly to create a virtual device.
Open the Tools folder. You should find the latest revisions of the SDK tools and the SDK Platform-tools already installed. If not, select these items, along with the latest Build-tools, that is, if they too have not been installed.
Tip
These tools are often revised, and it is well worth it to regularly check the SDK manager for updates.
When it comes to the platforms themselves, it is usually enough to simply install the latest one. This does not mean that these apps will not work on or be available to devices running older versions, as we can set a minimum SDK level when setting up a project, and along with the use of support libraries, we can bring Material Design to almost any Android device out there.
If you open up the folder for the latest platform, you will see that some items have already been installed. Strictly speaking, the only things you need to install are the SDK platform itself and at least one system image. System images are copies of the hard drives of actual Android devices and are used with the AVD to create emulators. Which images you use will depend on your system and the form factors that you are developing for. In this book, we will be building apps for phones and tablets, so make sure you use one of these at least.
Tip
Although they are not required to develop apps, the documentation and samples packages can be extremely useful.
At the bottom of each platform folder are the Google APIs and corresponding system images. Install these if you are going to include Google services, such as Maps and Cloud, in your apps. You will also need to install the Google support libraries from the Extras directory, and this is what we will cover next.
The Extras folder contains various miscellaneous packages with a range of functions. The ones you are most likely to want to download are listed as follows:
- Android support libraries are invaluable extensions to the SDK that provide APIs that not only facilitate backwards compatibility, but also provide a lot of extra components and functions, and most importantly for us, the design library. As we are developing on Android Studio, we need only install the Android Support Repository, as this contains the Android Support Library and is designed for use with Android.
- The Google Play services and Google Repository packages are required, along with the Google APIs mentioned a moment ago, to incorporate Google Services into an application.
- You will most likely need the Google USB Driver if you are intending to test your apps on a real device. How to do this will be explained later in this chapter.
- The HAXM installer is invaluable if you have a recent Intel processor. Android emulators can be notoriously slow, and this hardware acceleration can make a noticeable difference.
Once you have downloaded your selected SDK components, depending on your system and/or project plans, you should have a list of installed packages similar to the one shown next:
The SDK is finally ready, and we can start developing material interfaces. All that is required now is a device to test it on. This can, of course, be done on an actual device, but generally speaking, we will need to test our apps on as many devices as possible. Being able to emulate Android devices allows us to do this.
Emulating Android devices
The AVD allows us to test our designs across the entire range of form factors. There are an enormous number of screen sizes, shapes, and densities around. It is vital that we get to test our apps on as many device configurations as possible. This is actually more important for design than it is for functionality. An app might operate perfectly well on an exceptionally small or narrow screen, but not look as good as we had wanted, making the AVD one of the most useful tools available to us. This section covers how to create a virtual device using the AVD Manager.
The AVD Manager can be opened from within Android Studio by navigating to Tools | Android | AVD Manager from the menu or the corresponding icon on the toolbar. Here, you should click on the Create Virtual Device... button.
The easiest way to create an emulator is to simply pick a device definition from the list of hardware images and keep clicking on Next until you reach Finish. However, it is much more fun and instructive to either clone and edit an existing profile, or create one from scratch.
Click on the New Hardware Profile button. This takes you to the Configure Hardware Profile window where you will be able to create a virtual device from scratch, configuring everything from cameras and sensors, to storage and screen resolution. When you are done, click on Finish and you will be returned to the hardware selection screen where your new device will have been added:
Note
As you will have seen from the Import Hardware Profiles button, it is possible to download system images for many devices not included with the SDK. Check the developer sections of device vendor's web sites to see which models are available.
So far, we have only configured the hardware for our virtual device. We must now select all the software it will use. To do this, select the hardware profile you just created and press Next. In the following window, select one of the system images you installed earlier and press Next again. This takes us to the Verify Configuration screen where the emulator can be fine-tuned. Most of these configurations can be safely left as they are, but you will certainly need to play with the scale when developing for high density devices. It can also be very useful to be able to use a real SD card. Once you click on Finish, the emulator will be ready to run.
Note
An emulator can be...
