[Android] ToolbarItem shows incorrect image on different pages on initial load when used in Shell

[cleardemon]

Description

When using a ToolbarItem in a ContentPage, enclosed in a TabBar in a Shell, if the user presents a ToolbarItem that contains an IconImageSource in one tab, and then switches to another tab that has a different ToolbarItem without an IconImageSource (but a Text property), the icon is still displayed on that second tab, and not the text.

This only seems to be a problem on Android, cannot reproduce on iOS, and have not tried other platforms.

Here is a video demonstrating the issue:

Screen.Recording.2024-01-17.at.5.37.13.pm.mov

Steps to Reproduce

1. Create a new MAUI app.
2. Add an image to the project, which is small enough to put in a toolbar, in Resources/Images.
3. Add some pages to the project, one with a ToolbarItem having a IconImageSource to the image, another with just a Text property.

<!-- Page2 -->
<!-- add x:Name="Root" to the ContentPage -->
<ContentPage.ToolbarItems>
    <ToolbarItem IconImageSource="icon.png" Command="{Binding Source={x:Reference Root}, Path=ToolbarCommand}" />
</ContentPage.ToolbarItems>

<!-- Page3 -->
<ContentPage.ToolbarItems>
    <ToolbarItem Text="Toolbar Item" Command="{Binding Source={x:Reference Root}, Path=ToolbarCommand}" />
</ContentPage.ToolbarItems>

Example ToolbarCommand to place in each page:

public ICommand ToolbarCommand => new Command(() => DisplayAlert("Clicked in Page 3", string.Empty, "OK"));

4. Register those pages in the AppShell, on tabs, like so:

    <TabBar>
        <ShellContent Title="Tab 1" Icon="icon.png" ContentTemplate="{DataTemplate local:MainPage}" />
        <ShellContent Title="Tab 2" Icon="icon.png" ContentTemplate="{DataTemplate local:Page2}" />
        <ShellContent Title="Tab 3" Icon="icon.png" ContentTemplate="{DataTemplate local:Page3}" />
    </TabBar>

5. You might want to also edit the default Shell styles in the MAUI app template, as it seems to default to white on white (edit Resources/Styles/Styles.xaml and find the styles for Shell around line 400, change one line to as follows):

<Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource Black}}" />

6. Run the app in Android emulator or device.
7. Click Tab 2, then Tab 3. See it shows the icon instead of saying "Toolbar Item".
8. Click Tab 2, then Tab 3. It shows "Toolbar Item" correctly.

Link to public reproduction project repository

https://github.com/cleardemon/Maui-ToolbarIconBug

Version with bug

8.0.5

Is this a regression from previous behavior?

Yes, this used to work in Xamarin.Forms

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

At this time, unable to find a workaround.

Relevant log output

No response

[Schullebernd]

This is the same problem I reported some weeks ago #19673

The only workaround at the moment is to create the tool bar items via code. This updates the icons.

[cleardemon]

Confirmed that moving the ToolbarItems from the XAML into the code behind for the page works, but it was only necessary for ToolbarItems that do not define an icon (and just use text). There was no change when moving items that use an icon to code.

In testing, the best place for this to happen was overriding OnParentSet, e.g.

protected override void OnParentSet()
{
    base.OnParentSet();
    ToolbarItems.Add(new ToolbarItem { Text = "Button", Command = SomeCommand });
}

[kubaflo]

@cleardemon @jsuarezruiz this PR should fix it :) #20166

[cleardemon]

Looks like it should, yep. It had to be a one-line fix, it just felt like something wasn't being cleared 🙂

[PureWeen]

/similarissues

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Android ToolbarItem shows incorrect icon on Navigation subpage (#11829), similarity score: 0.85
• In a ToolbarItems, if an item has no icon but just text, MAUI uses the icon from the previous page in the Navigation (#7823), similarity score: 0.82

Closed similar issues:

• ToolbarItem icon/image doesn't update on page navigation on Android (#19673), similarity score: 0.85
• Toolbar Icons not Showing on Android via Appshell (#5454), similarity score: 0.85
• Shell Tabbar doesn't behave correctly when changing tab icon image (through binding or style triggers) (#12105), similarity score: 0.83

Note: You can give me feedback by thumbs upping or thumbs downing this comment.