I am having some issues with Ionic on Android. I think the problem occurred when I updated the Ionic version for my app. Problem is that the status bar doesn't overlay the webview. I have tried setting the StatusBarOverlaysWebView preference to true in config.xml and I've tried calling the different methods of the global StatusBar object with no success. I can control the status bar's background color and visibility, but I can't get it to overlay the webview. This is what it looks like right now
Unfortunately, the StatusBarOverlaysWebView method in cordova-plugin-statusbar is only supported by the iOS platform:
StatusBar.overlaysWebView
On iOS 7, make the statusbar overlay or not overlay the WebView.
StatusBar.overlaysWebView(true);
Description
On iOS 7, set to false to make the statusbar appear like iOS 6. Set the style and background color to suit using the other functions.
Supported Platforms
iOS
Here are some other methods. Check the link below (but it doesn't seem to work anymore)
http://www.martinadamko.sk/posts/translucent-bar-android-278
Or
How about this?
The easiest way to do this is as follows:
/* ionic 2 app.ts */
import { Component } from '#angular/core';
import { Platform, ionicBootstrap } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
#Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class App {
private rootPage: any;
constructor(private platform: Platform) {
this.rootPage = LandingPage;
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
// Status bar theme for android
if (platform.is('android')) {
StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString('#c42626');
}
});
}
}
The result is like:
Related
Im creating an app and I need to keep working in background but this doesnt work.
Im using:
https://github.com/katzer/cordova-plugin-background-mode
I am on Visual studio with ionic , so I execute:
ionic cordova run android
The app is launched and working. The first view is a Login, I fill the login and this take me to the second view (thit is a tab page).
On this page I add:
import { BackgroundMode } from '#ionic-native/background-mode/ngx';
constructor(private background: BackgroundMode){
this.background.enable();
console.log(this.background.isEnable());
console.log(this.background.isActive());
this.background.moveToBackground();
}
Also, console.log shows that is enable, but not active (that is normal).
The problem is that when I move the app to the background, is “restarted” . I mean that when I open the app from the background it takes me again to the first view where I should do the Login. So this is not working.
This image appears all the times that I open the app for background, and after this, the app is restarted
Am I doing something wrong? Is visual studio?** How can I solve it?**
Thanks!
Use plugin Background Mode
ionic cordova plugin add cordova-plugin-background-mode
npm install #ionic-native/background-mode
Then use it like this:
import { BackgroundMode } from '#ionic-native/background-mode/ngx';
export class AppComponent {
constructor(private backgroundMode: BackgroundMode) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.backgroundMode.enable();
});
}
}
What do I have to do to make the phone take the background of my Ionic application? It always appears in black.
Change your statusBar settings.
In app.component.ts you can use the following values:
StatusBar.styleDefault
StatusBar.styleLightContent
StatusBar.styleBlackTranslucent
StatusBar.styleBlackOpaque
For example:
initializeApp() {
this.platform.ready().then(() => {
//this.statusBar.styleDefault();
this.statusBar.styleBlackTranslucent();
this.splashScreen.hide();
...
Other options you can find at https://github.com/apache/cordova-plugin-statusbar
Is there a way to change the marked color below? I'm using using Ionic v3.x and couldn't find anything here and within Ionic docs. Thanks upfront for any tips!
The Header Color plugin is used to change the header color in multitask view.
Plugin github page: https://github.com/tomloprod/cordova-plugin-headercolor
Example from Ionic documentation:
import { HeaderColor } from '#ionic-native/header-color';
constructor(private headerColor: HeaderColor) { }
...
this.headerColor.tint('#becb29');
Try this:
// set status bar to white
this.statusBar.backgroundColorByHexString('#ffffff');
Doc link:
https://ionicframework.com/docs/native/status-bar/
If I remove the status bar, every time I open the keyboard (
or a notification arrives) there is a bug.
App.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.hide();
}
});
});
Any suggestion? Thank you!
Updated:
Actually, there is a fix for cordova-plugin-statusbar that has been committed on github and should land in version 2.1.4+ (i.e. you don't need an additional plugin like my original answer stated). To get the latest cordova-plugin-statusbar now, type
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git
The statusbar should now stay hidden when interacting with inputs, keyboard etc.
Original Answer:
I fixed it with the plugin cordova-plugin-fullscreen
cordova plugin add cordova-plugin-fullscreen
Then, after deviceready:
StatusBar.hide();
if (typeof AndroidFullScreen !== 'undefined') { // Fullscreen plugin exists ?
function errorFunction(error) { console.error(error); }
AndroidFullScreen.isSupported(AndroidFullScreen.immersiveMode, errorFunction);
}
ImmersiveMode keeps it hidden while interacting with inputs, keyboard etc.
Note: as per the cordova-plugin-fullscreen docs, this method is only supported on Android 4.4+. There is also a 'lean mode' for Android 4.0+, but this shows the status bar while interacting (not ideal)
I am trying to use this plugin below to set the statusbar to transparent. But i can not achieve it, i can change it to different colours, but not transparent.
https://github.com/apache/cordova-plugin-statusbar
Also it works on my Android 5.0.2, but not 5.0.
I tried just leaving out the hexcode value like they suggested but doesnt work, i tried all those below, none of those set my statusbar to transparent.
<preference name="StatusBarBackgroundColor"/>
<preference name="StatusBarStyle" value="lightcontent" />
if (cordova.platformId == 'android') {
StatusBar.styleBlackTranslucent();
}
I tried so long to fix this issue. There is no documentation how to make status bar transparent for Android included paddings for the <ion-header>
So here is how i fixed it. After platform ready in app.component.ts:
if (this.platform.is('android')) {
Plugins.StatusBar.setOverlaysWebView({overlay: true});
Plugins.StatusBar.setBackgroundColor({color: '#33000000'});
}
Don't set background color if you want your status bar transparent. In my case it will be a black status bar with 20% opacity.
And DONT'T FORGET to force Ionic for the statusbar padding when you import its modules in app.module.ts. Otherways your header will be sticky to the status bar:
IonicModule.forRoot({_forceStatusbarPadding: true})
Versions:
ionic-native/status-bar: ^5.0.0
capacitor/android: ^2.1.0
Using
IONIC Native Status Bar Plugin
app.component.ts:
import { Platform } from '#ionic/angular';
import { StatusBar } from '#ionic-native/status-bar/ngx';
...
...
constructor(private platform: Platform, private statusBar: StatusBar){
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.overlaysWebView(true);
this.statusBar.backgroundColorByHexString('#33000000');
});
}
app.module.ts:
IonicModule.forRoot({_forceStatusbarPadding: true})
I just found it, its not mention in their documentation, but its simple as that:
<preference name="StatusBarBackgroundColor" value="transparent" />
And voilà, Its working :)