How to Gradient Fill the System Status Bar using Xamarin

Question

I have an Xamarin application, with a main page that looks like

this looks good (just dealing with Android). But what I want is the system tool bar (the bar that shows reception, battery etc.) to be the same color and with the same gradient as the ToolBar. So something that looks like

I have the following code for a CustomPageRenderer in the Android project

[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))] namespace Prox.Droid.Renderers { public class CustomPageRenderer : PageRenderer { public CustomPageRenderer(Context context) : base(context) { }

    protected override void OnElementChanged(ElementChangedEventArgs<Page> e)
    {
        base.OnElementChanged(e);

        var toolbar = MainActivity.RootFindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
        if (toolbar == null)
            return;

        // Default theme colors come from the shared project. 
        DefaultTheme defaultTheme = new DefaultTheme();
        toolbar.SetBackground(new GradientDrawable(GradientDrawable.Orientation.RightLeft,
            new int[] { defaultTheme.ThemeLightColor.ToAndroid(), defaultTheme.ThemeDarkColor.ToAndroid() }));
    }
}

}

and my styles.xml looks like

<?xml version="1.0" encoding="utf-8" ?>
<resources>

    <style name="MainTheme" parent="MainTheme.Base"></style>

    <!-- Base theme applied no matter what API -->
    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>

        <item name="colorPrimary">#17AEC6</item>
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">#009FB6</item>
        <!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
        <item name="colorAccent">#93CD8B</item>
        <!-- You can also set colorControlNormal, colorControlActivated colorControlHighlight and colorSwitchThumbNormal. -->
        <item name="windowActionModeOverlay">true</item>

        <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    </style>

    <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#17AEC6</item>
    </style>
</resources>

Where I have tried adding the following

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

to the style "MainTheme", this just greys out the bar. I have looked at This Question and Answers but this has not helped.

I have also attempted to use a custom NavigationBar with the background set as follows

public class CustomNavigationPage : NavigationPage
{
    public CustomNavigationPage() { }
    public CustomNavigationPage(Page root) : base(root) 
    {
        BarBackgroundColor = Color.Transparent;
        BarTextColor = Color.White;
    }
}

No joy.

Q. How can I make the system tool bar blend in with the ToolBar?

Answer 1

There are multiple ways of doing this!

The easier way is to set status bar transparent and make the toolbar that has the gradient bigger. You could check to see if the SDK version is greater than or equal to kitkat then add flags so that the layout has no limits and the navigation is translucent. Then just directly in your layout, place the back ground with your gradient and add what ever label/toolbar title you like to add.