0

Developing a Xamarin app, with Xamarin Forms 5, and using Shell for navigation.

Is it possible to change the color of the icon, to the same color as the text underneath it, upon selecting a tab? The icons are material design fonts.

I have tried to use TabBarTitleColor, which changes the text color for a selected tab. Setting the icon color works fine for TabBarUnselectedColor (can be seen by the green icons in the second picture). But I can't make the icon change color when it is selected.

Icons coloured grey by TabBarUnselectedColor

Icons coloured green by TabBarUnselectedColor

<Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.TabBarBackgroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarForegroundColor"
                        Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor"
                        Value="Green" />
                <Setter Property="Shell.TabBarTitleColor"
                        Value="Gold" />
            </Style>
            <Style TargetType="TabBar"
                   BasedOn="{StaticResource BaseStyle}">
            </Style>
        </ResourceDictionary>
    </Shell.Resources> 
    <TabBar>
        <Tab Title="Exchange" Route="exchange">
            <Tab.Icon>
                <FontImageSource FontFamily="{StaticResource MaterialFontFamily}" Glyph="{x:Static helpers:IconFont.Earth}"  Size="24"/>
            </Tab.Icon>
            <ShellContent ContentTemplate="{DataTemplate views:ExchangeBasePage}" Route="exchangeBase" />
        </Tab>
        <Tab Title="Meet" Route="meet">

            <Tab.Icon >
                <FontImageSource FontFamily="{StaticResource MaterialFontFamily}" Glyph="{x:Static helpers:IconFont.AccountMultipleOutline}"    Size="24"/>
            </Tab.Icon>
            <ShellContent ContentTemplate="{DataTemplate views:MembersListPage}" Route="members" />
        </Tab>
    </TabBar>

UPDATE

I tried using Font Awesome Icons, but am getting funny characters instead of icons, and they are not changing colour either.

Added Font Awesome otf files to shared resource, marked the build action as Embedded Resource.

In AssemblyInfo:

[assembly: ExportFont("Font-Awesome-5-Brands-Regular-400.otf", Alias = "FontAwesome")]
[assembly: ExportFont("Font-Awesome-5-Free-Regular-400.otf", Alias = "FontAwesome2")]
[assembly: ExportFont("Font-Awesome-5-Free-Solid-900.otf", Alias = "FontAwesome3")] 

 <TabBar >
        <Tab Title="Share" Route="exchange"  >
            
            <Tab.Icon>
                <FontImageSource FontFamily="Font-Awesome-5-Free-Solid-900.otf" Glyph="&#xf641;" Size="24"/>
            </Tab.Icon>
           <ShellContent ContentTemplate="{DataTemplate views:ExchangeBasePage}" Route="exchangeBase" />
        </Tab>

UPDATE 2

Tried chaning FontFamily to the three different aliases (e.g. FontAwesome3), same problem. Tried to see if it was an issue with the TabBar Tab.Icon by putting the glyph in a Label as text on a normal page, but it resulted in the same character.

<Label Text="&#xf004;" FontFamily="FontAwesome2" FontSize="Header" TextColor="White"/>

Glyph as text in label on normal page

Awesome Font Icon - Showing up as a funny character instead of icon

Sara Dalvig
  • 1
  • 1
  • 1
    I have tried your code, actually the font icon changes to gold when the tab is selected, but I am using fontawesome icons (not MaterialFontFamily) as embedded fonts, not sure if this causes a difference. in case want to give it a try [How to use Font Awesome icons](https://stackoverflow.com/a/65095438/5228202) – Cfun Jan 18 '21 at 15:29
  • Thank you @Cfun I will try fontawesome icons – Sara Dalvig Jan 18 '21 at 16:13
  • You can share your solution here if you get success:). – nevermore Jan 19 '21 at 05:52
  • Supposed to use the alias name in FontFamily property not the name of the font file, try with `FontFamily="FontAwesome3"` – Cfun Jan 19 '21 at 08:51
  • @Cfun I changed to "FontAwesome3", but I am still getting strange characters. Depending on which glyph I use, I get a little box or Chinese (I think?!) characters – Sara Dalvig Jan 19 '21 at 16:14
  • Just to confirm that the code is a defined icon, have you tried with "" ? Have ypu tried with FontAwesome1 and 2? – Cfun Jan 19 '21 at 16:29
  • @Cfun Yes, I have tried with FontAwesome 1/2/3. I now tried with the glyph you mentioned, and get the same box. I tried to add it to a Label on a page, thinking it may have been an issue with the TabBar Icon, but it turns out as the same character. – Sara Dalvig Jan 19 '21 at 17:15
  • That character mean the font icon does not find. It's a default icon. – nevermore Jan 20 '21 at 02:00

0 Answers0