Custom TabBar view not rendering when using standard Shell

[rakhthm]

Hi,
I am trying to implement the NaluTabBar with a standard Shell. While the application runs and the Shell tabs function normally, the custom XAML view defined in NaluShell.TabBarView is not displayed. The native tab bar is shown instead.

Code Snippets

MauiProgram.cs =>

// Confirming registration
builder.UseNaluTabBar(); 

AppShell.xaml=>

<TabBar nalu:NaluShell.TabBarView="{myapp:AppShellTabBar}">
    <ShellContent Title="Tab1" Route="tab1" ContentTemplate="{DataTemplate tabs:tab1}" />
    <ShellContent Title="Tab2" Route="tab2" ContentTemplate="{DataTemplate tabs:tab2}" />
</TabBar>

<?xml version="1.0" encoding="utf-8" ?>
<nalu:NaluTabBar xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:nalu="https://nalu-development.github.com/nalu/navigation"
                 x:Class="MAUI.AppShellTabBar"
                 BarShadow="{Shadow Radius=16, Opacity=0.4}"
                 HeightRequest="64"
                 Padding="4"
                 BarBackground="#CC2C479D"
                 BarStrokeShape="RoundRectangle 32"
                 TabStrokeShape="RoundRectangle 32"
                 TabPadding="12,4"
                 TabFontFamily="OpenSansSemibold"
                 ActiveTabStrokeShape="RoundRectangle 32"
                 ActiveTabPadding="12,4"
                 ActiveTabFontFamily="OpenSansSemibold"
                 BarPadding="0"
                 ScrollPadding="4"  />

public partial class AppShellTabBar : NaluTabBar
{
	public AppShellTabBar()
	{
		InitializeComponent();
	}
}

[albyrock87]

Hi @rakhthm , is this happening on all platforms or on a specific one?

In case you're testing this on Windows target platform I confirm this will do nothing. The custom tab bar only works on Android, iOS, Mac.

Which MAUI version are you using?

It'd be very helpful if you can create a simple project on GitHub where you're reproducing the issue. Thanks!

[albyrock87]

@rakhthm do you have a custom shell renderer? That would be the only explanation.

[albyrock87]

If you have a custom shell renderer you should combine yours with https://github.com/nalu-development/nalu/blob/main/Source%2FNalu.Maui.Navigation%2FPlatforms%2FAndroid%2FNaluShellRenderer.cs

[rakhthm]

That was the issue — I had a custom Shell renderer. It’s working now. Thank you!

I also have a question about 5 tabs on Android. Because of the native button padding, the last tab gets clipped and the TabBar becomes scrollable. I’m wondering whether this is an Android limitation or if there’s a recommended workaround to keep all tabs visible without scrolling.

[albyrock87]

@rakhthm the NaluTabBar component you're using in AppShellTabBar is just a pre-built component, but you can build your own completely custom one.
If you have 5 buttons you can simply use a Grid with 5 columns and render your custom buttons :)

[albyrock87]

Check out how it is built https://github.com/nalu-development/nalu/blob/main/Source%2FNalu.Maui.Navigation%2FNaluTabBar.xaml and its code behind https://github.com/nalu-development/nalu/blob/main/Source%2FNalu.Maui.Navigation%2FNaluTabBar.xaml.cs

There's also another topic in the discussions here from another user where I explain how to obtain a custom layout.