651.288.7000 info@intertech.com

materialdesign_introduction

One of the most publicized features of the Android 5 (Lollipop) release has been Material Design.  Yet, it is probably one of the hardest features to grasp for those hearing about the feature for the first time.  Google even set up a web site to try to describe and explain Material Design.  Google has called it a “design language” or “visual language” for app development.   Perhaps that term speaks to designers and marketing types.  As a developer, when I first heard these terms, I was left wanting to understand exactly how it was going to impact my work in developing applications and how it was going to impact the look and feel of products I produced.  I knew Material Design had something to do with the visual makeup, but how?  In this post, I hope to take a developer’s look at Material Design – at least some of it.  That is, I hope to explain Material Design by showing you its impact on app development.

As Wired reported, Google hopes to unite its product line under the design styles and principles established by Material Design.  Given Google’s investment in Material Design and use beyond Android, we can probably expect Material Design to guide the look and feel of Android apps for the foreseeable future.  That’s Android developer speak for – get used to it because your going to have to use it for a while.  After reading this post, I highly encourage you to read the design specification and look at how design guidelines for Android have changed due to Material Design.  For Material Design to succeed (and for Android devices to rival its competitor’s visual appeal), it is my opinion that we developers must follow its principals.

Components of Material Design

There are actually several parts to the Material Design.

  • A new material theme
  • New widgets – particularly for displaying collections of data
  • APIs for creating view elevations and shadows
  • APIs for clipping views
  • Addition of vector drawables
  • APIs for custom animations
Material Theme

A style in Android is a collection of properties that specify the look and format for a View.  A theme is a style applied to an entire Activity or application.  If you have developed in Android for even a little while, you are probably familiar with new themes (and thus styles) that have been created with most of the major Android releases.  Android 5 is no different in this respect.  There are new themes (Material Light Theme, Material Dark Theme and Material Light with Dark Action Bar Theme to be precise) that have been released with Lollipop.  The API Demo application provided with the AVDs can give you insight into these new themes – especially as they differ from the Holo themes (which debuted with Android 4).  Below, on the left is the API Demo app (Views -> Controls->Material Light) run on an Android Lollipop AVD displaying the Material Light theme.  On the right is the API Demo app (Views->Controls->Holo Light) run on an Android KitKat (4.4) AVD.

materialthemeholothemeImportantly, the Material Design themes allow for activity transition animations, touch feedback animations and a color palette that allows for easier branding of the app.  The color palette can even be set by the colors found in a drawable (more on this later).  The color palette allows the colors of the status bar to be easily customized, which design guidelines are now suggesting you do in Android 5.

“The status bar should almost always have a clear delineation from the primary toolbar”

New Widgets

As reported in early posts in this blog, Android 5 also introduces now widgets to simplify and improve the display of collections of data.  The RecyclerView scrolls more efficiently especially when considering large data sets and data sets whose elements are changing dynamically. The RecyclerView also offers some nice visual additions like item animation that is representative of the new Material Design.

CardViews can be used to display the row of data in a RecyclerView or ListView.  In Android 5, CardView extend FrameLayout.  Per the new Material Design, the CardView provides for the display of the card information in a panel with rounded corners, raised elevation and make themselves available to swipe gestures to move them.  For more details about these new Material Design widgets I refer you back to my previous Android 5 posts.

View Elevation and Shadows

Widgets (more formally Views) always had an X and Y position on the screen.  Now they have a Z position.  The Z position defines the virtual elevation of the widget from the screen surface in order to give it the appearance as if it is hovering – and thus projecting a shadow of the view to the surface below.  The higher the Z value of the view, the larger the shadow cast by the widget.  Further, views with a higher Z value “occlude” (I had to look it up myself if you are not sure what it means – it means to obstruct) views with smaller Z values as if they were to hover above the images with smaller Z values.

To see the new shadow/Z value projected, simply set the elevation property to a particular density pixel (or other spatial unit of measure) value.  Here is an example of an ImageView with no elevation (on the left) versus an elevation set (as shown in the code below) to 15dp (right).

material-design-noshadowmaterial-design-shadow

Clipping Views

In previous versions of Android, soft corners, round buttons, etc. all had to be faked by using the appropriate color shading in images, backgrounds, etc.  Android 5 now supports clipping to give views the appropriate shape.  Specifically, you need to create and apply a ViewOutlineProvider (new in Android 5) to your view to have the view clipped.  Suppose you have a standard ImageButton with a PNG drawable set as its source.  Below, the Cubs baseball team logo serves as the source PNG to the ImageButton.

clipping-orig

As you can see, the actual logo is circular in shape.  Wouldn’t it be nice if the button could be the shape of the logo – that is circular?  In Android 5 it can, just define a ViewOutlineProvider to clip the view appropriately – in this case, clip the view according to the dimensions of the logo in a circular / oval fashion.  Here is how it is done in code.

The results of the clipping are shown below – a “round” ImageButton.
clipping-results

A similar effect can be had by using a rounded rectangle as the means to provide the clipping.  Changing the outline.setOval(…) line of code above to outline.setRoundRect(paddingSize,paddingSize,imageSize+paddingSize, imageSize+paddingSize, (imageSize+paddingSize)/3) yields a similar yet slightly different clipped view.

clipping-rounded

SVG Drawables

Scalar vector graphics (SVG) are now supported in Android 5.  In prior releases, images – or drawables as they are know – were in the form of png, jpg, or gif images.  Create a resource which defines the graphic using the SVG Path API.  Below, I have defined an orange star using SVG Path in a file I called star.xml in the res/drawables folder.

The vector file can then be applied as if it was any other image.  Take, for example, its use as the source image in an ImageButton.  You even refer to the SVG image as a @drawable!

svg-drawable

Lollipop comes with even more features around drawables.  Drawables can now be defined with an alpha mask for tinting, and you can extract prominent colors from an image to help colorize the rest of your application components.

Palette & Color Extraction

I used the color extraction API in the latest version of Vid-iT available at Google Play.  Vid-iT allows people to find YouTube videos matching the music collection stored on their Android device.  I used the color extraction API to extract the prominent colors of the video thumbnail image to color up the CardView used to display each video in Vid-iT.  Note how each song/video listing below has a background color that seems to resemble the most prominent color in the video thumbnail?

vidit-no-elevation

The API that makes this possible is the new Pallete API found in Lollipop.  A Palette is a helper class used to extract colors from an image (as shown below).

Depending on the colors of the image, Palette attempts to define the prominent dark and light contrasting colors from the image.  Here is the list of color definitions it tries to come up with.

  • Vibrant
  • Vibrant Dark
  • Vibrant Light
  • Muted
  • Muted Dark
  • Muted Light

Above, in the Vid-iT example code, the light vibrant color is used to set the CardView for each favorite video displayed.  Palette can be a very helpful tool in branding your application in a way that is consistent with a company logo, or color scheme used by an organization.  White label applications can now be easily “colorized” based on the user or user’s organization with Palette.

Animations

The addition of animations has been added to several areas of the user interface in Lollipop.  In the tutorial on RecyclerView, I showed how animation can easily be added to highlight the addition/removal of items to the RecyclerView.  Additionally, the animation API allows developers to highlight activity transition and show state changes in views (like button clicks).  The API Demo application, provided with Android 5 AVDs, has a collection of animation samples to show you just how extensive this new API is.  Try them out to get inspired by some of these new features.  Let’s face it, animation had been one of user interface areas where iOS was superior to Android.  Lollipop’s Material Design animation API is helping to close that gap.

animation-examples
Wrap Up

Android 5/Lollipop is a major release. Material Design is a major part of this major release. Its too big to cover completely in a single post, but hopefully you have a better appreciation of what Material Design is about and how it can and will impact Android application development for days to come. If your organization would like some help navigating the impact of Material Design or other parts of Android 5, Intertech can help. Contact us for training or consulting assistance.

 

Check out the other tutorials in this series:

Android Development Tutorial: Lollipop Notifications

Android Development Tutorial: Lollipop CardView

Android Development Tutorial: Job Scheduler

Android Development Tutorial: Project Volta

Like What You've Read?

Subscribe to the Blog.

Every Friday we send that week's content from our Developers via email. Try it out!

Some ad blockers can block the form below.

You have Successfully Subscribed!

Pin It on Pinterest

Share This