Material Design Translucent Status Bar for Hybrid Apps

Android Material Design Translucent Status Bar for Hybrid Apps

Since some Android 4+ apps build for the platform can run full screen, and since 4.4+ apps using the Immersive mode can hide the status & navbar and allow for a truly fullscreen UI.

Here’s visualization of layout you should be able to achieve:

Android Status Bar Layers

So let’s do it.

1. Install Cordova Statusbar plugin to control status bar appearance:

$ cordova plugin add org.apache.cordova.statusbar

2. Install Cordova Translucent Statusbar plugin:

Note to myself: Now I’m thinking about more changes, maybe other plugin to use, maybe another post.

$ cordova plugin add https://github.com/ekuwang/cordova-plugin-statusbar.git
Fetching plugin "https://github.com/ekuwang/cordova-plugin-statusbar.git" via git clone
Installing "net.ekuwang.cordova.plugin.statusbar" for android
Installing "net.ekuwang.cordova.plugin.statusbar" for ios

3. Edit project’s config.xml

3.1 and create or update <platform name="android"> node:

<platform name="android">
    <preference name="Fullscreen" value="true"/>
</platform>

3.2 Update <widget> root node:

(Not sure about impact of the node, need to test it again.)

<preference name="StatusBarOverlaysWebView" value="true"/>

4. Edit www/js/app.js:

document.addEventListener("deviceready", function onDeviceReady(w) {
    // Should work on Andriod
    if(StatusBar && statusbarTransparent) {
        // Enable translucent statusbar
        statusbarTransparent.enable();

        // Get the bar back
        StatusBar.show();
    }
    // iOS only
    else if (StatusBar) {
        // Get the bar back
        StatusBar.show();
    }
}, false);

5. CSS

Here’s a handy CSS conditional class trick I come up with to track whether app is in immersive full-screen mode. Add ng-class directive to <body> node of your class:

<body ng-class="{'has-translucent-status-bar': window.screen.height === window.innerHeight}">

The CSS to add padding on the top header/bar than might look like this:

.platform-ios.has-translucent-status-bar .app-header-bar {
    padding-top: 20px;
}

.platform-android.has-translucent-status-bar .app-header-bar  {
    padding-top: 25px;
}

6. Test

$ ionic run android

According to Cordova Statusbar Plugin docs Android platform supports only two methods: StatusBar.show(); & StatusBar.hide();.

Enjoy! What’s your experience?

Cover image source

Edited 2015/03/16: Added 3D visualisation of layers.

  • Nice, but I have one problem, My status bar are not like the image, what I need to do to set a color without gradient? Take a look my example

  • Hi, unfortunately I think it’s tied to your current OS, and it’s probably default behaviour.

    Mine looks just as in the article’s cover image (semetransparent black background).

    Take a look at Google’s own apps as example, to see if they also experience the same behaviour.

  • Martin, I create this Plugin (https://github.com/iFernandoSousa/android-statusbar-manager.git);

    That allow using setColor and Transparent and Translucent and hide or show on just one plugin.
    This fix my problem and allow me to use exactly like your cover image. I will prepare an example and sent to you a link soon as possible.

  • > “you do not need use Cordova StatusBar”

    I’ve checked it just very quickly but here’s a question: is it Android exclusive? Original StatusBar was intended for iOS and Android.

    Have you covered scenario where I need to support more platforms?

    Thanks

  • So, yes, this is only for Android, because the “Cordova StatusBar” already allow set colors on iOS, I make this to allow setting color on Lollipop, just because that, the plugin required Android SDK 21 API Level.
    And using this plugin, you do not need use Cordova StatusBar, because they already allow you to Hide and Show statusBar.

    I don’t want to support more platforms because “Cordova StatusBar” already allow do that!

  • rajush

    In the example above, what’s the .app-header-bar class? Is that your custom class for the header? Does that name need to be changed based on the name that is being used for one’s app?

  • That .app-header-bar can be any DOM element selector. I used such generic name because I think it’s up to you to select target. You can pick by #id, or by any other class which elements to target.

    It can be your app’s headers, side menu, list, really anything you need to push down with padding or other positioning because of the OS status bar is over that element.

    Hope I clarified it for you a little bit :)

  • rajush

    Thanks. I was able to target my elements, and push down, but the color never changed. All I see is the translucent status bar.

    Also tried doing “StatusBar.backgroundColorByName(‘green’);”

    but nothing happens. Been playing around it a lot.Any suggestions?

  • Thanks for your inputs. I’ve edited article and added a 3D render to illustrate scenario a little bit more. But lets break this down to bits:

    1. Setting “ the app get’s overlaid by the OS’s status bar;
    2. All apps elements are essentially on layer below the status bar;
    3. You are able to make status bar translucent;
    4. You control element appearance via CSS.

    So what’s stopping you from colouring your `.app-header-bar` elements and giving the status bar look you want?

    However, if you want to get rid of the nearly transparent black background, in order to get Status Bar fully transparent, you probably need to use other Cordova plugin. (Maybe you can test out the Android-only plugin created and mentioned in other comment by Fernando Sousa.)

    Hope it helps :)

  • rajush

    Thank you for your response Martin Adamko. The transparent status bar seems to be fine, but in the CSS
    is there a way to target certain os version? Meaning, I want to apply that class only to android version 5+.

    .platform-android.has-translucent-status-bar .header-title{…}

    Currently, my problem is it targets all android and for versions below 5.0, since there is no transparency function, the padding gets applied and hence, the header bar looks big.

    Any suggestion on how to fix that?

  • Not sure about your “ classes, but here’s how mine look like:

    Those `platfrom-android5` and `platform-android5_0` are classes you are looking for. Just add “specificity” to status bar padding CSS:

    .platform-android5.app-header-bar {
    padding-top: 25px;
    }

    The `5_0` is targeted only for specific version, you might not want to use that :) But maybe the `grade-a` is tight to full-screen feature, which could make a good future-proof solution to work for now on. As with everything, run tests.

    Hope it helps.

  • Hey man! awesome plugin im using API level 21 with Lollipop but the background color never change, i put this in my config file, but there is no change, only works this StatusBarManager.hide();, another functions does not seem to work

  • Hey Fernando im using your plugin with android lollipop by is just not working with, the only functions that work is hide() and show(), set bg color not working :(

  • Have you check the Chrome Desktop Log with debug mode to see if have any error message?
    Have you using API level 21?
    Have you apache statusbar plugin installed too? If yes, can you uninstall to test?

  • MadMax11

    When I install this I get immersive mode no status bar – rather than the desired look transparent status bar?

  • MadMax11

    Hi Fernando would you consider uploading a working example – I can’t get it to work.