How to implement a floating central button in a .NET MAUI bottom navigation bar (.NET 9)?

I'm building a new mobile app using .NET MAUI targeting .NET 9. I need to implement a bottom navigation bar with a floating central action button, similar to the common design where the central “+” button appears above the navigation bar and remains centered.

However, I have no idea where to start with this layout in MAUI. I’m not sure which layout containers, positioning strategies, or controls would allow me to achieve this kind of design while ensuring it works properly on both Android and iOS.

What is the recommended MAUI approach to create this layout? Is there a native way to do this?

I would do it with Grids. The features of Grid are:

• 1. It can help partition your screen quickly
• 2. It can help allocate space evenly or according to ratios
• 3. Children in the same grid cell will stack on top of each other (this is key to your floating)

A mockup of your requirements will look like:

<ContentPage
    <Grid RowDefinitions="*,Auto">
        <!-- Insert here your main body at Grid.Row="0" -->

        <!--  Implement navigation bar with floating button  -->
        <Grid Grid.Row="1">
            <!--  Implement a navigation bar  -->
            <Border VerticalOptions="End">
                <Grid Padding="0,10,0,10" ColumnDefinitions="*,*,2*,*,*">
                    <Grid.Resources>
                        <ResourceDictionary>
                            <Style TargetType="Button">
                                <Setter Property="Padding" Value="0" />
                                <Setter Property="BorderWidth" Value="0" />
                                <Setter Property="BackgroundColor" Value="Transparent" />
                                <Setter Property="FontSize" Value="32" />
                                <Setter Property="HorizontalOptions" Value="Center" />
                            </Style>
                        </ResourceDictionary>
                    </Grid.Resources>
                    <Button Grid.Column="0" Text="🏠" />
                    <Button Grid.Column="1" Text="🔍" />
                    <Button Grid.Column="3" Text="💬" />
                    <Button Grid.Column="4" Text="👤" />
                </Grid>
            </Border>

            <!--  This is your floating central button because it is in the same Grid cell  -->
            <Grid Padding="10">
                <Button
                    BackgroundColor="White"
                    BorderWidth="2"
                    CornerRadius="35"
                    HeightRequest="70"
                    HorizontalOptions="Center"
                    Text="+"
                    TextColor="Black"
                    VerticalOptions="End"
                    WidthRequest="70" />
            </Grid>
        </Grid>
    </Grid>
</ContentPage>

N.B. I used emojis to mock up this example, but, I highly recommend you use a font library such as font awesome.