CODEWITHSUNDEEP
cordovastatusbarinappbrowser
user3375149
user3375149

Reputation: 11

how to change status bar color in phonegap 3.4 in inappbrowser?

My current app is in phone gap 3.4. Can I control the status bar background colour in InAppBrowser? Any changes through status bar plugin is reflected on native pages but not on web?

Currently InAppBrowser shows its background colour on the status bar. Either I need to change the status bar colour on web or I want the InAppBrowser to start from the top of the page without leaving 20 pixel margin which will give me an iOS7 app look with status bar by default being transparent.

Upvotes: 1

Views: 8183

Answers (3)

pizzamonster
pizzamonster

Reputation: 1266

Update 2018

You can pass the required toolbar color in the options like this (red):

cordova.InAppBrowser.open(url, '_blank', 'toolbar=yes,toolbarcolor=#FF0000');

Upvotes: 1

James
James

Reputation: 718

To change the colour of the status bar and navigation bar access the file CDVInAppBrowser.m (located in ${PROJECT_ROOT}/platforms/ios/${PROJECT_NAME}/Plugins/cordova-plugin-inappbrowser/CDVInAppBrowser.m

Status Bar:

Change greenColor to any UIColor

- (void)createViews
{
    self.webView.backgroundColor = [UIColor greenColor];
}

Navigation Bar

Change redColor to any UIColor

- (void)createViews
{
    self.view.backgroundColor = [UIColor redColor];
}

Status Bar Text Colour

- (UIStatusBarStyle)preferredStatusBarStyle
{
    // White
    return UIStatusBarStyleLightContent;

    // Or Black:
    // return UIStatusBarStyleDefault;
}

Upvotes: 1

Bodie Leonard
Bodie Leonard

Reputation: 123

There are many options you have customizing the status bar per cordova v 3.4

Hide Status Bar:

  • First (in xcode) click your project
  • Then click the Resources folder to expose your .plist
  • Once you located the .plist click the (+) Next to Information Property List
  • Add this property View controller-based status bar appearance with value as NO

Change Status Bar to Translucent:

  • First (in xcode) click your project
  • Find TARGETS, ckick on your project name under TARGETS
  • Find Deployment Info then see the Status Bar Style drop down list of options

Change Status Bar Background within confix.xml

  • First (in xcode) click your project
  • Find confix.xml

  • Add these lines to the xml right before the

    < /widget >
    < preference name="StatusBarBackgroundColor" value="#ff0000" />

Add Status Bar Plugin To Cordova

  • Within terminal.. cd into your project where cordova is located

  • Run this command
    cordova plugin add org.apache.cordova.statusbar

  • Once the plugin is loaded you can then work with the plugin via the onDeviceReady function that fires when cordova has loaded.

Example:

onDeviceReady: function () {

  StatusBar.overlaysWebView(false);
  StatusBar.hide();
  App.phoneGapApp.receivedEvent('deviceready');
}

Hope this helped.

Upvotes: 3

Related Questions