[Bug] [Android] Shell.TitleView incorrect positioning of content

[LarsBehl]

Description

Adding a Custom Shell.TitleView to a page results in incorrect positioning of the content. Adding a Shell.TitleView according to the Xamarin.Forms documentation, the image should be displayed horizontally and vertically centered. Instead, it is positioned too far to the right and bottom. A repro is available here

Actual behaviour

Expected behaviour

The added image is a menu icon (same as the one for the navigation, just in black). The image should be vertically and horizontally centered in the titlebar.

Steps to Reproduce

1. Create new Maui project
2. Add new Xaml-Page
3. Add Shell.TitleView to the newly created page
4. Add a Image to the Shell.TitleView and add HorizontalOptions="Center" VerticalOptions="Center"
5. Replace content of MainPage with a Shell
6. Add the xml-Namespace xmlns:local="clr-namespace:MauiApp1"
7. Add FlyoutItem to the Shell with ShellContent ContentTemplate="{DataTemplate local:HomePage}"

Version with bug

Preview 10 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 11/API 30

Did you find any workaround?

No response

Relevant log output

No response

[Avalyah]

I have the same issue. Any content placed in the Shell.TitleView is either not showing or showing to the right and bottom. Setting a margin causes same results. Also in most cases on the Windows platform nothing shows even when it does show on Androiid. Seems like there is some positioning issue perhaps that makes the content offset enough that it is not visible.

[shimingsg]

Verified Repro with Android 11. Repro project
3559.zip

[PureWeen]

I don't think this is a new issue
xamarin/Xamarin.Forms#4848

The TitlleView unfortunately doesn't do a great job of centering itself.

We have a spec over here in Forms
xamarin/Xamarin.Forms#9107

That we can hopefully implement inside .NET MAUI at a later point in time.

I've copied the issue to here
#5063

[pengalo]

This is definitely a new issue introduced with .NET Maui. Worked fine in Xamarin.Forms, but now I get exactly the same behavior as @LarsBehl describes. Have not found any work around so it is a complete blocker to moving forward. It looks like this is verified so you can reproduce it. Please don't wait until a "new feature" is implemented "at a later point in time." This is a serious bug in .NET Maui.

[RedChops]

I feel like this is an issue as old as time. I remember having it in Xamarin Forms too and eventually just gave up on having a custom title bar. I remember setting negative margins worked back then, even if it was janky, now that hack doesn't seem to work in Maui anymore.

Basically, something like this:

    <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition />
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>

            <BoxView Color="Green" />
            <Label Text="Row 0, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

            <BoxView Grid.Column="1"
                 Color="Blue" />
            <Label Grid.Column="1"
               Text="Row 0, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

            <BoxView Color="Green"
                 Grid.Column="2"/>
            <Label Text="Row 0, Column 2"
               Grid.Column="2"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        </Grid>
    </Shell.TitleView>

Which should absolutely fill the whole navigation row, produces this:

With that baffling, ever-present left-hand margin that's haunted me for years and makes using TitleView absolute guesswork at best for creating a clean layout.

[HausBJB]

Hello, I have the same problem. Is there a solution for that? it can't be that you move something like that to NET7

They want Maui to start now and the important issues are being postponed

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[SmartmanApps]

Hello. I just wanted to add that I have the opposite issue in Windows - I've set the TitleView text to be right (End) aligned, but it's left-aligned, and not just left-aligned, but overlapping the Title of the page itself so that it's no longer visible. All of this worked correctly in Xamarin. I suspect I may be able to fix it by putting a Grid into the TitleView, and then putting both the Title and my other content into the Grid, but I didn't need to do that in Xamarin.

The code I've used with the following screenshots is...
(Xamarin)

Title="⌂ Home";
Label titleLabel=new Label{
    HorizontalTextAlignment=TextAlignment.End,
    FontSize=Device.GetNamedSize(NamedSize.Medium,typeof(Label)),
    };
titleLabel.SetBinding(Label.TextProperty,new Binding(nameof(EMVM.TitleLabelText),source:EMVM));
titleLabel.SetBinding(Label.TextColorProperty,new Binding(nameof(EMVM.TitleLabelColour),source:EMVM));
NavigationPage.SetTitleView(this,titleLabel);

(MAUI)

Title="⌂ Home";
Label titleLabel=new Label{
    HorizontalTextAlignment=TextAlignment.End,
    FontSize=25,
    };
titleLabel.SetBinding(Label.TextProperty,new Binding(nameof(Storage.UserNameText),source:Storage));
titleLabel.SetBinding(Label.TextColorProperty,new Binding(nameof(Storage.UserNameColour),source:Storage));
NavigationPage.SetTitleView(this,titleLabel);

And how it looks...
(Xamarin)

(MAUI)

So the TitleView text is left-aligned instead of right-aligned, and obliterates the Title, but if I remove the TitleView then the Title re-appears...

UPDATE: I was able to get the Title appearing again by making it into a Label and putting both labels into a Grid in the TitleView, however I was still completely unable to get the latter label right-aligned. I even tried putting an extra column into the Grid and putting an empty label into it, but the last label remains left-aligned. TextAlignment.End is just completely broken when used in TitleView.

Here's what I tried...

Label emptyLabel=new Label{
    Text="                                 ",
    };
Label loginLabel=new Label{
    HorizontalTextAlignment=TextAlignment.End,
    FontSize=25,
    };
Label titleLabel=new Label{
    Text="⌂ Home",
    FontSize=25,
    };
Grid titleGrid=new Grid();
titleGrid.AddColumnDefinition(new ColumnDefinition{Width=GridLength.Auto});
titleGrid.AddColumnDefinition(new ColumnDefinition{Width=new GridLength(1,GridUnitType.Star)});
titleGrid.AddColumnDefinition(new ColumnDefinition{Width=GridLength.Auto});
titleGrid.Add(titleLabel,0);
titleGrid.Add(emptyLabel,1);
titleGrid.Add(loginLabel,2);
NavigationPage.SetTitleView(this,titleGrid);

FURTHER UPDATE: I was able to get a Margin added on the left of the first column in the Grid, but it didn't work anywhere else. You just can't seem to right-align anything except for the first column.

[solayuta]

I feel like this is an issue as old as time. I remember having it in Xamarin Forms too and eventually just gave up on having a custom title bar. I remember setting negative margins worked back then, even if it was janky, now that hack doesn't seem to work in Maui anymore.

Basically, something like this:

    <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition />
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>

            <BoxView Color="Green" />
            <Label Text="Row 0, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

            <BoxView Grid.Column="1"
                 Color="Blue" />
            <Label Grid.Column="1"
               Text="Row 0, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

            <BoxView Color="Green"
                 Grid.Column="2"/>
            <Label Text="Row 0, Column 2"
               Grid.Column="2"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        </Grid>
    </Shell.TitleView>

Which should absolutely fill the whole navigation row, produces this:

With that baffling, ever-present left-hand margin that's haunted me for years and makes using TitleView absolute guesswork at best for creating a clean layout.

The same situation, this question drives me crazy!!!
They are trying to delay the problem until .Net7?

[myrup]

How is this still an issue almost a year and half later🤔 ? The above is not a working solution if the objective is to center the title text horizontally aligned to the page.

Apart from the above mentioned offset (perhaps created by an unimplemented flyoutmenu?!), back button visibility can also offset the view:

So if we were to center the title to the page using Shell.TitleView (as far as I can tell) not only would we have to offset the error-looking leftside offset but also according to whether or not the back button is visible.

Our current workaround is to disable Shell.TitleView and re-implement backbutton behaviour 😏

[emyfreya]

I am getting the same problem in a company project. How is this bug allowed to pass ?
I've tried searching from which component this might come from, and no luck, because I cannot show the TitleView in the Live Visual Tree.
Such a simple feature wasted 😿

I'll end up doing like @myrup suggested, just for 10 missing pixels.

EDIT :
On android, I found out how to do it, because of this answer on StackOverflow.

You'll have to add somewhere in your app :

        Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.ContentInsetStartWithNavigation = 0;
            handler.PlatformView.SetContentInsetsAbsolute(0, 0);
#endif
        });

And I guess learn more about handlers.

[SmartmanApps]

Hello anyone at Microsoft (other than the bot)?

Has this fallen through the cracks? It says above that this was added to the .NET7 milestone, and I'm on .NET7 now (and VS 17.5.1) but still have this issue.

[LarsBehl]

@SmartmanApps The issue was moved to the backlog so it is curretly not fixed. Hopefully they'll work on this issue for the .NET 8 release of MAUI

[SmartmanApps]

Hello @LarsBehl,

Thank you for that information, but can we please have more timely updates? The last previous response from someone at Microsoft here says it was added to the .NET7 milestone (in fact 2 comments say that), and there's no subsequent comments to say that it was moved to the backlog instead.

[homeyf]

Verified this issue with Visual Studio Enterprise 17.6.0 Preview 2.0. Still reproduced with the mentioned project above.
https://github.com/dotnet/maui/files/8130076/3559.zip

[rezamohamed]

This is still an issue in .NET 8, is there a suitable answer on how to center text in the titlebar with a flyout page/back button in Android/iOS?

[guypld]

I can confirm that the issue is easily reproducible in Visual Studio 17.8.4 and .NET 8, similar to the previous reports.

[malsabi]

How is this still an issue almost a year and half later🤔 ? The above is not a working solution if the objective is to center the title text horizontally aligned to the page.

Apart from the above mentioned offset (perhaps created by an unimplemented flyoutmenu?!), back button visibility can also offset the view:

So if we were to center the title to the page using Shell.TitleView (as far as I can tell) not only would we have to offset the error-looking leftside offset but also according to whether or not the back button is visible.

Our current workaround is to disable Shell.TitleView and re-implement backbutton behaviour 😏

Can you show us the workaround please?

[glenfinen]

I fixed this by adding a 4th phanton grid column to the right of width 16, then everything is centered. At least on the android emulator and my phone, havent tested others. I also bind that column width to match the left side when there in auto navigation there and set it OnSizeAllocated to match.

This code grabs the screen width and compares it to the title width. Whatever is leftover has been gobbled up by the left side dead or nav area. So i set the phantom column to be that width.

protected override void OnSizeAllocated(double width, double height)
{
    var titleView = Shell.GetTitleView(this);
    var screenWidth = DeviceDisplay.MainDisplayInfo.Width;
    var density = DeviceDisplay.MainDisplayInfo.Density;

    var units = screenWidth / density;

    var titleHeight = titleView.Height;
    var titleWidth = titleView.Width;
    var margin = titleView.Margin;

    if (BindingContext is DetailViewModel vm)
    {
        var matchingWidth = units - titleWidth;
        vm.RightToolbarWidth = matchingWidth;
        //RightToolbarColumn.Width = matchingWidth;
    }
    InvalidateMeasure();

    base.OnSizeAllocated(width, height);
}

[plppp2001]

I'm ran into this issue also.

[TheXenocide]

Just wanted to note that we're also finding it difficult to center content in the navigation title view. For those interested, this issue also existed back in the Xamarin days.

[rezamohamed]

Issue persists with .NET 8.0.90