Custom TitleView shows small white border on either side - xamarin

Question

In the screenshot below, my app is showing a title bar with a small white border on the left and right sides. How can I get rid of this border when setting a custom TitleView? In the case below, the red box should stretch from edge to edge of the screen, but you can see the small white border on either side.
Here I set up the NavigationPage.
public partial class App : Application
{
public App()
{
InitializeComponent();
ContainerRegistration.Register();
var authPage = FreshPageModelResolver.ResolvePageModel<LoginPageModel>();
var authPageNavigation = new FreshNavigationContainer(authPage, NavigationContainerNames.AuthenticationContainer);
MainPage = authPageNavigation;
}
}
Here is the XAML that references the navigation page to set the TitleView contents to a BoxView.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:control="clr-namespace:WP.MobileMidstream.Device.Pages"
x:Class="WP.MobileMidstream.Device.Pages.LoginPage"
Visual="Material">
<NavigationPage.TitleView>
<BoxView BackgroundColor="Red" />
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Entry Placeholder="Username" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Answer 1

It seems that the Navigation bar has a default Padding set (although i could not find that documented anywhere), and i could not find a way to change that (without using custom renderers).
Nevertheless, if what you are looking for is simply get the whole bar of a desired color, you could set the BarBackgroundColor property of your page as follows:
protected override void OnAppearing()
{
base.OnAppearing();
((NavigationPage)App.Current.MainPage).BarBackgroundColor = Color.Red;
}

Answer 2

I suggest you don't add BoxView in NavigationPage.TitleView, just set BarBackgroundColor in App.xaml.cs, like this:
<?xml version="1.0" encoding="utf-8" ?>
<!--<NavigationPage.TitleView>
<BoxView BackgroundColor="Red" VerticalOptions="CenterAndExpand" />
</NavigationPage.TitleView>-->
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Entry Placeholder="Username" />
</StackLayout>
</ContentPage.Content>
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage()) { BarBackgroundColor=Color.Red};
}

Answer 3

It really depends on solution which you use for your toolbar.
Mostly updating toolbar in your android solution would be enough.
If it wont work it could be in your toolbar renderer (if you use) or in styles.xml
Check out for more solutions
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
Full Toolbar.xml
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />

Answer 4

This saved me! Add it in App.xaml
under ResourceDictionary
<ResourceDictionary>
<!--Global Styles-->
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="Red"/>
<Setter Property="BarTextColor" Value="White"/>
</Style>
</ResourceDictionary>