ToolbarItem Icon Coloring inconsistent

[edgiardina]

Description

The behavior with toolbaritems and icon color on Android is different than Xamarin forms and iOS on Maui in Shell

Previous behavior in Xamarin forms: ToolbarItems declared in a shell and given an IconImageSource would use the Shell.ForegroundColor to tint the color of the displayed toolbaritem icon.

Current behavior: On iOS, the Icon in the toolbar is tinted to the Shell.ForegroundColor (along with the back button / reverse disclosure indicator) On Android, the Icon in the toolbar remains the color it is declared in the SVG. The back button / reverse disclosure indicator is colored with the Shell.ForegroundColor)

Steps to Reproduce

1. File -> New Maui App
2. Create Two Tabbar items in the AppShell.xaml
3. add a simple one-color SVG to the MAUI project like so, assigning the IconImageSource to that svg from step 2 https://www.svgrepo.com/svg/14071/search
4. Assign a Shell.ForegroundColor to the Tabbar in Styles.xaml

<Style TargetType="TabBar">
        <Setter Property="Shell.ForegroundColor" Value="Purple" />...

5. Create a Page that the TabBar Item points to, with that page containing a ToolBarItem with the search icon.

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Filter" x:Name="SearchButton" Clicked="SearchButton_Clicked" IconImageSource="search.png" />

6. On iOS, the ToolbarItem's icon will appear purple. On Android, the ToolbarItem's icon will remain black or whatever the color is in the SVG.

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

All Android

Did you find any workaround?

A possible workaround involves using Font Icons and a FontImageSource, where a FontImageSource can be assigned a color.

Relevant log output

No response

[sattasundar]

If you are using Shell, you can customize your toolbar by using Shell.TitleView inside your ContentPage. And to change icon color you can use CommunityToolkit.Maui's IconTintColorBehavior to your control.

 <Shell.TitleView>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Label Text="Your Title" Grid.Column="0" TextColor="White" FontSize="Large" VerticalOptions="Center" HorizontalOptions="FillAndExpand"></Label>
            <StackLayout Grid.Column="1" HorizontalOptions="EndAndExpand" Orientation="Horizontal" VerticalOptions="Center" Margin="0,0,10,0">
                <ImageButton HeightRequest="25"
                             WidthRequest="25"
                             Source="home.png">
                    <ImageButton.Behaviors>
                        <mct:IconTintColorBehavior TintColor="Red"/>
                    </ImageButton.Behaviors>
                </ImageButton>
            </StackLayout>
        </Grid>
    </Shell.TitleView>

Without Shell, you can do same using <NavigationPage.TitleView></NavigationPage.TitleView>

[edgiardina]

@sattasundar certainly, I could convert my 20 or 25 instances of toolbar items to TitleViews. But I think if ToolbarItems exist, I'd prefer to use them and just have customization options. Also, getting things to line up in TitleViews is HARD. the text is not perfectly centered on a Title label if its a navigation page with a back button, etc. Toolbaritems fix that, and simplify / reduce markup.

[PureWeen]

Related https://github.com/dotnet/maui/issues/10660

[widavies]

I can confirm the issue is still present on c096b3a03 for Android.

To reproduce the issue, modify src/Controls/samples/Controls.Sample/Pages/MainPage.xaml:

...
</views:BasePage.Resources>
+    <ContentPage.ToolbarItems>
+        <ToolbarItem Order="Secondary" Text="Item 1" />
+    </ContentPage.ToolbarItems>
<ScrollView>
...

You can see that the overflow menu takes a rather awkward color instead of just using the foreground color:

I have submitted a pull request to fix this. Until the pull request is submitted, you can do the following:

Create a file CustomRenderers.cs in YourApp/Platforms/Android/:

using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using Toolbar = AndroidX.AppCompat.Widget.Toolbar;

namespace YourApp.Platforms.Android;

public class CustomShellRenderer : ShellRenderer {
    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker() {
        return new CustomToolbarAppearanceTracker();
    }
}

internal class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker {
    public void Dispose() {
    }

    public void SetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance) {
        toolbar.OverflowIcon?.SetTint(appearance.ForegroundColor.ToAndroid());
    }

    public void ResetAppearance(Toolbar toolbar, IShellToolbarTracker toolbarTracker) {
    }
}

Then, in your MauiProgram.cs:

        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts => {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            }).ConfigureMauiHandlers(handlers => {
// ADD THIS SECTION
#if ANDROID
                handlers.AddHandler(typeof(Shell), typeof(YourApp.Platforms.Android.CustomShellRenderer));
#endif
            });