CODEWITHSUNDEEP
iosxcodecordova
Donald Hughes
Donald Hughes

Reputation: 6927

How to make PhoneGap status bar in iOS translucent?

I'm using PhoneGap to build an iOS app and can't seem to get that full-screen/translucent status bar effect to work.

I set the *-info.plist's Status bar style to Transparent black style (alpha of 0.5), which works while the splash screen is up. But the status bar turns black when PhoneGap's UIWebView is displayed.

I tried setting the apple-mobile-web-app-status-bar-style meta tag to black-translucent in my index.html, but that doesn't seem to have any effect.

I tried setting phonegap.plist's TopStatusBar option to blackTranslucent, but that didn't have any effect either. What am I missing?

Upvotes: 4

Views: 2643

Answers (2)

Esepakuto
Esepakuto

Reputation: 1332

Actually the Status Bar is translucent.

- (void)webViewDidFinishLoad:(UIWebView *)theWebView 
{
    // only valid if StatusBarTtranslucent.plist specifies a protocol to handle
    if(self.invokeString)
    {
        // this is passed before the deviceready event is fired, so you can access it in js when you receive deviceready
        NSString* jsString = [NSString stringWithFormat:@"var invokeString = \"%@\";", self.invokeString];
        [theWebView stringByEvaluatingJavaScriptFromString:jsString];
    }

    [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleBlackTranslucent;

    CGRect frame = theWebView.frame;
    NSLog(@"The WebView: %f %f %f %f", frame.origin.x, frame.origin.y, frame.size.width, frame.size.height);
    frame = theWebView.superview.frame;
    NSLog(@"The WebView superview: %f %f %f %f", frame.origin.x, frame.origin.y, frame.size.width, frame.size.height);

    frame.size.height += frame.origin.y;
    frame.origin.y = 0;

    [theWebView.superview setFrame:frame];

    return [ super webViewDidFinishLoad:theWebView ];
}

The log result of this code shows:

The WebView: 0.000000 0.000000 320.000000 460.000000
The WebView superview: 0.000000 20.000000 320.000000 460.000000

so fixing the webview.superview frame you can get the effect of UIStatusBarTranslucent

CGRect frame = theWebView.superview.frame;

frame.size.height += frame.origin.y;
frame.origin.y = 0;

[theWebView.superview setFrame:frame];

Upvotes: 4

maujee
maujee

Reputation: 11

You can try to add in your Info.plist for your app:

Key: Status bar style
Value:  Black translucent style

or if you are using raw key value pairs

<key>UIStatusBarStyle</key>  
<string>UIStatusBarStyleBlackTranslucent</string>

This answer is adapted from another given by mwbrooks for a similar question. Give it a try.

( Phonegap - How do i make the statusbar black? )

Or maybe, in your (void)viewDidLoad method of your **AppDelegate.m, you can put:

[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleBlackTranslucent;

Upvotes: 1

Related Questions