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 :)
Related
I've developed a small Xamarin.Forms.Shell app and I didn't found how to apply a custom color for the StatusBar Foreground and Background.
My app use a very basic color scheme:
black for the Foreground of the NavigationBar and the TabBar
white for the Background of the NavigationBar and the TabBar
I would like to keep the same colors for the StatusBar, but it's not the case:
on iOS, the StatusBar color seems to be managed by the LightMode/DarkMode
=> on devices that doesn't manage DarkMode, or when LightMode is active, the StatusBar informations are well displayed
=> but it's not the case when the DarkMode is active, as these informations are hidden
on Android, the StatusBar color seems to be managed by the styles.xaml file and the android:statusBarColor property
=> if I specify a white color, the StatusBar informations are not visible as there are also white
=> whereas if I specify a gray color, the StatusBar informations are well visible
So I've tried to apply a solution given there:
this doens't work on iOS: I still have the same behavior, as the StatusBar informations are not visible as there are also white when DarkMode is active
this seems to work on Android, but this doesn't cover all Android versions (as it works from Marshmallow version)
=> How could I manage the iOS StatusBar Foreground color? Is it enough for Android?
you can use the following method for iOS (white status bar with black texts)
public void SetWhiteStatusBar()
{
Device.BeginInvokeOnMainThread(() =>
{
if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
UIView statusBar = new UIView(UIApplication.SharedApplication.KeyWindow.WindowScene.StatusBarManager.StatusBarFrame);
statusBar.BackgroundColor = UIColor.White;
UIApplication.SharedApplication.KeyWindow.AddSubview(statusBar);
}
else
{
UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
{
statusBar.BackgroundColor = UIColor.White;
}
}
UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.DarkContent, false);
GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();
});
}
Check my question/answer
Xamarin Forms - how to change the status bar color without a navigation page
The full working sample is here https://github.com/georgemichailou/ShaXam
Op solved the problem by the solution in this thread.
public void SetColoredStatusBar(string hexColor)
{
Device.BeginInvokeOnMainThread(() =>
{
if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
{
UIView statusBar = new UIView(UIApplication.SharedApplication.KeyWindow.WindowScene.StatusBarManager.StatusBarFrame);
statusBar.BackgroundColor = Color.FromHex(hexColor).ToUIColor();
UIApplication.SharedApplication.KeyWindow.AddSubview(statusBar);
}
else
{
UIView statusBar = UIApplication.SharedApplication.ValueForKey(new NSString("statusBar")) as UIView;
if (statusBar.RespondsToSelector(new ObjCRuntime.Selector("setBackgroundColor:")))
{
statusBar.BackgroundColor = Color.FromHex(hexColor).ToUIColor();
}
}
UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);
GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();
});
}
=========================================================================
Does you app support dark mode?
If you app is under DarkMode, the status bar text color will change to white. If you does not support Darkmode and still white for the Background of the NavigationBar and the TabBar, white text won't visible under white background.
You can use AppThemeBinding to set different color under different mode.
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light=White, Dark=Black}" />
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Light=Black, Dark=White}" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="White" />
<Setter Property="Shell.TabBarForegroundColor" Value="Red"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="Black"/>
<Setter Property="Shell.TabBarTitleColor" Value="Black"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
If you want to keep the status bar color same under different app theme, use a custom renderer:
[assembly:ExportRenderer (typeof(ContentPage), typeof(customPageRenderer))]
namespace App479.iOS
{
public class customPageRenderer : PageRenderer
{
public override void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
this.NavigationController.NavigationBar.BarStyle = UIBarStyle.Default;
}
//if you content page does not have a NavigationBar, oveerride this method
public override UIStatusBarStyle PreferredStatusBarStyle()
{
return UIStatusBarStyle.DarkContent;
}
}
}
And also add a key to info.plist:
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Refer: preferredstatusbarstyle
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
Does anyone know a way to make Android Status Bar transparent with React Native?
NOT TRANSLUCENT, Transparent.
I am using react-navigation too.
Just use it like this:
Tested with: "react-native": "0.60.4" and "0.61.5"
<StatusBar translucent backgroundColor="transparent" />
This is working for me on android
<StatusBar
backgroundColor="transparent"
translucent={true}
/>
Unless you are using Statusbar as a component, try this method.
useFocusEffect(
useCallback(() => {
StatusBar.setBarStyle("dark-content");
Platform.OS === 'android' && StatusBar.setBackgroundColor('transparent');
StatusBar.setTranslucent(true);
}, []),
);
Do not forget to give some paddingTop to the most outer View.
<StatusBar translucent backgroundColor="transparent" /> is the way to go, thx to #Felipe Rugai
However, 2 things to know:
If you are using <Header /> component from react-native-elements, it already have <StatusBar /> included, using its statusBarProps instead.
If you are using WIX react-native-navigation, they have a separate way to dealing with the status bar, refer to this and this. They said it is incompatible with React Native's , however, looks like they work well together for me.
Also android native code/config discussed in another stackoverflow topic solution will override by <StatusBar /> hence doesn't work well.
If you're talking about the status bar of the OS (the one you pull down to access wifi/bluetooth/settings etc), try adding this to you MainActivity.java:
private void hideNavigationBar() {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
}
And you can call that^ function in this function from the same MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
hideNavigationBar();
}
However, if you're talking about the StatusBar of the app, try adding this to your App.js file
static navigationOptions = {
header: null
}
This solution can solve the issue if you're working with expo
in your package JSON /expo configuration: you can add a property to overwrite the default StatusBar for android
"androidStatusBar":{
"translucent":false
}
you can set it usingStatusBar.setBackgroundColor(Colors.TRANSPARENT);
Try this to make transparent statusbar in android
container: {
flex:1,
paddingTop: 20
},
add display flex and paddingTop to your main View component
In react native, if you are using expo you can go to the app.json file and add status bar color. After this background color of the status bar for the complete app will change.
"androidStatusBar": {
"backgroundColor": "#105846"
},
Check the linked page.
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/
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: