Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] [Android] Fix for Shell custom FlyoutIcon display problem #26016

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Tamilarasan-Paranthaman
Copy link
Contributor

Issue 1: Foreground color of the custom flyout icon is not applied.

Root Cause of the issue

  • The tintColor is set to white in the ShellToolBarTracker class, which prevents the foreground color from being applied properly to the tintColor.

Description of Change

  • I have resolved the issue by updating the tint color to handle both page and shell foreground color cases, including dynamic scenarios.

Issue 2: The flyout icon is aligned to the center instead of the left, causing the title to extend beyond the view.

Root Cause of the issue

  • The custom image size is too large, causing it to render in the center and leaving extra space on the left.

Description of Change

  • I resized the custom image to match the hamburger size using the UIGraphics concept and implemented caching to prevent redundant image rendering.

Reference for icon size: https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs#L450

Issues Fixed

Fixes #25920

Tested the behaviour in the following platforms

  • Android
  • Windows
  • iOS
  • Mac

Screenshot

iOS

Before Issue Fix After Issue Fix

Android"

Before Issue Fix After Issue Fix

@dotnet-policy-service dotnet-policy-service bot added the community ✨ Community Contribution label Nov 21, 2024
Copy link
Contributor

Hey there @Tamilarasan-Paranthaman! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

@jsuarezruiz jsuarezruiz added platform/iOS 🍎 area-controls-shell Shell Navigation, Routes, Tabs, Flyout labels Nov 21, 2024
@jsuarezruiz
Copy link
Contributor

/azp run

Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@@ -336,7 +336,7 @@ void UpdateLeftToolbarItems()
if (image != null)
{
icon = result?.Value;
icon = ResizeImage(result?.Value, new CGSize(23f, 23f));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is iOS the only one that doesn't resize?
Is this size correct under all the screen options? (@2x etc) https://developer.apple.com/design/human-interface-guidelines/toolbars

@@ -0,0 +1,27 @@
#if !WINDOWS
// In Windows, the foreground color is not applied to the custom icon,
// so as of now, the test is not applicable for Windows.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Windows is the only one having a different behavior, right?
Could you open a new issue and include the link in the comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout community ✨ Community Contribution platform/iOS 🍎
Projects
None yet
Development

Successfully merging this pull request may close these issues.

.NET MAUI set AppShell custom FlyoutIcon display problem
2 participants