CODEWITHSUNDEEP
google-chrome-app
owencm
owencm

Reputation: 8884

Set status bar color using Chrome Mobile Apps

I would like to set the status bar to either a block color or transparent, as in the Google Now app.

Is this possible, and if so, how?

Upvotes: 3

Views: 1444

Answers (1)

mmocny
mmocny

Reputation: 8855

Chrome Apps on Mobile leverage Apache Cordova, and we have decided to include the cordova statusbar plugin by default.

We have included the following cordova statusbar plugin <preference>'s by default:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />

Which basically means that your app content does not overlay the statusbar (content is pushed down, just like on iOS 6), and the default color is black. This was a good default for chrome apps, but is not the ideal design for iOS 7 look and feel.

Luckily, you can trivially change these values inside the config.xml file at the root of your project. For your specific request, I would change StatusBarOverlaysWebView to true and change the color to whatever you app background color is, then remember to run cca prepare. You will also need to adjust your application look and feel to not interfere with the statusbar text (i.e. perhaps by adding padding-top to the html element).

config.xml has other preferences that you can change (though you should not change other tags, as those are auto updated). You can read about the various <preference>'s by looking inside the plugins/ folder for each plugins' README.md file which usually does a good job of describing itself, or by researching cordova application development online.

Upvotes: 2

Related Questions