Xamarin Forms Shell - change tab color

Question

I've been playing with the Xaminals sample and for most elements, there is a way to change colors using "Shell." in the XAML. However, I haven't been able to figure out how to change the color of the selected tab bar (see screenshot below):

It's always grey. Any suggestions would be appreciated. Thanks!

Answer 1

I figured it out thanks to this article: Xamarin.Forms Shell Custom Renderers. Note that this specifically addresses custom renderers for shell.

Here's my code (for Android):

...

// Create a custom shell renderer (MyShellRenderer in my case):

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace Xaminals.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new MyTabLayoutAppearanceTracker(this);
        }
    }
}

...

// Create a custom appearance tracker for tab layout (MyTabLayoutAppearanceTracker in my case):

public class MyTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
{
    public MyTabLayoutAppearanceTracker(IShellContext shellContext) : base(shellContext)
    {
    }

    protected override void SetColors(TabLayout tabLayout, Color foreground, Color background, Color title, Color unselected)
    {
        base.SetColors(tabLayout, foreground, background, title, unselected);

        tabLayout.SetSelectedTabIndicatorColor(Color.Red.ToAndroid());
    }
}

Answer 2

I figured it out and there is to need to make any custom renderer and you can simply give it in shellcontent tag

<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Shell.TabBarTitleColor="#353f7b" Shell.TabBarUnselectedColor="Green" />

Answer 3

According to your description, you want to change the color of selected tab, you can do this by style. The ShellTitleColor is the color for selected color, the ShellUnselectedColor is the color for other tab unselected.

   <Shell.Resources>
    <Style x:Key="BaseStyle" 
           TargetType="Element">
        <Setter Property="Shell.ShellBackgroundColor" 
                Value="#455A64" />
        <Setter Property="Shell.ShellForegroundColor" 
                Value="White" />
        <Setter Property="Shell.ShellTitleColor" 
                Value="Red" />
        <Setter Property="Shell.ShellDisabledColor" 
                Value="#B4FFFFFF" />
        <Setter Property="Shell.ShellUnselectedColor" 
                Value="#95FFFFFF" />
    </Style>

</Shell.Resources>


<FlyoutItem Route="animals"
            Title="Animals"
            FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="Domestic"
         Route="domestic"
         Icon="paw.png">
        <ShellContent Route="cats"
                      Style="{StaticResource BaseStyle}"
                      Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent Route="dogs"
                      Style="{StaticResource BaseStyle}"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </Tab>
    <ShellContent Route="monkeys"
                  Style="{StaticResource BaseStyle}"
                  Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
    <ShellContent Route="elephants"
                  Style="{StaticResource BaseStyle}"
                  Title="Elephants"
                  Icon="elephant.png"
                  ContentTemplate="{DataTemplate views:ElephantsPage}" />  
    <ShellContent Route="bears"
                  Style="{StaticResource BaseStyle}"
                  Title="Bears"
                  Icon="bear.png"
                  ContentTemplate="{DataTemplate views:BearsPage}" />

    <ShellContent Route="about"
              Style="{StaticResource BaseStyle}"
              Title="About"
              Icon="info.png"
              ContentTemplate="{DataTemplate views:AboutPage}" />
</FlyoutItem>

Answer 4

You just have to add the style and set the TabBar style to be based on this. I would suggest that you move this out into a resource folder and new file like (TabBarStyles.xaml) and the use merged dictionary to pull in. But here is the code e.g.

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">White</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White" />
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarTitleColor" Value="Black" />
            <Setter Property="Shell.Clip" Value="True" />
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<TabBar>
    <Tab Title="Home" Icon="account_balance-24px.png" Route="browse">
        <ShellContent Title="A" ContentTemplate="{DataTemplate views:MainView}" Route="a"/>
    </Tab>
    <Tab Title="About" Icon="tab_about.png" Route="about">
        <ShellContent ContentTemplate="{DataTemplate views:MainView}" />
    </Tab>
</TabBar>