Is there any way to place the tab title in center if there is no icon?

Question

I'm Looking to create two tabbed page without any icon. But it getting placed in bottom of the tab area enter image description here

I'm Expecting my tab title to be placed center if there is no image. Below is the code I used.

This is the code I used

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="Awakee.HomePage"
            xmlns:p="clr-namespace:Awakee.Views"
            xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="Grey">
    <p:AddNewAwake Title="Add New" StyleClass=""/>
    <p:UpcomingAwake Title="Upcoming"/>
</TabbedPage>

Answer 1

If you have the luxury to use a plugin that performs better and has many cool features, check Sharpnado.Tabs It is the best tabs library out there for Tabs

With a TabsHostView that hosts your tab and a ViewSwitcher that switches between available views its a full pack solution

  <tabs:ViewSwitcher x:Name="Switcher"
                       Grid.Row="1"
                       Animate="False"
                       SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
        <customViews:LazyView x:TypeArguments="tabsLayout:HomeView" BindingContext="{Binding HomePageViewModel}" />
        <customViews:LazyView x:TypeArguments="tabsLayout:ListView" BindingContext="{Binding ListPageViewModel}" />
        <customViews:LazyView x:TypeArguments="tabsLayout:GridView" BindingContext="{Binding GridPageViewModel}" />
    </tabs:ViewSwitcher>

    <tabs:TabHostView Grid.Row="2"
                      HorizontalOptions="Center"
                      VerticalOptions="Start"
                      HeightRequest="60"
                      WidthRequest="280"
                      TabType="Fixed"
                      IsSegmented="True"
                      CornerRadius="30"
                      Margin="15"
                      BackgroundColor="#F0F0F3"  
                      Shades="{sh:NeumorphismShades}"
                      SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
        <tabs:TabHostView.Tabs>
            <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                                IconImageSource="house_96"
                                Label="{localization:Translate Tabs_Home}" />
            <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                                IconImageSource="list_96"
                                Label="{localization:Translate Tabs_List}" />
            <tabs:BottomTabItem Style="{StaticResource BottomTabStyle}"
                                IconImageSource="grid_view_96"
                                Label="{localization:Translate Tabs_Grid}" />
        </tabs:TabHostView.Tabs>
    </tabs:TabHostView>

Checkout their Readme for more information:

https://github.com/roubachof/Sharpnado.Tabs/blob/main/README.md

On the other hand, if you want to go ahead with TabbedPage then you will have to write a handler that handles this, you can follow this for more information

How to center Tabbed Page Tab Icons and/or text in XAML?

Modify TabbedPage Bar with handler in .NET Maui (Android)