Xamarin.forms: [iOS] ToolbarItems with Icons won't align properly

[EduardCampo]

Description

While working fine on both Android and UWP, iOS is unable to render ToolbarItems with icons properly.

Steps to Reproduce

1. Fill a ContentPage's toolbar with 1 or more ToolbarItems, each with a .png Icon
2. Navigate to the ContentPage wrapped in a NavigationPage

Expected Behavior

ToolbarItems with their respective Icons are aligned to the right like on Android.

Actual Behavior

ToolbarItems scramble around the Navigation Bar, they never appear aligned to the right properly. They are still usable and can trigger Commands.

Basic Information

• Version with issue: 3.1.0.697729
• Last known good version: -
• IDE: Visual Studio Enterprise 15.7.4
• Platform Target Frameworks:
  
  
  
  • iOS: 11.4 & 11.4.1
  
  
• Nuget Packages: Xamarin.Forms 3.1.0.697729
• Affected Devices: reproduced on iPhone 6s, iPhone 7, iPhone X

Screenshots

Reproduction Link

ToolbarBug.zip

[samhouts]

related to #3457

[EduardCampo]

This is about the Primary Toolbar and not the Secondary Toolbar ( like in #3457 )

[Digital-Chen]

I am having the same problem. Was there any solution or workaround?

[EduardCampo]

I am having the same problem. Was there any solution or workaround?

You can always create a Custom navigation bar.

[Digital-Chen]

I am having the same problem. Was there any solution or workaround?

You can always create a Custom navigation bar.

Thanks. But I figured this might be related to icon size. I managed to get it to the better position after I resized by image inside the item. This could be a lead. It's odd that Xamarin does not "squeeze" it to the right size automatically.

[EduardCampo]

Thanks. But I figured this might be related to icon size. I managed to get it to the better position after I resized by image inside the item. This could be a lead. It's odd that Xamarin does not "squeeze" it to the right size automatically.

You are totally right.

• Using 20px png icons results in an alignment issue similar to #3457 , but the icon appears to be too small
• Using 32px png icons already creates some major alignment issues but the icon size is right.

I was using 72px png icons on my first example, which clearly presents a problem on the iOS toolbar. Seeing that the recommended size for iOS toolbar icons is 40px (for retina displays), the issue remains.

Thanks @Digital-Chen for your comment, I hope our discoveries can help the resolution of this issue.

[ianthetechie]

Sometimes the it takes over the entire bar; sometimes it doesn't show up at all.

For reference, I am using vector assets (vector drawables on Android; vector PDF on iOS), not PNGs.

[ajuanjojjj]

Any workarounds/fixes for this?

[Xonshiz]

I faced the similar issue and the fix was to resize the image down to "40x40"px, as suggested by Eduardo. Till we get this issue fixed, we will have to work like it.

[ajuanjojjj]

I'm using text sadly so not sure if changing to images now is something my boss would like, specially given that images on the android toolbar will probably look not-so-good.
For now i guess i'm gonna do a DisplayActionSheet attached to a primary ToolBarIcon, to get something similar to android, using a custom renderer, wich is sad giving that this problem started on 2017, although it was way worse (https://bugzilla.xamarin.com/show_bug.cgi?id=59868)

[EduardCampo]

Does anyone know if #4915 will solve this?

[ghost]

Seem not to be fixed with Xamarin Forms 4.1.0.581479 - still not right aligned on iOS, Android is fine...

[judithbellido]

any updates???