How to adjust shadow in translucent navbar?

Question

To make the navbar translucent, I used Custom Renderer:

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using AView = Android.Views.View;
using App1;
using Android.Content;
using TransparentNavBarXForms.Droid.Renderers;

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace TransparentNavBarXForms.Droid.Renderers
{
public class CustomNavigationPageRenderer : NavigationPageRenderer
{
    public CustomNavigationPageRenderer(Context context) : base(context)
    {

    }

    IPageController PageController => Element as IPageController;
    CustomNavigationPage CustomNavigationPage => Element as CustomNavigationPage;

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        CustomNavigationPage.IgnoreLayoutChange = true;
        base.OnLayout(changed, l, t, r, b);
        CustomNavigationPage.IgnoreLayoutChange = false;

        int containerHeight = b;

        PageController.ContainerArea = new Rectangle(0, 0, Context.FromPixels(r - l), Context.FromPixels(containerHeight-t));

        for (var i = 0; i < ChildCount; i++)
        {
            AView child = GetChildAt(i);

            if (child is Android.Support.V7.Widget.Toolbar)
            {
                continue;
            }

            child.Layout(0, 0, r, b);
        }
    }
}
}

To add a shadow, I added the property: android: elevation = "4dp" to Toolbar.axml The shadow was added not only from the bottom of the navbar, but from different sides inside, due to the transparency effect, this is visible. How to make a shadow only from below? Is it possible to implement it somehow differently?

Answer 1

First of all, if your background color of navigation bar is transparent, you cannot set the android:elevation="4dp".

Here is another way to create a shadow. You can use BoxView to simulate a shadow. Add BoxView in your contentPage.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             Title="test"
             x:Class="CustomNavigateBar.MainPage">

    <StackLayout>
        <!-- add showdow here -->
        <BoxView VerticalOptions="StartAndExpand" HeightRequest="10"/>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

Use custom renderer in android.

[assembly: ExportRenderer(typeof(BoxView), typeof(MyBoxViewRenderer))]
namespace CustomNavigateBar.Droid
{
  public  class MyBoxViewRenderer: BoxRenderer
    {
        public MyBoxViewRenderer(Context context) : base(context) { }
        protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e)
        {
            base.OnElementChanged(e);
            ViewGroup.SetBackgroundResource(Resource.Drawable.boxview_shadow);
        }
    }
}

boxview_shadow.xml

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="rectangle">
      <solid android:color="#CABBBBBB" />

    </shape>
  </item>
</layer-list>

Here is running sceenshot.