Xamarin.Forms - How to make navigation/system bars transparent on iOS and Android

Question

I'm building an app in Xamarin.Forms for iOS and Android, and our design requires the top navigation, system bars, and the Android system navigation bar at the bottom of the screen to be transparent. Below is a mockup of one screen to give you an idea. We're looking to have the background image fill the entire screen.

I'm a pretty new developer so correct me if I'm wrong, but it seems that this kind of UI implementation is fairly platform-specific, and I'm struggling to find out how I should go about creating it in my cross-platform project.

I've been doing a lot of research over the last couple of days to figure it out, but as a dev with limited experience with Xamarin I'm having a hard time getting a solid idea of how to go about this. How would you create a UI in Xamarin.Forms that meets these requirements?

Will I need to create a custom renderer for the pages I'm using? Does this UI fall into the category of being too custom to be practical in Xamarin.Forms?

Any insight you can provide here would be much appreciated. Thanks in advance for your time.

You can have that look in a Page with no NavigationPage (this removes the navigation bar at the top) and the subsequent navigations (let's say clicking on news) can be using modal. That'd be using Navigation.PushModalAsync() instead on Navigation.PushAsync(). That could work for you. — pinedax
@apineda Thanks for that trick, it's definitely a step in the right direction, but I need to keep the navigation functionality and I'm not eager to reinvent it in a modal context. — Jonathan
@apineda It also doesn't make the Android navigation/system bars transparent, which is the other half of my question. — Jonathan

Jonathan Jonathan · Accepted Answer · 2017-01-26T01:21:18

Many thanks to @SuavePirate for his answer. It put me on the right track, and with additional research I was able to find a solution that fixed my issue.

To get rid of the navigation bar on main navigation page:

In HomeScreen.xaml.cs I added this line to the class constructor:

NavigationPage.SetHasNavigationBar(this, false);

To make navigation bars transparent:

I use this code to create the main page in App.xaml.cs

MainPage = new NavigationPage(new HomeScreen())
{
    BarBackgroundColor = Color.Transparent
};

To make status bars transparent on Android:

In OnCreate in MainActivity.cs in the .Droid project I added these lines right before LoadApplication(new App());

Window.AddFlags(WindowManagerFlags.TranslucentNavigation);
Window.SetBackgroundDrawableResource(Resource.Drawable.MyBackgroundPNG);
SetStatusBarColor(Android.Graphics.Color.Transparent);

I'll add iOS code when I figure out how to get it to work there. :)

Xamarin.Forms - How to make navigation/system bars transparent on iOS and Android

3 Answers