Hello from sunny July! As a good tradition, it's time for MAUI UI July. Thanks to Matt Goldman for the organization.

In this article, we'll continue customizing .NET MAUI Shell. This time we'll customize the TabBar by adding a central action button. Let's get started!

Shared Code

Define a Custom TabBar with the properties for our action button:

I am using M.BindableProperty.Generator NuGet package to simplify the Bindable property syntax.

We can replace .NET MAUI TabBar with our CustomTabBar:

Customizing TabBar for Android

To customize your .NET MAUI Shell app for Android, you can change various components of the ShellRenderer class in the Platforms/Android/ directory of your application. Here's an example:

1. Create a custom ShellRenderer class:

2. To customize TabBar create a new class CustomShellItemRenderer. It adds a rounded button if the ShellItem is out CustomTabBar. You can use any control instead of button:

Customizing .NET MAUI Shell for iOS/MacCatalyst

Similar to customizing Android, you can make customizations for iOS and MacCatalyst by modifying the ShellRenderer class in the Platforms/iOS/ and Platforms/MacCatalyst/ directories of your application.

1. Create a custom ShellRenderer class:

2. To customize TabBar create a new class CustomShellItemRenderer. It adds a rounded button if the ShellItem is out CustomTabBar. You can use any control instead of button:

Summary

The final step is registering our handlers:

That's all we need to customize .NET MAUI Shell. Run the application and see the result:

The full code can be found on GitHub.

Happy coding!