Web Niraj
  • Facebook
  • Flickr
  • Github
  • Linkedin
  • Twitter
  • YouTube
Online portfolio, code examples and developer blog
  • About
  • Contact
  • Portfolio
  • WordPress
Search the site...
  • Home
  • Blog
  • HTML: Customise the Status Bar on Android 5.0 Lollipop Devices

HTML: Customise the Status Bar on Android 5.0 Lollipop Devices

8

Chrome on Android 5.0 Lollipop supports custom colours on the system Status Bar with the inclusion of a simple HTML meta tag. I’ve even created a plugin you can use to easily change the status bar for websites created using WordPress.

The inclusion of the meta tag lets you customise the user experience beyond the browser on devices running Android 5.0 Lollipop. To do so, you just need to include the theme-color meta tag in the head of your HTML.

Code

You can use any hex colour code in the meta tab. Just take a look at some of the examples in the screenshots below. Or you can visit my website or this article on a compatible device to see it in action.

Screenshots



WordPress Plugin

The WordPress Plugin takes the meta-tag further, and allows you to use up to three different colours across your site. You can use a different colour for:

  • Home page
  • Blog Posts
  • Pages

If you have suggestions on how the plugin can be improved, please let me know if the comment section below or send me an email.

[Download Plugin]

Android, Android 5.0 Lollipop, HTML, Plugin, WordPress

8 comments on “HTML: Customise the Status Bar on Android 5.0 Lollipop Devices”

  1. Wesley says:
    November 30, 2014 at 6:35 AM

    This is a nice new feature of Chrome and Lollipop. Thanks for the plugin! It’s working well for me.

    If you could add an option to include a custom favicon, this would be a nice all in one option for getting a site to look great in Chrome and in the recent apps list. Of course, the favicon would also work in other browsers since it’s not a Chrome specific feature but that wouldn’t be a bad thing.

    Reply
    • Niraj Shah says:
      December 1, 2014 at 4:36 PM

      Good idea. I’ll include it in the next version of the plugin.

      Reply
    • Niraj Shah says:
      January 23, 2015 at 2:38 PM

      Just wanted to let you know that I just published Version v1.2.1 of the plugin, which includes a custom icon option. Thanks for the suggestion, and sorry for taking a while to get the plugin updated.

      Reply
      • Wesley says:
        January 23, 2015 at 9:27 PM

        Thanks! I’ll check it out!

  2. ricain says:
    January 13, 2016 at 5:05 PM

    Nice plugin 🙂 thank

    Why not add this meta too?

    Reply
    • Niraj Shah says:
      January 14, 2016 at 9:13 AM

      Which meta is that?

      Reply
  3. AndroidfastApk™ says:
    March 29, 2016 at 5:40 AM

    I do not understand where the icon is coming out

    Reply
    • Niraj Shah says:
      March 30, 2016 at 10:34 AM

      Have a look at the screenshots. The icon appears on the multi-tasking menu. You will see a “W” on my website (as there is no icon), but a icon on StackOverflow.

      Reply

Leave a Reply to WesleyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

StackExchange / StackOverflow

profile for Niraj Shah on Stack Exchange, a network of free, community-driven Q&A sites

Support Me

Buy Me a Coffee

PSN Profile

Tags

ACL Amazon Amazon Web Services Android Android 4.4 KitKat Android 5.0 Lollipop Apache Backup Bug Command Line Cordova cPanel / WHM Facebook Facebook Graph API Facebook PHP SDK 4.0 Facebook Social Plugins Fan Page Firewall Flash Gadget Geolocation Google Nexus 5 Hacking HTML5 iOS JavaScript jQuery Laravel 5 Linux NodeJS Parse PDF PHP Plugin Portfolio PS4 Review Security Server SSH SSL Sysadmin Tutorial WordPress WordPress Plugins
© 2011-2025 Niraj Shah
  • Blog
  • Portfolio
  • WordPress
  • About Me
  • Contact Me
  • Privacy Policy
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy