Customize Android app bar

1

I have an application developed on Cordova / Phonegap using Web technologies. When users click on the square button ( Overview ) a series of cards with the open apps is shown visually, and these cards have a color bar that includes the icon, name and closing button . As you can see in this capture:

I would be interested in using a different color instead of the gray by default, more in tune with the colors present in my app, as other applications that have different colors for that bar already do (eg Chrome, blue; , orange ...):

I tried using the meta value theme-color , but nothing changed. I also tried the status-bar plugin , and although it did change the color of the status bar (< em> status bar ) within the app, did not change the default gray color of the card in overview mode.

Can you customize that bar using Cordova / PhoneGap? How would it be done?

    
asked by Alvaro Montoro 08.10.2016 в 03:26
source

1 answer

2
  

Create a crosspost in StackOverflow in English and I received a response from mww that helped me solve the problem. This is an adaptation of that response.

What you want to do can be achieved by using the headercolor plugin. The steps to use it would be the following:

  • Install the plugin:

    cordova plugin add cordova-plugin-headercolor
    
  • In the file config.xml , add the preference for the color of the bar:

    <preference name="HeaderColor" value="#becb29" />
    
  • (Optional) If you want to change the color dynamically at runtime, you can do it using the following code in JavaScript:

    window.plugins.headerColor.tint("#becb29");
    
  • Here you have the plugin documentation (in English) and here you can see the result:

        
    answered by 14.10.2016 / 14:58
    source