Dynamically change the toolbar icon doesn't work in iOs

PhilippeBourquePhilippeBourque CAUniversity ✭✭
edited September 2016 in Xamarin.Forms

On my *.xaml file, I delcare many ToolbarItem and for each item, I declare an "OFF" and a "ON" Item, like this:

<ToolbarItem Text="run"
         Order="Primary"
         Clicked="OnToolbarItemClicked"
         x:Name="run">
  <ToolbarItem.Icon>
    <OnPlatform x:TypeArguments="FileImageSource"
                iOS="run.png"
                Android="ic_action_run.png" />
  </ToolbarItem.Icon>
</ToolbarItem>

<ToolbarItem Text="run"
             Order="Primary"
             Clicked="OnToolbarItemClicked"
             x:Name="runOn">
  <ToolbarItem.Icon>
    <OnPlatform x:TypeArguments="FileImageSource"
                iOS="run_on.png"
                Android="ic_action_run_on.png" />
  </ToolbarItem.Icon>
</ToolbarItem>

Then, I created a function to clear and reset the toolbar with the good items, like this :

    private void ResetToolbarItems()
    {
        ToolbarItems.Clear();

        if (IsRunning)
            ToolbarItems.Add(runOn);
        else
            ToolbarItems.Add(run);
    }

I also tried before to declare only one icon like this :

<ToolbarItem Text="run"
         Order="Primary"
         Clicked="OnToolbarItemClicked"
         x:Name="run">
  <ToolbarItem.Icon>
    <OnPlatform x:TypeArguments="FileImageSource"
                iOS="run.png"
                Android="ic_action_run.png" />
  </ToolbarItem.Icon>
</ToolbarItem>

and change it when OnToolbarItem was triggered :

    async void OnToolbarItemClicked(object sender, EventArgs args)
    {
        ToolbarItem toolbarItem = (ToolbarItem)sender;

        if (toolbarItem.Text == "run")
        {
            IsRunning= !IsRunning;
            ShowRunningIcon(toolbarItem);
        }
    }

There was my ShowRunningIcon :

    private void ShowRunningIcon(ToolbarItem toolbarItem)
    {
        if (IsRunning)
            Device.OnPlatform(  iOS: () => toolbarItem.Icon = "run_on.png", 
                                Android: () => toolbarItem.Icon = "ic_action_run_on.png");
        else
            Device.OnPlatform(  iOS: () => toolbarItem.Icon = "run.png", 
                                Android: () => toolbarItem.Icon = "ic_action_run.png");
    }

This is working on Android, but in iOs, the icon is not changing dynamically.

Could anybody help me with that?

Thanks,

Phil

Best Answer

  • PhilippeBourquePhilippeBourque CA ✭✭
    Accepted Answer

    There is an answer from Xamarin support team that explain how to make it work with iOS (I joined the two images) :

    Thanks for the sending over the project. I was able to build the project and see the issue you are facing. It turns out that your code is actually working, it is just that the two toolbar icons look identical when displayed in the toolbar in iOS, even though they look different in Android. iOS changes the color of the icons and it just so happens that based on the way it changes them, both the run.png and run_on.png icons wind up looking identical. So it is swapping them, you just can't tell visually. This post explains the issue:

    https://forums.xamarin.com/discussion/42587/toolbar-icon-showing-as-solid-color-on-ios-works-on-android
    (see Adam Kent's comment "The actual color stored in the image file is irrelevant…")

    If you just substitute your icons in your project for the two that I've included in attachments to this email (with no code changes), you will see that both the iOS and Android versions work.

    I hope this helps. Please let me know if you have any questions.

    Thanks,
    Mike Smith

Answers

  • olid4olid4 DEMember ✭✭
    edited September 2016

    I have a similar problem, in my NavigationPage. I call a function to "update" a ToolbarItem, which works fine on Android, but in iOS the image doesn't change, until I navigate to another page. And still, when I return to my MainPage, there is the wrong icon again.

    This is my approach:

                public void ChangeToolbarItem(bool bConnect, bool bReceiving)
                {
                    // Which Picture
                    string sPic;
    
                    if (bConnect)
                    {
                        if (bReceiving)
                            sPic = "conn_ok";
                        else
                            sPic = "conn_try";
                    }
                    else
                    {
                        sPic = "conn_error";
                    }
    
                    ToolbarItem ti = new ToolbarItem
                    {
                        Text = "ConnectState",
                        Icon = sPic,
                        Command = new Command(OnBtnClicked),
                        Order = ToolbarItemOrder.Primary
                    };
    
                    ToolbarItems.Clear();
                    ToolbarItems.Add(ti);
                }
    
  • PhilippeBourquePhilippeBourque CAUniversity ✭✭
    Accepted Answer

    There is an answer from Xamarin support team that explain how to make it work with iOS (I joined the two images) :

    Thanks for the sending over the project. I was able to build the project and see the issue you are facing. It turns out that your code is actually working, it is just that the two toolbar icons look identical when displayed in the toolbar in iOS, even though they look different in Android. iOS changes the color of the icons and it just so happens that based on the way it changes them, both the run.png and run_on.png icons wind up looking identical. So it is swapping them, you just can't tell visually. This post explains the issue:

    https://forums.xamarin.com/discussion/42587/toolbar-icon-showing-as-solid-color-on-ios-works-on-android
    (see Adam Kent's comment "The actual color stored in the image file is irrelevant…")

    If you just substitute your icons in your project for the two that I've included in attachments to this email (with no code changes), you will see that both the iOS and Android versions work.

    I hope this helps. Please let me know if you have any questions.

    Thanks,
    Mike Smith

  • olid4olid4 DEMember ✭✭

    Ok, but that's not the problem in my case. Maybe I will add another question to the forum concerning my case.
    Because I have different images, they just don't change until I open another page. After that the new icon is shown. But after clicking the 'Back'-button I come back to the previous page and I get the wrong icon again.

  • VivekVishwakarmaVivekVishwakarma INMember ✭✭

    Hi,
    I am using navigation toolbar items and change them based on some selection in the ListView on that page. First time the icons load fine and then no matter whatever icon I provide, it always shows with White Color.

    Even the first time it only works if following code is included in Custom Renderer of Content Page:

                    var navigationalItems = this.NavigationController?.TopViewController?.NavigationItem?.RightBarButtonItems;
                    if (navigationalItems != null)
                    {
                        foreach (var item in navigationalItems)
                        {
                            item.Image = item.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                        }
                    }
    

    Calling the above code on ListView item selection after first time does not make any difference.

    How can I show original icons always?

    Kindly help. Thanks

Sign In or Register to comment.