04
Jul
thumb
Last Updated: July 31st, 2014

Back in KitKat, we were introduced to translucent system bars, which gave app developers the ability to make the navigation and status bars semi-transparent. Reclaiming as much of the screen as possible became an obsession for many fans as they demanded their favorite apps go "full bleed." With Android L, Google is treating us to even more flexibility by allowing developers to set their own color for the status bar, or even turning it completely transparent.

hero

Fundamentally, the translucent status bar was nothing more than a very low opacity static gradient from black to fully transparent. This was added to protect the visibility of KitKat's all-white notification icons. Many developers and designers felt that this was still too limiting, as they were forced to choose between a default system status bar (which may vary by OEM) or a tinted gradient at the top edge of the screen.

Android L introduces a pair of new options. The first allows developers to apply a solid color to the status bar. This conforms to the Material Design ideology of providing system images and resources that can be easily branded with colors chosen by a designer or developer. There is no tint or special effect, and the color can be set to match an action bar, compliment a background color, or otherwise suit the brand.

Screenshot_2014-07-03-05-47-11Screenshot_2014-07-04-05-52-26

The other new option is full transparency. This is the alternative for developers and designers that are ready to throw caution to the wind and take full control of the experience. By setting the status bar to transparent, the only things actually drawn by the system in the status bar area are the icons and clock. This is basically the translucent option from KitKat without the gradient to protect the icons. Developers will have to be careful with this route, since a light or white background will make status icons invisible. The Google Now Launcher solves this issue by applying a long gradient, much longer in L than in previous versions of Android which limited the tint to just the status bar. It's also possible to keep the tinted status bar in apps.

Screenshot_2014-07-03-23-34-03Screenshot_2014-07-03-06-23-44Screenshot_2014-07-03-05-36-18

Left: Google Now Launcher w/ all-white background, Center: all-white background w/o tint, Right: all-white background w/ tint

For the truly adventurous app creators, full transparency allows for some potentially amazing and beautiful interfaces without resorting to turning off the status bar entirely. With moderately dark or flat backgrounds, possibly even with animations, it's easy to keep the icons discernable and still add a lot of character to an interface. Here are a couple of quick screens I threw together to demonstrate some of the simple possibilities.

(Note: these are not mockups. They are screenshots from an app with custom backgrounds. The notifications are real and have not been edited into the pictures.)

Screenshot_2014-07-04-04-20-42Screenshot_2014-07-04-04-27-31

Left: Includes Bird by IndigoCity, Right: Includes The Artist by TheEnderling

For developers interested in setting the status bar to their own color or full transparency, check out the documentation from the Material Design section. It's extremely easy, since it just requires setting the statusBarColor property through code or a theme. Regardless of how it's set, the app has to be using one of the Material themes as a base. And obviously, this will only work on API 20 or above. You can also catch a brief explanation in the session titled "What's new in Android" from Google I/O 2014.

It should be noted that the navigation bar at the bottom still cannot be set to fully transparent. It's not entirely clear from the talks or documentation, but it seems like that is probably intentional. However, there is a bug that prevents this area from taking on branding colors, which the documentation specifies is possible, so full transparency may still be an option once everything is working properly. It's still possible to use a colored background with a translucent navigation bar to achieve a similar effect.

Correction: The navigation bar can be modified with navigationBarColor. Thanks, Alan Viverette.

Sure, allowing apps to tweak the appearance of the status bar isn't a world-changing new feature; but little touches like this can elevate an app from a half-baked, incomplete interface to a truly elegant experience. We'll see apps like Evernote and Dropbox pushing their own brand colors into the status bar, and there will probably be a Twitter client or recipe database that pushes a mascot into the extra space, and there's (hopefully) nothing wrong with that. But this may also lead to unhindered use of art and motion. It's a small thing, but it just might be big for the right apps.

Cody Toombs
Cody is a Software Engineer and Writer with a mildly overwhelming obsession with smartphones and the mobile world. If he’s been pulled away from the computer for any length of time, you might find him talking about cocktails and movies, sometimes resulting in the consumption of both.

  • Phil Oakley

    Pretty sure immersive mode isn't the translucent status and nav bars; immersive mode is when you can go full screen on an image or piece of text, like in Twitter or Instapaper. It replaces light-out mode.

    On-topic: this is really cool. Will be good to see apps with cover photos use those photos in the status bar.

    • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

      Damn, that was my fault. I accidentally copied those paragraphs from the original draft when I switched computers. #fixed

      • Phil Oakley

        No problem, reasonably easy mistake to make :)

        • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

          It's the curse of working on 2 different operating systems and using 2 different editors for writing up a single post. :-

          • Phil Oakley

            I use OS X and Chrome OS and have problems getting code from one machine to the other (no GitHub on Chrome OS and right now Git support is limited, plus no Dropbox integration, although that's coming) so I understand your pain. I'd use Chrome OS full time if I could, but it's just not ready for that yet. Give it a few years.

          • Darrien Glasser

            How do you write code on a Chromebook? Are you using crouton and running Linux with it, or is it possible to write code in Chrome OS?

          • Phil Oakley

            Possibly long post coming up. I'll do a tl;dr at the end.

            At heart I'm a designer, for mobile apps - I traditionally focus on Android because Android designers are rare. Started getting into web apps a few months ago, and right now I'm writing a Chrome App in Polymer (polymer-project.org) - Polymer is basically material design for the web. This app will be for desktop first, but is going to come to mobile too eventually. As a Chrome App. I've tested it already and there are bugs but I can get it working.

            As for writing code on Chrome OS: at I/O Google quietly released Chrome Dev Editor (https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg), a text editor for Chrome OS. Feels a little like Sublime Text. It has Git integration (although it's limited) and some great functionality, like a way to run your Chrome App directly from the editor. So yeah, it's not code as in PHP or C, but web technologies like HTML, CSS, and JavaScript, extended by Polymer.

            On Chrome OS's future: I see Google as making Chrome OS the perfect tool for web development. The filesystem extension API is coming soon, which means Dropbox and other cloud storage providers will be able to plug directly into the Files app alongside Google Drive. But there's more: either someone could build a Git extension so Git repo's could plug directly into the Files app, or GitHub could build their own extension. So then you'd have repositories in the Files app. Which would be amazing.

            So, tl:dr: I use Chrome Dev Editor. I do not use Crouton as I like Chrome OS. Google may be making Chrome OS the perfect tool for web app/site development.

          • Darrien Glasser

            That's actually pretty cool. I didn't realize Google released something like that. It kind of makes me want to relearn HTML and all of that jazz so I can have a reason to get a Chromebook.

            Regardless, thanks for taking the time to write such a long explanation.

          • Daniel Smith

            Except that everything you can do on ChromeOS you can do on full operating systems.

            So it's pointless buying a Chromebook just for web development, when you're existing computer will work just fine.

          • Ambroos

            How do you like Polymer? I'm currently finishing up on an App Engine Cloud Endpoints project with matching Android app for a course at school and was planning on using Polymer for the web admin side. It looked like you could get started with it relatively easily.

          • https://plus.google.com/+MichaelBond codemonkey85

            Any reason you can't use Google Drive until Dropbox integration happens?

          • Phil Oakley

            Everything I have is on Dropbox. Migrating would be a hassle. Also, at least on OS X, Drive doesn't seem to sync as well as Dropbox does. Maybe the reverse will be true on Chrome OS; gotta wait for the filesystem extension API to see.

          • https://plus.google.com/+MichaelBond codemonkey85

            Drive does have hiccups on OS X (and Windows), but it seems pretty smooth on Chrome OS (big surprise). What do you use to move code back and forth now?

          • vincenzajlogsdon

            My Uncle
            Joshua just got an almost new white Kia Rio Hatchback only from working
            part-time off a home computer. try this R­e­x­1­0­.­C­O­M­

          • http://bertelking.com/ Bertel King, Jr.

            As a writer with relatively basic needs, I am able to get by most days now using only my Pixel. I'm living the dream.

            http://37.media.tumblr.com/8f896ad3bfbe80311f2cfc6b5589af16/tumblr_n362eyzDQa1smffdfo1_250.gif

          • Phil Oakley

            Wish I could do that. I have a HP Chromeboook 11 (won it from Google) - use it coding sometimes and Netflix, since HTML5 video playback is loads better than Silverlight.

          • burntcookie90

            Google Docs :D

          • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

            I use Drive for some stuff, Dropbox for other things. I'm just glad I'm not a full-fledged Mac user, because there's no viable interop between those file formats and apps. The only stuff I do on a Mac is either tapped into the Unix underpinnings, operates through a web browser, or it's with non-OS-specific formats (yay, text files)

          • https://plus.google.com/+MichaelBond codemonkey85

            "I'm just glad I'm not a full-fledged Mac user, because there's no viable interop between those file formats and apps."

            Can you give me an example of what you mean by this? I'm curious.

          • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

            A lot of hard-core Mac users swear by Apple's document apps: Pages and Numbers. Hardly anything can read those formats; at least, nothing convenient. I stick mostly to formats that are universal or close to it.

          • https://plus.google.com/+MichaelBond codemonkey85

            Oh, in that case I agree wholeheartedly. That's actually one of the reasons I love using Google Docs / Sheets so much.

  • Nick Riley

    :P~

  • Fatal1ty_93_RUS

    Working with navbar the same would be nice too :/

  • Blendi Krasniqi

    Google Nexus Launcher?

    • http://si97.com/ Saif

      Google Now Launcher.

  • http://si97.com/ Saif

    Google should also provide another attribute to invert status bar icon colors. Will be useful for apps using light action bar.

    • xx

      Some apps put full-color icons. Invert those would be weird.

      • miri

        They're gently coercing devs in the direction of simple, opaque status bar icons by using them as a mask over the brand color. Inverted/themed icons shouldn't be long after.

        • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

          I agree with this. There are multiple places in the preview docs with references to notification icons being used as masks. While I don't think that's implemented yet, I wouldn't be surprised if it becomes a thing by the official release, or more likely in a subsequent release (next year).

          • cellabonez

            i just saw that your profile pic now shows in status bar too#blind

  • Jesús Cuenca

    I don't like it. Now we have 3 tipes of status bar, all looks great, but remove consistency from the OS. I think.

    • http://AndroidPolice.com/ Liam Spradlin

      I think as long as the app's experience is generally cohesive with that on the rest of Android, the status bar is of little consequence. Basically what Google is saying by introducing three types of status bar is that the status bar, while remaining its own entity, can be another tool for making a new, compelling experience for your app.

      • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

        Heh, I think this is one time where I'm actually taking the stronger argument for design than you. I've always felt like the status bar was sort of this massive visual sign that declares, "Your app ends here!" Even with translucent status bars, it seemed like a block that the OS still controlled more than the app.

        When I look at transparent or color-shifted status bars, it feels sorta like looking at an infinity pool - the edge of the screen is the edge of the app. It's better than immersive mode because it's not hiding the notification icons. This lets them float above the app, and the app itself basically owns the whole screen (except the navigation buttons). I really feel like this is a pretty grant improvement, at least for anybody that cares about doing it well.

  • Juan Sebastian Camargo Visbal

    I read Material Design Guidelines, and I think you misinterpreted some things. Regular apps (with a standard action bar) should tint the status bar with a color slightyl altered (preferably darker) from the status bar.
    Thr nav bar remains black.
    Transparency is when there is like a header image underneath or trying to achieve "full screen/immersive mode'. 'm seriously worried developers ate going to fuck up this part. Status and action bar same color gives the notion of too much wasted space, and breaking the palette just breaks Material Design. And may look terrible.

    • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

      You're inferring that this post is a prescription for how to use this feature, when it is really just calling out the existence of it and some ways that it could be used. Even as you said, "Regular apps" should be a certain way, but I'm clearly describing apps that are designed to be visually extraordinary.

      Also, you mention the nav bar, but left out most of the defining clause: "When customizing the navigation and status bars, make them both transparent or modify only the status bar. The navigation bar should remain black in all other cases." - Source: https://developer.android.com/preview/material/theme.html#statusbar

      Frankly, if somebody is going to design a bad looking app, let's be honest, that probably would have happened with or without following the guidelines. If a quality designer knows what they are doing, it's ok to deviate in places where it won't harm usability and still produces an even more beautiful interface. This is the reason these are called "guidelines," which was an obscenely common misunderstanding with the Holo guidelines. Too many people took those as law without regard for their true purpose, which was just to give people a consistent standard to build upon.

      • Juan Sebastian Camargo Visbal

        I wasn't implying that. However, the look of the app should be approached with a designer perspective, and adhere to the guidelines in http://www.google.com/design/spec/material-design/introduction.html.
        But i'm sorry, i believe you were just trying to show the new things people can do in "L".
        In reality i'm just really scared developers screw it up.

        • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

          I'm really not worried about that. If the transition from Gingerbread to ICS and the original ADG (Android design guidelines) proved anything, it's that developers are going to screw it up. I'm a developer with some design sense, and I know that I'd screw it up.

          With that said, it's actually getting harder to build a total catastrophe. The screw-ups will always be there, but it's much easier to put together a decent looking app; and the principles of Material are, I think, easier to follow. As long as somebody at least gives it an effort, it should be pretty easy to make something that looks good and makes sense to use.

          As we also saw with Holo, the biggest problem is that Material tends to use some OS-level features that aren't available in older versions of Android. This results in a lot of developers ignoring aspects of the design language, because the only alternative is to use some fairly hacky workarounds. I've even seen some pretty hacky stuff in the Google apps while doing teardowns.

          • Juan Sebastian Camargo Visbal

            Like how they are screwing up Wear by releasing web browsers and file managers?

  • Matthew Willis

    I feel like Walt Disney had some input with Material Design.

    https://www.youtube.com/watch?v=kN-eCBAOw60

  • Godspoken

    Personally, this is my favorite part design-wise about L. I know there's no way praising Apple will go down well here, but for me, iOS has the absolute best look and animations ever since iOS 7 (of course, before that...), and if you've ever used a friend's iPhone, you'll have noticed the way that the status bar always fits in with the app you're using, thus pulling your attention to the app itself rather than the black bars on the top of the screen. I'm glad that this seems to be a thing for Android now, albeit slightly differently in that the status bar is (usually, but not always, as is evident by this article) a different color than the action bar (or whatever is on top) of the app.

    Now I can't wait to see the animations for myself. Again, that's an area where iOS blew pretty much everyone ever out of the water.

    • ghj

      I like how the statusbar text would automatically invert in iOS. If you have a light background the text would be black.

    • Shamur Stewart

      I thought I was the only one who thought so. With Android L Google has finally caught up in appearance and aesthetics.

  • taz89

    Well let's hope devs take advantage of this, like usual pick up of new features are slow in Android world, for example even today there's not many apps using the immersive mode and what do you expect when google didn't barely implement it themselves. Also let's hope the navigation buttons can also adopt colors etc.

  • ciasaboark

    Shouldn't that be API 21 and above? API 20 is 4.4W, and L will be API 21 when it becomes stable (right now you have to specify the api version as "android-L" in the manifest, and it still shows up as API version 20 in the sdk manager).

    • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

      This is a screenshot directly from Android Studio. At the very least, the necessary API appears to be accepted in API 20. There currently is no API 21 SDK available.

      I haven't looked too closely into what would be considered truly official and accurate, mostly because we'd be playing guessing games until Google makes something more official. But I think API 20 will turn out to be a temporary bucket for Android Wear, Android TV, and the L Preview. I think the API will see a lot of revisions before L is final, and it will become API 21. It's a lot like API 14, which became API 15 after a few weeks and only ever ran on the Galaxy Nexus.

      For all intents and purposes, I think it's safe to call it API 20 for now. Plus, if my expectations play out as I think they will, all of these devices will jump to 21 in a few months.

      • ciasaboark

        Setting the compile, min, and target API to 20 will result in an error when trying to use any of the Material themes. Since API 21 does not exist yet you have to target "android-L". I imagine if you check your gradle build file you will see thats what API 20+ is being translated into.

        In any case Google could have avoided confusion by releasing the L preview sdk explicitly as API 21, since anyone targeting that sdk would surely realize that it is still subject to change.

  • Ciorkino

    I really hope they make the navigation bar translucent as well

  • Alan Viverette

    You can set the navigation bar color in the preview, but the documentation is incorrect. The navigation bar doesn't inherit android:colorPrimaryDark from the theme. Instead, it can be set via android:navigationBarColor or from code.

    • http://www.androidpolice.com/author/cody-toombs/ Cody Toombs

      Indeed, that does work. I specifically tried something like that, but I must have been trying a protected name. Now I'm not sure what it was.

  • Walter Black

    Been waiting for developers to implement this into their apps ever since iOS 7 showed how beautiful it can be bro

  • tokuiten

    If you want an early preview, the Tinted Status Bar Xposed module will do this. It will try to automatically guess based on the action bar, but you can override it if you want.

    It looks really stunning in some apps.

  • Da Fuq

    I love it!

  • JayQ330

    I wish I could post a picture,I used an app from Xposed and I'm able to use full translucent notification bars without the gradient's & I'm no Dev, I was able to use this for google music, where the albums picture would show a black notification bar I was able to have it clear as can be with only the icons showing and the music album taking up the notification space, so music album & icons, if you'd press search or slide up the the current song playing from the bottom it would look as if it was already android L made. I could of even chosen yellow to match the color of the Google music theme. Devs didn't choose to use it because they didn't want to, like I said I'm not a Dev but most of my apps look as if they're native apps with translucent notification being used.

  • Guest

    Do your homework! Google Documentation says that Status- and Actionbar color should not be the same. And Statusbar should not be transparent unless there is a big focus on the content.

  • SlutMagnet

    It looks amazing. I really hope they're putting the same amount of effort in the performance improvements as well.

  • Tyce

    Its not working for me. Any ideas?