How to add shadow below Status bar in android and ios in xamarin forms?

Question

I am using MasterDetailPage in xamarin forms. I want , when user open the master page, some shadow should show between status bar and master detail page.Like in attached image. It looks like master page is below the status bar and some shadow is showing there.

How I can set status bar and master page of master detail page like this.

Bruno Caceiro Bruno Caceiro · Accepted Answer · 2018-12-14T15:04:55

For iOS you can have a CustomRenderer:

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using ShadowNavBarSample.iOS;
using CoreGraphics;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(ShadowNavigationBarRenderer))]
namespace ShadowNavBarSample.iOS
{
    public class ShadowNavigationBarRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (this.Element == null) return;

            NavigationBar.Layer.ShadowColor = UIColor.Gray.CGColor;
            NavigationBar.Layer.ShadowOffset = new CGSize(0, 0);
            NavigationBar.Layer.ShadowOpacity = 1;
        }
    }
}

For Android you need too first, create a file actionbar_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="4dp" />

   <gradient android:startColor="@android:color/transparent"
              android:endColor="#88333333"
              android:angle="90"/>
</shape>

And then edit your styles.xml

<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="colorPrimary">#2196F3</item>
    <item name="colorPrimaryDark">#1976D2</item>
    <item name="colorAccent">#FF4081</item>   

    <item name="android:elevation">4dp</item>
    <item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
</style>

How to add shadow below Status bar in android and ios in xamarin forms?

1 Answers