Top 10 Reasons Android L’s Material Design Will Rock your Socks Off

July 10, 2014 - Written By Nick Sutrich

Over the years Google has refined Android from a super basic looking touch interface complete with boring grey buttons and a very Windows 98-esque look, into the beautiful design that Android L will represent to users when it’s finally released in the Fall.  While you can get your hands on the next big version of Android via the Android L preview, there are still very few apps that have been redesigned to fit with the new look and feel of Android L.  As a way to help everyone visualize exactly what a full Android L ecosystem could look like, we’d like to bring you 10 of the most beautiful design details found in Google’s Android L design language, Material Design.


material-design-animations Google has taken the normally minimal design of Android and has made it dynamic, starting with animations.  We’re not talking spinning the screen as you move from one app to the other, we’re talking about fully interactive clicks and interactions with apps.  For instance on the calculator app, instead of the button just lighting up as you press it, a circular animation emanates from your finger press, much like water rippling in a still pond.  Google showed off lots of these little animations, showing the refresh button spinning around after you press it, the play button morphing into a pause button and vice-versa, as well as many other detailed and intrinsically unique animators  found in Android L.

Grid-Based Designmaterial-design-based-gridsEver feel like the gmail app is just too busy, trying to smash too much on the screen at once?  Bothered by those unsightly margins (or lack thereof) in some apps vs others?  Material Design hopes to fix these problems and more by introducing grid-based design that helps align elements on the screen for a more aesthetic look and feel, and maximizes space while creating a friendly touch environment by creating enough space for your fingers to accurately press on-screen elements without clicking the wrong thing.  While fat-finger syndrome won’t ever be cured, this is a great step toward not only helping make it easier to not press the wrong button, but to also make the elements on screen more evenly spaced, neat and tidy.

Colors All Over

material-design-colors Modern design loves color, and so does Android L.  Google has taken what was normally a lack of color in the Holo design guidelines and turned them on their head, taking the black, white and blue color scheme of Holo and transforming their look with a brand new bright and pastel color palette.  This not only brings a fresh coat of paint to Android, no pun intended, but helps bring out design elements that are important to the user. Color makes the OS feel fresh and gives each app a unique look, allowing apps to differentiate themselves not just on content but also even more on looks than ever before.

Unified Design no Matter the Size material-design-consistent

One of the biggest strengths of Android for a long time is its ability to scale the app for the screen shape and resolution.  Unlike iOS where the resolution has to be specifically designed for, so that developers end up with a handful of specific different designs for each app  they develop, Android automatically scales UI elements to match that of a phone or tablet.  This is why we can use things like Xposed App Settings and change our phone apps into tablet versions without any issues.  Google is taking this one step further though and making it easier to keep the overall design elements on the screen no matter the size, so while tablet apps may have a completely different interface right now versus their phone versions, Google’s vision is just to fit more information on the screen as the screen grows in size rather than giving you a completely different user interface.  For example Gmail’s interface will always feature a left-hand menu and a right-hand list of emails, but when viewed on a tablet it’ll have an additional pane to read emails in without having to leave the list of emails.  This is a welcomed change and again brings down the confusion level when dealing with the same app on different devices.

Universal Icons

material-design-icons Ever go to copy and paste in an app and can’t figure out what the heck all those buttons up top mean?  Some of them just make no sense, and sometimes they are completely different depending on which app you use.  This sort of inconsistency is not only confusing, it’s terribly frustrating when you’re just trying to get stuff done.  The Android design team has recognized this and will now be providing a specific set of default icons for all developers for actions like this, so no more different looking buttons and icons for regular things in every single app!

Dimensional Design

material-design-levels Android L features a 3D interface, but not a gimmicky one like we saw on Amazon’s Fire Phone.  This one is specifically for design, and the UI elements themselves will always appear to be on a flat 2D plane.  Android L’s 3D design allows developers to built their app in layers, and then specify how high above or below each layer is relative to one another.  This allows the system to automatically render drop shadows and other 3D reference points to accentuate certain UI elements and make the whole experience more fluid and rich.

Nested Panes

material-design-nested Along with the 3D UI comes the ability to nest panes within one another, so for example when scrolling down in the dialer the top-most UI elements actually shrink and go away, eventually locking the tabs in place at the top as you scroll down.  These sorts of UI highlights allow developers to make prominent UI elements the constant ones, while still being able to provide context sensitive information like call logs and search bars until the user scrolls down.  It also gives developers the option to fancy up their apps with some sweet new animations too!

More Prominent Actions

material-design-prominent Tired of trying to figure out where the compose button is, or which menu you need to go through to get to the action you need?  While Google cleaned a lot of this up with Android 4.0 Ice Cream Sandwich by taking away that nasty menu button, there’s still the problem of having too many important settings nested in menus all around.  Android L gives developers the ability to prominently float the important buttons over the rest of the app using that new 3D engine we already talked about, and it helps bring the important actions out in the front so you’re not having to constantly look for them.  Things like making the compose button the prominent action button in Gmail, or making the play button super obvious in Google Play Music when searching for what to listen to.  These easier design elements bring a level of simplicity to Android that’s been needed for a while, and helps get away from nested settings and options in menus you might not otherwise find.

Super Smooth Transitions

material-design-transistions Sometimes moving from one screen to another can be a jarring experience.  Things don’t always move the way they should from one action to another, but rather just pop in as if they were sitting there waiting for you.  Android L does away with that by giving the user one consistent paper-like experience, using your screen as a canvas and moving objects in as you interact with them rather than having them appear immediately.  This makes your screen feel like an interactive work of art rather than a bunch of herky-jerky elements presenting themselves on screen at once.  Moving from folder to folder in the photos app above, for example, slides each photo away in a group while bringing the next set of photos in as a separate group, bringing about seamless transistions for your whole screen.

It’s everywhere!material-design-web

Google is banking on Material Design being the next big thing, and not just for Android but the entire web as well.  This has led them to create a brand new way to design web pages, termed Polymer, and makes it super easy for developers to continue that consistent UI experience on Android into their website.  This even includes the ability to color theme individual elements on-screen based on colors around them, as well as transistions and other key elements of Material Design.  Google wants you to love Material Design and see it in as many places as possible, not just your phone, and wants to place that power into the hands of web developers everywhere.