Flyout Icon is not displayed on android. Works fine on Windows.

[tgiacchi]

Description

When enabling flyouts in shell, the flyout icon (usually the hamburger) does not appear on android. Same problem exists if you switch to a different icon. The same exact code displays properly on windows. See the attached pictures. This happens on the emulator and a real android device (Samsung S22 Ultra). It doesn't matter if the code is built on 17.8.2 or 17.9.1.1

Steps to Reproduce

Start a new maui project. Set the content to this:
`

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
	<ShellContent
		Title="Page1"
		ContentTemplate="{DataTemplate local:MainPage}"
		Route="Page1" />

	<ShellContent
		Title="Page2"
		ContentTemplate="{DataTemplate local:MainPage}"
		Route="Page2" />
</FlyoutItem>`

Run the code. No flyout icon.

Link to public reproduction project repository

No response

Version with bug

8.0.3

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

API 34

Did you find any workaround?

No.

Relevant log output

No response

[SmartmanApps]

Works for me on Android, but I don't use shell, so appears to be an issue specific to shell. So one workaround is don't use shell. :-)

[tgiacchi]

Only problem is a lot more code to get the job done. Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: SmartmanApps ***@***.***> Sent: Sunday, December 3, 2023 4:20:40 PM To: dotnet/maui ***@***.***> Cc: Tom ***@***.***>; Author ***@***.***> Subject: Re: [dotnet/maui] Flyout Icon is not displayed on android. Works fine on Windows. (Issue #19178) Works for me on Android, but I don't use shell, so appears to be an issue specific to shell. So one workaround is don't use shell. :-) — Reply to this email directly, view it on GitHub<#19178 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADNHM6E5XSUTJPXMMZDYFUTYHTUKRAVCNFSM6AAAAABAE2TSKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMZXGYYDGOBYHA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[jfversluis]

Does it show up when you switch to Dark Theme? Is it maybe just a white icon on a white background?

[ghost]

Hi @tgiacchi. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[tgiacchi]

so, it shows up in dark theme. Still a bug though, the default hamburger as shipped should work either way. However, this may have revealed another issue. My flyout tabs on the bottom show correctly with white icons on black background, but the flyout itself has wrong colors for the icons.

[tgiacchi]

it's possible I am doing something wrong with the SVG files that i use for icons, but not sure why they work in one area and not another. Doesn't make sense that i'd need different SVG images for dark and light mode?

[ertemmstein]

I have same issue on android

[licon4812]

Check to see if the flyout icon style has thematic colouring or if it is always set to white.

Should be somewhere in Styles.xml

[licon4812]

@tgiacchi

if the colour is fixed inside the svg you won't be able to change the colour using maui styles however if you are using a font or UraniumUI. You will be able to change the colour,

[tgiacchi]

The problem is that the icons work just fine on the tabs on the bottom, just not in the flyout menu. Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: James Alickolli ***@***.***> Sent: Thursday, January 25, 2024 1:58:54 AM To: dotnet/maui ***@***.***> Cc: Tom ***@***.***>; Mention ***@***.***> Subject: Re: [dotnet/maui] Flyout Icon is not displayed on android. Works fine on Windows. (Issue #19178) if the colour is fixed inside the svg you won't be able to change the colour using maui styles however if you are using a font or UraniumUI<https://enisn-projects.io/docs/en/uranium/latest/Getting-Started>. You will be able to change the colour, — Reply to this email directly, view it on GitHub<#19178 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADNHM6E3UP7DIFZYDABNRSLYQH7C5AVCNFSM6AAAAABAE2TSKOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBZGQ3DEMRZHA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[licon4812]

are you able to send code with icons?

[smlaticc]

For me, problem was in Styles.xaml where different color is only defined for WinUI, and for all other platforms was White color defined.
Before change:
<Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />

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

And it now works fine for me, since i only use light theme.

[ClintMayers]

The problem that I am getting is that the image icon for the hamburger is rendered as an alpha channel ONLY for Android output. I tried custom images setting <Shell FlyoutIcon="mycustomimagewithalpha.png" with various versions including SVG, PNG and ICO. For me, all menu image items are rendered correctly. It's just the Hamburger item's color channel is not rendered to let users know there is a hidden flyout menu exists. Yet, this is very important for this tool to be useful as users will see nothing to signify there is a hidden menu to open. I cannot get the so-called Shell.ForegroundColor to affect anything. I even tried to set the RGBA value to #00000000 thinking that maybe it's on a higher level and masking the image. Still nothing. I think it's a bug when translating from MAUI to Android. Will still play on my end, but getting a bit annoyed!

[gjuwindev]

how comes that nobody from MAUI team doesn't fix this urgently, as well as with the problem of blue text and radio button on black background, which are terrible to read... and all that doesn't sound like a great infrastructure rework...

[JonPetitta]

For me, problem was in Styles.xaml where different color is only defined for WinUI, and for all other platforms was White color defined. Before change: <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />

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

And it now works fine for me, since i only use light theme.

This did it for me. Not a good look for the project template to have this issue. Wonder how many people this puts off trying to learn maui.

[ClintMayers]

While some of you have stated that we can change the color of the Shell.Foreground to make the hamburger appear, this only works if you use the default hamburger by not setting a FlyoutIcon. And in that case, I had to assign Black, not Primary and I could finally see the image. At the very least I could work with that, but I still wanted to assign my own custom color Flyout (hamburger) image.

When I tried to assign a custom FlyoutIcon image, no matter what I tried to do it would always show only as white with alpha. It would not show the RGB colors nor the Shell.Foreground color. The alpha channel does show up as I can see it by changing the background color, or pressing and holding the button.

I am aware that Android uses ARGB format, not RGBA format internally, and wonder if this has something to do with it?

I have even created a custom .xml and with three state images according to Android docs and put in the platform Resources/drawable folder assiging it correctly and get the identical results. I can still just see the alpha with a white color only.

Hopefully, someone is looking into this. Otherwise, I find the Flyout feature has its limits. It would be nice if it could work, though!

[JonPetitta]

I've done a little digging, Android does not support .svg (I'm guessing), as msbuild converts .svg's to .png's, and you need to reference the image as a .png as that is what will be in the apk. It makes quite a few pngs from the svg, looks like for different display resolution formats. I opened them up and they looked like they should. That said I do see the issue where when trying to set the FlyoutIcon, it is just white, though when using an Image element in xaml the same png is shown properly. I think the ARGB RGBA thing is a bit of a red herring as I believe you are referencing the Java Color class, which is not involved in image loading. The image format specs how the color information should be stored.

I've tried tracking down what file (method) they use for the default hamburger.

[JonPetitta]

Digging deeper, it looks like whatever you set to FlyoutIcon will be converted to an all white png, and depending on styling, will just be invisible. This happens with either a source png or svg. I have created a bug highlighting this behavior.

20682

[atkinsonbg]

For me, problem was in Styles.xaml where different color is only defined for WinUI, and for all other platforms was White color defined. Before change: <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />

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

And it now works fine for me, since i only use light theme.

Thank you @JonPetitta I was looking for this answer for days! This solved the problem for me.