Designing apps for Android 4.4 KitKat – what’s new?

November 20, 2013

Nexus 5 Android 4.4 KitKat Hands On

Got an eye for design? Google wants it to shine through in the latest version of Android. With 4.4 KitKat, Google’s barely two week old update is providing even more ways for developers to make apps their own. Design is becoming an increasingly important topic among those in the mobile community; a conversation that has grown louder since the passing of Steve Jobs.

steve jobs

Walter Isaacson’s biography revealed just how demanding Jobs was when it came to design and Apple’s products have undoubtedly reflected that over the years. Regardless of how you lean on the “iPhone vs. Android” debate, there is no doubting the solid construction and beauty of Apple’s hardware. While carrying that design sense over to software isn’t necessarily winning over as many users as the hardware that supports it, consumers are becoming increasingly more conscious of how the technology they carry “looks”.  On the other side, Android was the first to take a step into modern software design with version 3.0 Honeycomb. This minimal design with “Tron” blue accents took queues more from its digital origins than the physical world users had long been accustomed to.

Google has continued to refine the Android Design Guidelines, and the Holo design language is something that even the most casual enthusiast is now aware of. Having been around long enough to gain maturity and acceptance, Google is now encouraging developers to not only embrace the look of Android in the newest release of KitKat, but also make it their own. These are some of the ways in which developers and designers can get their apps up to date with the look of Android 4.4.

Color

creative_vision_main (1)

First and foremost, Google is okay with color, though the reduction of Holo blue accents is readily evident in the new version of Android. With KitKat, Google has opted for more white and translucent gradients. Not to eliminate color, but to allow more of an app’s content to show through. This includes the developers own brand or look. It has been common since the introduction of Ice Cream Sandwich (4.0) and API level 14 for developers to employ either the default Holo Light or Holo Dark themes for their applications.

principles_looks_sameWhile Google has stressed cohesion throughout the UI environment, they also encourage developers to branch out and add their own touches. The first way to do this is by utilizing color throughout the application. This can be done by “overriding the Android framework’s default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs and scroll indicators”.

touch_feedback_communication

This means that if red is a prominent color in your company’s logo or app icon, you are free to further incorporate that into the overall design of your application. Another way that Google allows developers to use color is in the action bar. Developers are encouraged to “look for opportunities to use high-contrast color for emphasis”. Google’s own Play Music app is a great example, where Orange has replaced all hints of blue throughout the app to give it a very distinct look among Google’s other properties.

Android’s new white and translucent accents are likely the most recognizable change in KitKat to the average user. Android Developer Advocate, Nick Butcher, explains that this was done to allow more of the content and the application to stand out and have it’s own personality, rather than enforce Android’s personality. While discriminating users will find that Holo blue still prevails in KitKat, it has however been selectively removed in areas such as the notification bar and buttons touch feedback. In KitKat, buttons are a noticeable element of the UI which the Android team feels is open for customization as well. Developers are even encouraged to stay away from Holo blue when providing feedback. Instead, it is recommended that you use a color from your application, logo or icon, or stick with a more neutral white or grey.

Logo

principles_sprinkle_encouragementApp developers are also free to incorporate their company’s logo into their app’s design. While traditionally this has been accomplished with a vibrant splash screen, the Android team has also opened up the action bar to your brand. Developers have always been free to place their app’s icon and name in the upper left-hand corner. In more recent API levels, there is now the freedom to use a logo in place of these other assets. This can be especially useful when your application takes color and other design cues from your company’s logo. This placement in the action bar can also be carried throughout all screens of your app.

Icons

Screen Shot 2013-11-09 at 3.37.17 PM

The Android Asset Studio already serves as a great resource for developers to incorporate approved icons into their applications, but what if you’ve got other ideas? In KitKat, Google now encourages more flexibility in this area when designing to fit your brand. For developers using a style of icon that is different from the flat elements of the Holo UI typically found in the action bar, it is suggested that you adapt the existing Android icons to fit your established design. They also offer some additional flexibility in allowing developers to incorporate icons that do not originate from within Android. It is important to note that these cannot be icons carried over from another platform, such as the “share” button from Windows Phone. But if you have previously been using a set of icons that is specific to your application on another platform and is independent from the assets of other platforms, then you are good to go.

As these are are some of the more obvious changes for icons in the Android Design Guidelines, another more subtle change is also being made. As display densities continue to increase, a polished and well designed launcher icon is becoming even more important. Android Developer Advocate and DashClock creator Roman Nurik emphasizes in a recent Android Design In Action, that developers not creating XXHDPI versions of their launcher icons, will want to start. A primary example as to why this is, can be found in the somewhat anomalous Google Experience Launcher included on the Nexus 5.

Android 4.4 KitKat display densitites  copy

Whether Google will make this new launcher available in the Play Store, or even on other devices running stock Android, is still up in the air. What is certain is the way this new launcher takes advantage of the extremely high pixel density of the Nexus 5 display. Icons on the GEL are 25% larger than on previous iterations of the Android home screen. While this could easily become more prevalent on tablets in the near future and likely more phones, it is noted that developers and designers may want to begin considering densities as high as XXXHDPI when providing launcher icons.

Transitions

Ensuring that your user has a continuous and intuitive layout from frame to frame will benefit its ease of use immensely.

Ensuring that your user has a continuous and intuitive layout from frame to frame will benefit its ease of use immensely.

Any developer who has tried to incorporate custom transitions into an application knows that it can be a time consuming process. The Android team is looking to free up some of that development time by including new API’s to handle transitions. These will essentially allow animations to be automated. There are now a set of default transitions which the system can implement when a change is detected and no animation is specified. Developers are also able create “scenes” within the app while assigning certain transitions or animations where desired. For those of us on the user side, think of this as creating a story board in code for which Google has now provided a template.

 Immersive Mode

immersive-mode

Last but certainly not least in KitKat’s notable UI changes is Immersive Mode. While the notification and navigation bars have been made transparent in order for an app to provide a more full screen experience, immersive mode is designed to get them out of the way completely. This now lets app developers take the entire screen to provide a truly immersive experience with their content.

Immersive Mode Android 4.4 KitKat Android Developers

In previous versions of Android, developers have had access to a similar feature called Leanback Mode. In apps such as YouTube, leanback mode can be observed when a video is taken full screen. The navigation bar and notification bar both disappear as they would in immersive mode, but touching the screen in any way will bring them back into place. While this has worked fine for apps that do not require the user to interact with the screen while the desired content is being displayed, other applications such as games have not been able to benefit. Immersive Mode differs from leanback in that it requires the user to perform an additional gesture of swiping from the edge of the screen to restore the system UI bars. This will now allow apps, such as games or news readers, where the user is regularly interacting with the screen, to remain in full view. Developers can also utilize this new feature with confidence, as any app using the API’s will provide a visual cue to the user that a swipe from the edge of the screen is all that is needed to return the system bars to their familiar positions.

Android 4.4 KitKat Different form factors copy

Android has seen fewer visual changes since the introduction of Honeycomb and Ice Cream Sandwich making those found in the KitKat release that much more notable. The platform has matured into a cohesion of Google’s many properties and become a major part of the greater design conversation. While skimming through the Play Store can still turn up plenty of remnants from the Froyo days, the mainstream development community has embraced the “new” Android and most of what can be found on an average phone finally looks like it belongs. As Google continues to provide new tools for developers to make their apps great, the real benefit will be to the user. And as it should be with good design, he won’t even know it.

Be sure to check out the following resources if you want to know more!

Let us know what you think of Google’s focus on design, and what some of the best designed apps are down below!

Comments

  • AbbyZFresh

    Too much flat. Need some shine in the designs a bit.

    • MasterMuffin

      We need Jony Ive! ;)

      • mumusen

        For that, Jony himself would need inspiration from 4.4.1 ;-)

    • Toss3

      I personally love how the new Android 4.4 looks and feels (wish more apps would adhere to the standards set by Google). Could still use a dash of steroids to run smooth (animations especially).

      • GrebGoneBad

        Hear Hear. I have the Nexus 5 and even on this excellent device you do notice a certain amount of jittering when scrolling between homescreens and browsing web pages. You would have thought after so long Google would have sorted this out by now. =P I think more polish is needed in order to make transitions and animation totally seamless.

  • Phil Rigby

    I really like the new look, but there’s still too many apps that have the old yellow progress bar from Cupcake days, for example. A lot of apps need properly updating.

  • utilitybelt

    I’d care about all this more if I had 4.4 on my nexus 4…

    • GrebGoneBad

      Root? XD
      No, seriously, the Nexus devices are all due to get KitKat within the next few weeks so not long to wait now. =)

    • dell

      My update just came through on my Nexus 4! :)

  • Tempary

    Immersive Mode has the bonus of stopping you accidentally leaving game, one of the main issues with on screen buttons

  • Jerome – Android Holo Colors

    Thanks for your link to Android-Holo-Colors :-)