BottomBar with customizations - xamarin.forms

Question

I wish I could create a BottomBar that would allow me to have a graphic like this, with a button bigger than all the others. I tried with a TabbedPage but it doesn't allow me this customization. I tried with a TabView but it doesn't allow me to insert ContentPage pages by pressing buttons. I would like a BottomBar that would allow me to have this graphic and to be able to use pages as button content.
Example

Answer 1

You could use TabView With Action Button from the Xamarin Community Toolkit linked below. By not assigning any content and instead assigning an event to the TabTapped property, you will display a button instead of another tab.
Install from NuGet: https://www.nuget.org/packages/Xamarin.CommunityToolkit/
Add xct:
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Xaml:
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate
x:Key="TabItemTemplate">
<Grid
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="24"
HeightRequest="24"
Margin="6"
Source="{TemplateBinding CurrentIcon}" />
<Label
Grid.Row="1"
HorizontalOptions="Center"
FontSize="{TemplateBinding FontSize}"
Text="{TemplateBinding Text}"
TextColor="{TemplateBinding CurrentTextColor}" />
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="FabTabItemTemplate">
<Grid>
<ImageButton
InputTransparent="True"
Source="circle.png"
Padding="10"
HorizontalOptions="Center"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<ImageButton.CornerRadius>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="iOS" Value="30"/>
<On Platform="Android" Value="60"/>
<On Platform="UWP" Value="36"/>
</OnPlatform>
</ImageButton.CornerRadius>
<ImageButton.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">True</On>
<On Platform="macOS">False</On>
</OnPlatform>
</ImageButton.IsVisible>
</ImageButton>
<BoxView
InputTransparent="True"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<BoxView.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">False</On>
<On Platform="macOS">True</On>
</OnPlatform>
</BoxView.IsVisible>
</BoxView>
</Grid>
</ControlTemplate>
<Style
x:Key="TabItemStyle"
TargetType="xct:TabViewItem">
<Setter
Property="FontSize"
Value="12" />
<Setter
Property="TextColor"
Value="#979797" />
<Setter
Property="TextColorSelected"
Value="#FF0000" />
</Style>
<Style
x:Key="CustomTabStyle"
TargetType="xct:TabView">
<Setter
Property="IsTabTransitionEnabled"
Value="True" />
<Setter
Property="TabStripHeight"
Value="48" />
<Setter
Property="TabContentBackgroundColor"
Value="#484848" />
<Setter
Property="TabStripPlacement"
Value="Bottom" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<xct:TabView
Style="{StaticResource CustomTabStyle}">
<xct:TabView.TabStripBackgroundView>
<BoxView
Color="#484848"
CornerRadius="36, 36, 0, 0"/>
</xct:TabView.TabStripBackgroundView>
<xct:TabViewItem
Text="Tab 1"
Icon="triangle.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LawnGreen">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
Icon="circle.png"
ControlTemplate="{StaticResource FabTabItemTemplate}"
Style="{StaticResource TabItemStyle}"
TabTapped="OnFabTabTapped" />
<xct:TabViewItem
Text="Tab 3"
Icon="square.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
Update:
Do I have the possibility to insert a ContentPage by pressing on in TabViewItem and keep the TabVIew
You could set the page as contentview.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="App9.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentView.Content>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Page1!"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentView.Content>
</ContentView>
public partial class Page1 : ContentView
{
public Page1()
{
InitializeComponent();
}
}
And then load in the TabViewItem.
<xct:TabViewItem
ControlTemplate="{StaticResource TabItemTemplate}"
Icon="square.png"
Style="{StaticResource TabItemStyle}"
Text="Tab 3">
<!--<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>-->
<local:Page1 />
</xct:TabViewItem>