Custom TitleView shows small white border on either side

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>

score 2 · Accepted Answer · answered May 09 '19 at 20:46

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;
}

score 1 · Answer 2 · answered May 10 '19 at 07:38

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};

    }

Thank you. I only added the BoxView so everyone could clearly see the issue I was trying to fix. The BoxView is not part of the final solution :). — John Livermore, May 10 '19 at 16:59

IvanF. · Answer 3 · 2022-11-07T17:58:31.547

1

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>

edited Nov 07 '22 at 17:58

answered May 27 '20 at 15:03

IvanF.

513
10
18

score 1 · Answer 4 · answered Jun 29 '21 at 14:57

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" />

Custom TitleView shows small white border on either side

4 Answers4