PhoneGap iOS App: Change Background Color

benjamin — Sun, 15 Dec 2013 15:54:36 +0000

By default, PhoneGap generates an iOS app with a black background.
This works fine for a lot of apps, but especially with iOS 7 and the transparent status bar, you might want to changes this to better fit to your app’s design.

The color can be changed in your iOS apps main view controller. PhoneGap generates this by default to platforms/ios/Classes/MainViewController.m

In this file, search for the method
- (void)webViewDidFinishLoad:(UIWebView*)theWebView
and change the line
theWebView.backgroundColor = [UIColor blackColor];
to whatever color you perfer. For example to have a white background:
theWebView.backgroundColor = [UIColor whiteColor];

PhoneGap app: Fix iOS 7 Status Bar

benjamin — Sun, 15 Dec 2013 15:28:38 +0000

The new iOS 7 comes with a slightly changed status bar (the one presenting time, battery status, etc.). While the update is just about a smooth integration with total app, this has a big change to PhoneGap based apps, especially when using a fixed header.

Using a fixed header means, the header will remain under the status bar, but the content will slight under the header but will be visible again under the transparent status bar.
The reason for this is, the webView container consumes the device’s complete screen including the status bar area (just in the background).

Even the november 2013th PhoneGap release (3.3) does not fix this issue. However, different approaches exist in the web. They can be categorized into web-technology only and native iOS solutions. While the former let’s you stay in your web technology world as much as possible, the later is more performant and let’s you keep your PhoneGap app a little bit more platform independent.

HTML/CSS/JavaScript Solution

Many such solutions can be found on stackoverflow and in blogs. However, the most reasonable I found and successfully used is described by cornbeast R&D. It just made some minor modifications to make it work on all iOS devices and support jQuery Mobile headers and panels:

Add the following CSS definitions:
/** * Styles to fix the new iOS 7 transparent status bar */ #ios7statusbar { width:100%; height:20px; background-color:white; position:fixed; z-index:10000; } .ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane { margin-top: 20px; }
(I put them into a platform specific PhoneGap merges css file to keep the main css definitions clear from this platform specific one. )

Add a JavaScript based user agent detection to your app initialization:
if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) { $("body").addClass("ios7"); $("body").append('

');

}

Cornbeast recommend to put this into a $(document).on(“pageinit”, function(){}); handler. My apps already have an initialization block. So I use to add this check in this block.

iOS Native Solution

An alternative is to modify the apps main view as recommended on stackoverflow
It requires native modifications of the iOS app code, but is available when the app is loaded and allows the PhoneGap app to work in a clear container. For example, no need to adapt any margins, dimensions etc.

To apply this modification, open the main view generated by PhoneGap in the Xcode project. By default, you will find it in platform/ios/Classes/MainViewController.m

Adapt the method - (void)viewWillAppear:(BOOL)animated to match the following adaptation:
- (void)viewWillAppear:(BOOL)animated { // View defaults to full size. If you want to customize the view's size, or its subviews (e.g. webView), // you can do so here.


    // handle iOS 7 transparent status bar

    // according to http://stackoverflow.com/questions/19209781/ios-7-status-bar-with-phonegap

    //Lower screen 20px on ios 7

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {

        CGRect viewBounds = [self.webView bounds];

        viewBounds.origin.y = 20;

        viewBounds.size.height = viewBounds.size.height - 20;

        self.webView.frame = viewBounds;

    }

[super viewWillAppear:animated]; }

Phonegap – Bar54

PhoneGap iOS App: Change Background Color

PhoneGap app: Fix iOS 7 Status Bar

HTML/CSS/JavaScript Solution

iOS Native Solution