1

I've been trying to create the following layout in Xamarin Forms, a background image with a transparent status bar:

Image with transparent status bar

I want to have a background image with a transparent status bar like the image above. My issues are:

  1. I am unable to do this on Android while on iOS it's good. I've tried to set my status bar transparent and did it programmatically as well, it seems that my image just don't get behind the status bar.. I didn't found any relevant information on internet about it, only to change the AppTheme information which i did but is not working.

  2. On iOS, the status bar text color is black and as well am unable to change it to white.

I've spend two weeks trying to found out how to do it but am still unable to do it.. Should i create a custom renderer for this? Or is there a much more simpler way to do it?

Huby03
  • 801
  • 2
  • 14
  • 28

2 Answers2

6

This looks like to be using this code in styles.xml:

<item name="android:windowTranslucentStatus">true</item>
Ivan Ičin
  • 9,672
  • 5
  • 36
  • 57
4

You can use this solution and apply color.

In new Android.Graphics.Color(18, 52, 86, 255) you can pass RGBA for color.

Add this code Before LoadApplication() in MainActivity

if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
{
            Window.DecorView.SystemUiVisibility = 0;
            var statusBarHeightInfo = typeof(FormsAppCompatActivity).GetField("_statusBarHeight", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
            statusBarHeightInfo.SetValue(this, 0);
            Window.SetStatusBarColor(new Android.Graphics.Color(18, 52, 86, 255));
}

Add This code after LoadApplication() in MainActivity

App.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
Manish Sharma
  • 2,406
  • 2
  • 16
  • 31
  • Thank you! But still not working! My image is not behind my status bar (API 22). Iv'e used your color and reduce the alpha to have some transparency but unable to make it look like the image i uploaded above :/ Is there some stuff that i need to add in the style.xml?? – Huby03 May 29 '17 at 12:04
  • In fact, it's working without the code after the LoadApplication and i remove the SetStatusBar color as well, but my action bar is now in my status bar.. – Huby03 May 29 '17 at 12:09
  • You can add padding for you page. – Manish Sharma May 29 '17 at 12:17
  • Exactly what i am doing :) but unfortunately on my other views (which don't have background images) the status bar is white! Any idea how to set the status bar color programmatically on my views? – Huby03 May 29 '17 at 12:19
  • Add platform specific(Android) padding. Are you using Xamarin.Forms? – Manish Sharma May 29 '17 at 12:21
  • Yep this is what i did: But now since my statusBar does not have a color, it is white on my other screen where i also need to add my padding, or my action bar will be in my status bar! – Huby03 May 29 '17 at 12:25