Xamarin.Forms (Android): Add Bottom Border to Navigation Bar

Question

I would like to add a bottom border to the navigation bar in Xamarin Forms on Android.

On iOS I already wrote a custom renderer:

public class CustomNavigationBarRenderer : NavigationRenderer
{
    private static readonly string ColorCode = "03d79e";
    private static readonly Lazy<UIImage> BorderBottomLine = new Lazy<UIImage>(GetPixelImage);
    
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (Element == null)
            return;
        NavigationBar.ShadowImage = BorderBottomLine.Value;
    }

    private static UIImage GetPixelImage()
    {
        UIGraphics.BeginImageContext(new CGSize(1, 1));
        CGContext context = UIGraphics.GetCurrentContext();
        context.SetFillColor(Color.FromHex(ColorCode).ToCGColor());
        context.FillRect(new CGRect(0, 0, 1, 1));
        UIImage image = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        return image;
    }
}

Unfortunately it's not that simple on Android, or at least I haven't figured it out yet.

Is there any simple way to implement a bottom border on the navigation bar?

Answer 1

NavigationPage.TitleView does not help , because its width does not fill with Navigationbar(has space on left side) and what's more important is that it only represents the content inside Navigationbar(but we want border) .

See the test below

<NavigationPage.TitleView>

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Spacing="0" Margin="0" Padding="0">
        <Frame BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</NavigationPage.TitleView>

---

To implement the bottom border android, you could create a shape with a xml file , and set the background on Toolbar .

1. Create a file named line.xml in folder Resources/drawable and copy the following code into it .

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
       <shape>
         <solid android:color="#06D1A7" />
       </shape>
     </item>
     <item android:bottom="4dp">
       <shape>
         <solid android:color="#221E4E" />   
       </shape>
     </item>
   </layer-list>
   

2. Set Background on Toolbar.xml

   android:background="@drawable/line"
   

---

PS : I tried to implement in custom renderer but no luck ,maybe someone could provide the solution in this way .

Answer 2

To make it very simple you can use the NavigationPage.TitleView to customize your Header. Refer to the documentation here for more details.

If that does not work out for you, then the solution would be to write a CustomRender for your NavigationBar extending from NavigationPageRenderer.

Please refer to the post here which has some amazing content about customizing the NavigationBar.

Answer 3

I realized it the following way:

Create a file called "custom_background_bar.xml" in the drawable folder in your Android project.

<?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="#ff292550" />
        </shape>
    </item>
    <item android:top="-3dp" android:right="-3dp" android:left="-3dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                    android:width="2dp"
                    android:color="#ff03d79e" />
        </shape>
    </item>
</layer-list>

The go to to the Resources/layout/Toolbar.axml file and set the following:

android:background="@drawable/custom_background_bar"

After that the background is set. You just should not set the BarBackgroundColor in your Xamarin.Forms project.

You could also create a custom Renderer that sets the Background property to Context.GetDrawable(Resource.Drawable.custom_background_bar)

Hint: Same works with the BottomNavigationView, if you want a top border, just use android:bottom="-3dp" instead of android:top="-3dp"