Can't center Shell Title on Android

LuizCarneiro-4620 40 Reputation points
2024-11-05T01:52:10.2933333+00:00

Can't for the life of me figure out a way to center the Shell Title on Android as it's on the left (start) on Android vs the center on iOS, I want to make both centered.

Original AppSheel.xaml code:


<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    Title="MauiApp1">
    <FlyoutItem
        Title="Settings"
        Icon="settings_24">
    </FlyoutItem>
    <ShellContent
        Title="A"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage"
        />

</Shell>

Result:

User's image


So far, I tried to use this Shell.TitleView approach, but even this is not centered:

Do note that this A title is not dynamic as it's being used just to illustrate the problem

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    Title="MauiApp1">
    <Shell.TitleView>
        <Grid HorizontalOptions="Center">
            <Label Text="A"
                   VerticalOptions="Center"
                   HorizontalTextAlignment="Center"
                   FontSize="20" />
        </Grid>
    </Shell.TitleView>
    <FlyoutItem
        Title="Settings"
        Icon="settings_24">
    </FlyoutItem>
    <ShellContent
        Title="A"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage"
        />

</Shell>

Unexpected result: User's image

Expectation is that A to be centered with the "front facing camera slot"

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,714 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 77,256 Reputation points Microsoft Vendor
    2024-11-05T02:35:35.9666667+00:00

    Hello,

    Can't center Shell Title on Android

    You can do it by getting MaterialToolbar and setting toolbar.TitleCentered=true in ToolbarHandler.

    Firstly, please remove your above <Shell.TitleView> code in the AppShell.xaml

    Then open your MauiProgram.cs and find CreateMauiApp method. Please add following code.

    Microsoft.Maui.Handlers.ToolbarHandler.Mapper.AppendToMapping("CustomNavigationView", (handler, view) =>
                {
    #if ANDROID
                    Google.Android.Material.AppBar.MaterialToolbar materialToolbar=handler.PlatformView;
     
                    materialToolbar.TitleCentered = true;
    #endif
                });
    

    Best Regards,

    Leon Lu


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.