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

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

Create new Maui project
Add new Xaml-Page
Add Shell.TitleView to the newly created page
Add a Image to the Shell.TitleView and add HorizontalOptions="Center" VerticalOptions="Center"
Replace content of MainPage with a Shell
Add the xml-Namespace xmlns:local="clr-namespace:MauiApp1"
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

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 8
Comments: 16 (1 by maintainers)

Most upvoted comments

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

HausBJB on May 5, 2022

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.

RamenTurismo on Mar 13, 2023

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: Screenshot 2023-02-19 at 22 34 06 Screenshot 2023-02-19 at 22 33 51

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 😏

myrup on Feb 19, 2023

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.

pengalo on Mar 21, 2022