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/
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.
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');
}
I'm trying to customize the logo on the signIn page using the following:
AWSMobileClient.sharedInstance()
.showSignIn(navigationController: self.navigationController!,
signInUIOptions: SignInUIOptions(
canCancel: false,
logoImage: UIImage(named: "MyCustomLogo"),
backgroundColor: UIColor.black)) { (result,
err) in
//handle results and errors
}
However, the default logo still appears but the background does turn black. I have MyCustomLogo in the project but it just does not take. I'm fairly new to Apple development so I'm sure I'm missing something simple or maybe I'm not. I just need help please :)
I am able to add a custom logo to my Amplify Drop-In UI using the iOS SDK. You have to be sure to add your logo assets in the Assets.xcassets folder for your project to know where to look and override. Also, I presume you named your logo MyCustomLogo as you show in your code block above. You don't need to specify .png.
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