Search code examples
androidhtmlcordovaphonegap-pluginscordova-plugins

Customize overview bar color in Android app developed with Cordova

I've developed an app using Cordova/Phonegap and web technologies, and want to personalize it a little bit, but I'm having trouble finding how.

In android, when users press the Overview button (the squared one), they can see an overview with cards for each of the open apps, these cards have a top bar with an icon and the name of the app. As shown in this screenshot:

grey bar for 90 seconds app

By default the bar color is gray, but I would want it to be a different color that matches better the colors in my app. This is something that can be seen in other apps, that have different colors for that bar (e.g.: Chrome bar is blue, Email bar is orange, etc):

example showing other apps with other color bars

I tried using the theme-color meta value, but that didn't do anything. I also tried the status-bar plugin, this one changed the status bar when the app is open, but still shows the default gray bar in the overview card mode.

Is it possible to customize this overview bar color with Cordova/Phonegap? How would it be done?

Solution

  • Install:

    cordova plugin add cordova-plugin-headercolor

    Usage:

    -.cs

    window.plugins.headerColor.tint("#becb29");

    OR

    -config.xml

    <preference name="HeaderColor" value="#becb29" />

    Here is doc.

    enter image description here