I'm trying to make my app statusbar fully transparent on android
using this code on MainActivity.java
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
and thin on app.commponent
this.statusBar.backgroundColorByHexString('#11000000');
but still not fully transparent
app.component.ts
ionViewWillEnter() {
this.statusBar.show();
this.StatusBar.overlaysWebView(true);
this.StatusBar.backgroundColorByHexString('#000000');
}
Related
I use privacy-screen plugin to hide content when app is in the background, but it shows just gray background. I need to set splashScreen instead. Any suggestions?
I tried splashScreen plugin, but it is not working for me.
I don't know if it's the best way but I think that using Capacitor appStateChange from #capacitor/app (documentation) you could show and hide a screen with your logo when app is in background or foreground.
import { App } from '#capacitor/app';
App.addListener('appStateChange', ({ isActive }) => {
console.log('App state changed. Is active?', isActive);
if(!isActive) showLogoScreen();
else hideLogoScreen();
});
I hope it helps :)
For iOS, I did it simply in native code: just find the "applicationWillResignActive" method in AppDelegate and insert a view on top of the window.
For Android, sadly I couldn't find a better solution. The "gray background" you described is likely the implementation of Hide screen in 'Recent Apps List', but allow screenshots
I am using Ionic 6 and I have a button with a class:
.mybutton {
--background: #f39200;
--color: white;
}
When I press on the button on my mobile it goes blue.
I need to change that to another color.
I've tried:
.mybutton:hover,
.mybutton:active {
// another color
}
It's still blue.
How can I do that?
For that, you need to use another CSS variable.
try --ripple-color, I think it may help you.
As you can see from the images, the pager does not show in the IOS version of my Ionic App. The code must be right because its there in Android. Is there something I am missing?
<ion-slides pager="true" scrollbar="true">
Android
IOS
I am not sure if its ideal, but seems when I copied the options from here:
https://ionicframework.com/docs/api/slides#coverflow it worked. I assumed it would work with simple setup as I didn't need any other options...
It seems that the order in which components are rendered can affect the ios-slides pager in iOS, so you could try to make sure that it always renders at the end.
One workaround would be initializing a variable after the view is entered:
ionViewDidEnter() {
this.viewEntered = true;
}
And use it in your ion-slides to decide when to show it:
<ion-slides pager="true" *ngIf="viewEntered">
...
</ion-slides>
I'm developing Android application using Ionic 1 Framework.
On using the app on mobile the color of notification bar is not changing it remains default.
Is there any specific setting or plugin that we need to use, to change color of notification bar in accordance with Nav bar color ?
With the plugin "cordova-plugin-statusbar", (https://github.com/apache/cordova-plugin-statusbar) I've done it like this :
if (window.StatusBar) {
if (ionic.Platform.isAndroid()) {
StatusBar.backgroundColorByHexString('#0288D1');
} else {
StatusBar.styleLightContent();
}
}
but if you want to link it with your nav-bar, you should use ionic color variables, like "assertive", as in this link : http://ionicframework.com/docs/components/#colors
You can read the docs at the two URLs I gave you for more informations.
Install the plugin
cordova-plugin-statusbar 2.1.3 "StatusBar"
Then inside your app.run and $ionicPlatform.ready add the following code. that is
app.run(function($ionicPlatform,$cordovaStatusbar){
$ionicPlatform.ready(function() {
if(window.StatusBar) {
$cordovaStatusbar.overlaysWebView(false)
$cordovaStatusbar.styleHex('#E52225'); //change color
}
})
})
For more details about the plugin visit
https://github.com/apache/cordova-plugin-statusbar
Hi I'm creating an app based on ionic.
I want to set my StatusBar transparent like this
But I've tried any of codes, it always goes
Here is my app.js settings
if (window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.styleLightContent();
}
How can I make it right like the first picture goes?
I think you need to explicitly set the background color, like so
if (window.StatusBar) {
StatusBar.overlaysWebView(true);
StatusBar.styleLightContent();
StatusBar.backgroundColorByHexString('#14c1f3');
}
See also http://ionicframework.com/docs/v2/native/status-bar/