[iOS] [Android] Fix for the FontImageSource color is not applied properly to the Tab Icon #26757

Tamilarasan-Paranthaman · 2024-12-20T16:15:16Z

Root Cause of the issue

iOS

The regression occurred because a previous PR changed the UIImageRenderingMode to Automatic, causing the TabbedPage tab icon to ignore the FontImageSource.Color.

Android

In Android, setting the FontImageSource.Color is not taken into account for the TabbedPage icon.

Description of Change

iOS

I have resolved the issue by setting the UIImageRenderingMode to Automatic when the FontImageSource is null. If the color is already applied to the FontImageSource, the UIImageRenderingMode is set to AlwaysOriginal.

Android

I have fixed the TabIcon color issue for the default TabBar placement in the SetIconColorFilter method. If the FontImageSource color is specified in the sample, it returns null and no need to update the color. If the FontImageSource color is null, the method retrieves the color using GetItemIconTintColorState to apply the appropriate color based on SelectedTabColor and UnselectedTabColor.

Additionally, some common cases were broken in the GetItemIconTintColorState method. For example, if no SelectedTabColor, UnselectedTabColor, or ContentPage FontImageSource color is provided, the TabIcons should use the default color. However, the method was returning null prematurely, preventing the default color from being applied to the TabIcons.

I have also addressed these additional cases. For instance, if none of the SelectedTabColor, UnselectedTabColor, or ContentPage FontImageSource colors are specified, the TabIcons will now correctly use the default color.

Regressed PR

[iOS] Tab Selected Icon Color not changing if using Font icons - fix #22437

Revert PR

We can revert this below fix, as the toolbar item icon color can be resolved in ImageSourceExtension.iOS by using the UIImageRenderingMode.
[iOS][Regression] Fix ToolbarItem color when used with IconImageSource is always default color #26048

Issues Fixed

Fixes #26662
Fixes #27000

Tested the behaviour in the following platforms

Android
Windows
iOS
Mac

Screenshot

Android

Before Issue Fix	After Issue Fix

iOS

Before Issue Fix	After Issue Fix

PureWeen · 2025-01-29T23:16:07Z

src/Controls/tests/TestCases.HostApp/Issues/Issue26662.xaml.cs

+				{
+					FontFamily = "Ion",
+					Glyph = "\uf30c",
+					Color = Colors.Violet,


Can we add a test that only changes the Color on the FontImageSource and verify that that will update the color?

Hi @PureWeen ,

Changing the Color property directly in IconImageSource does not trigger notifications at the Source level.

In TabbedPageManager on Android, Page.PropertyChanged only detects changes to IconImageSource, and this behavior is consistent across all platforms.

Currently, FontImageSource property changes are not handled in the TabbedPage implementation across platforms. We may need to add support for these changes to ensure proper updates.

Additionally, the user is following the same approach used in our test sample.

It should trigger on the Source Level

changing the color triggers a source changed event

which fires a source changed event

It seems like we're just doing a bad job of listening for that event?

I don't think we need to block this PR on this but it seems like we should be watching for the SourceChanged event more places and then reacting based on that. Can you create an issue?

Hi @PureWeen ,
I meant the previous comment, as no implementation was added while changing the image source color property. As you mentioned, I have created a separate issue #27549 for this

That PR was merged, do we have a test in this PR yet?

Need to re-validate code changes

AlleSchonWeg · 2025-02-05T13:17:00Z

Hi @Tamilarasan-Paranthaman
in my app i set UnselectedTabColor and SelectedTabColor:

 UnselectedTabColor="{AppThemeBinding Light=Blue, Dark=Red}"
 SelectedTabColor="{AppThemeBinding Light=Yellow, Dark=Green}"

i also used FontImageSource , but without a color:

<NavigationPage.IconImageSource>
	<FontImageSource FontFamily="..."
					 Glyph="..."
					 Size="20" />
</NavigationPage.IconImageSource>

Is this still working if you PR is merged? Do you use UnselectedTabColor/SelectedTabColor is no color is set in FontImageSource?

Thank you

Tamilarasan-Paranthaman · 2025-02-06T13:31:08Z

Hi @Tamilarasan-Paranthaman in my app i set UnselectedTabColor and SelectedTabColor:
 UnselectedTabColor="{AppThemeBinding Light=Blue, Dark=Red}"
 SelectedTabColor="{AppThemeBinding Light=Yellow, Dark=Green}"
i also used FontImageSource , but without a color:
<NavigationPage.IconImageSource>
	<FontImageSource FontFamily="..."
					 Glyph="..."
					 Size="20" />
</NavigationPage.IconImageSource>
Is this still working if you PR is merged? Do you use UnselectedTabColor/SelectedTabColor is no color is set in FontImageSource?

Thank you

@AlleSchonWeg, I would like to confirm that if no color is specified for the FontImageSource icon, the icon color will be determined by the SelectedTabColor/UnselectedTabColor. Additionally, I have added a test case in this PR to verify that when no color is provided for the FontImageSource icon on the first page, the icon color is correctly applied based on the SelectedTabColor/UnselectedTabColor.

mattleibow

not quite a review, but we probably don't need to list the issues just the reasoning.

mattleibow · 2025-02-27T14:58:06Z

src/Core/src/ImageSources/iOS/ImageSourceExtensions.cs

+			// resolving the TabbedPage Icon color and ToolbarItem  Icon color issues
+			// https://github.com/dotnet/maui/issues/25912
+			// https://github.com/dotnet/maui/issues/26662 
+			// https://github.com/dotnet/maui/issues/12250


Suggested change

// resolving the TabbedPage Icon color and ToolbarItem Icon color issues

// https://github.com/dotnet/maui/issues/25912

// https://github.com/dotnet/maui/issues/26662

// https://github.com/dotnet/maui/issues/12250

@mattleibow, Got it! I have removed the issue list.

jsuarezruiz · 2025-03-03T10:41:20Z

/azp run

azure-pipelines · 2025-03-03T10:41:41Z

Azure Pipelines successfully started running 3 pipeline(s).

mattleibow

This looks good. I have 2 questions:

Is there a myimagesource.Color = newColor test?
There may be a bad code path that appears that it will never be hit, but just in case...

mattleibow · 2025-03-03T19:05:49Z

src/Controls/src/Core/Platform/Android/TabbedPageManager.cs

 			else
-			{
+				defaultColor = GetDefaultColor(defaultColor);


If I am understanding the code path of the usage of the GetDefaultColor, if the BarItemColor is not set, then the value of defaultColor that is passed into the method will be the initial 0. In fact, since this is a local variable, it will always be 0. Is that OK?

I have modified the test sample to change the icon color directly in the button click event method.

I have removed the unnecessary parameter from the GetDefaultColor method.

Could you please review and let us know if you have any other concerns? @mattleibow

mattleibow

Gotta pick red or green for the machine!

rmarinho · 2025-03-19T17:26:03Z

/rebase

rmarinho · 2025-03-19T17:46:20Z

/azp run MAUI-public

azure-pipelines · 2025-03-19T17:46:33Z

Azure Pipelines successfully started running 1 pipeline(s).

…erly to the Tab Icon (dotnet#26757) * Tab icon color fix * Test sample changes * Added snapshots * Added details * Added Mac snapshots * Removed unwanted parameters and modified the test sample * Committed the proper mac snap * Removed the unwanted issue list comments * Addressed the review concerns --------- Co-authored-by: Ahamed-Ali <102580874+Ahamed-Ali@users.noreply.github.com>

…erly to the Tab Icon (#26757) * Tab icon color fix * Test sample changes * Added snapshots * Added details * Added Mac snapshots * Removed unwanted parameters and modified the test sample * Committed the proper mac snap * Removed the unwanted issue list comments * Addressed the review concerns --------- Co-authored-by: Ahamed-Ali <102580874+Ahamed-Ali@users.noreply.github.com>

dotnet-policy-service bot added the community ✨ Community Contribution label Dec 20, 2024

PureWeen added the area-controls-tabbedpage TabbedPage label Dec 20, 2024

sheiksyedm added the partner/syncfusion Issues / PR's with Syncfusion collaboration label Dec 23, 2024

Tamilarasan-Paranthaman mentioned this pull request Jan 3, 2025

[Windows] Fix for FontImageSource color is not applied to the Tab Icon on the TabbedPage #26888

Open

4 tasks

Tamilarasan-Paranthaman marked this pull request as ready for review January 3, 2025 14:24

Tamilarasan-Paranthaman requested a review from a team as a code owner January 3, 2025 14:24

Tamilarasan-Paranthaman requested review from mattleibow and PureWeen January 3, 2025 14:24

Tamilarasan-Paranthaman mentioned this pull request Jan 6, 2025

[Android] Top bar item colors - fix #26964

Open

PureWeen added this to the .NET 9 SR4 milestone Jan 8, 2025

This comment was marked as outdated.

Sign in to view

This comment was marked as off-topic.

Sign in to view

github-actions bot force-pushed the fix-26662 branch 2 times, most recently from 0140b78 to 45a3f7e Compare January 20, 2025 11:44

PureWeen requested changes Jan 29, 2025

View reviewed changes

PureWeen previously approved these changes Feb 3, 2025

View reviewed changes

PureWeen modified the milestones: .NET 9 SR4, .NET 9 SR5 Feb 3, 2025

Ahamed-Ali mentioned this pull request Feb 4, 2025

The FontImageSource icon color does not change in the TabbedPage when dynamically updated. #27549

Closed

NirmalKumarYuvaraj mentioned this pull request Feb 12, 2025

Fixed FontImageSource icon color does not change in the TabbedPage when dynamically updated. #27742

Merged

4 tasks

jfversluis requested a review from PureWeen February 13, 2025 14:35

mattleibow reviewed Feb 27, 2025

View reviewed changes

mattleibow reviewed Mar 3, 2025

View reviewed changes

mattleibow requested changes Mar 3, 2025

View reviewed changes

github-project-automation bot moved this from Ready To Review to Changes Requested in MAUI SDK Ongoing Mar 3, 2025

dotnet deleted a comment from azure-pipelines bot Mar 18, 2025

dotnet deleted a comment from PureWeen Mar 18, 2025

Ahamed-Ali dismissed rmarinho’s stale review via 88f6178 March 19, 2025 07:09

rmarinho changed the base branch from main to inflight/current March 19, 2025 17:25

Tamilarasan-Paranthaman and others added 9 commits March 19, 2025 17:26

Tab icon color fix

b2d6ea7

Test sample changes

3134b87

Added snapshots

b43ecf3

Added details

15aa188

Added Mac snapshots

29c51ba

Removed unwanted parameters and modified the test sample

a1d82ed

Committed the proper mac snap

08bef64

Removed the unwanted issue list comments

8731107

Addressed the review concerns

7f14050

github-actions bot force-pushed the fix-26662 branch from 3400fd9 to 7f14050 Compare March 19, 2025 17:26

rmarinho approved these changes Mar 19, 2025

View reviewed changes

rmarinho requested review from mattleibow and jsuarezruiz March 19, 2025 17:27

dotnet deleted a comment from azure-pipelines bot Mar 19, 2025

PureWeen merged commit d4b3319 into dotnet:inflight/current Mar 19, 2025
10 of 17 checks passed

github-project-automation bot moved this from Ready To Review to Done in MAUI SDK Ongoing Mar 19, 2025

github-actions bot locked and limited conversation to collaborators Apr 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] [Android] Fix for the FontImageSource color is not applied properly to the Tab Icon #26757

[iOS] [Android] Fix for the FontImageSource color is not applied properly to the Tab Icon #26757

Tamilarasan-Paranthaman commented Dec 20, 2024 •

edited

Loading

This comment was marked as outdated.

This comment was marked as off-topic.

PureWeen Jan 29, 2025

Ahamed-Ali Jan 31, 2025

PureWeen Feb 3, 2025

Ahamed-Ali Feb 4, 2025

mattleibow Mar 3, 2025

AlleSchonWeg commented Feb 5, 2025

Tamilarasan-Paranthaman commented Feb 6, 2025

mattleibow left a comment

mattleibow Feb 27, 2025

Tamilarasan-Paranthaman Mar 3, 2025

jsuarezruiz commented Mar 3, 2025

azure-pipelines bot commented Mar 3, 2025

mattleibow left a comment

mattleibow Mar 3, 2025

Ahamed-Ali Mar 6, 2025 •

edited

Loading

mattleibow left a comment

rmarinho commented Mar 19, 2025

rmarinho commented Mar 19, 2025

azure-pipelines bot commented Mar 19, 2025

[iOS] [Android] Fix for the FontImageSource color is not applied properly to the Tab Icon #26757

[iOS] [Android] Fix for the FontImageSource color is not applied properly to the Tab Icon #26757

Conversation

Tamilarasan-Paranthaman commented Dec 20, 2024 • edited Loading

Root Cause of the issue

iOS

Android

Description of Change

iOS

Android

Regressed PR

Revert PR

Issues Fixed

Tested the behaviour in the following platforms

Screenshot

Android

iOS

This comment was marked as outdated.

This comment was marked as off-topic.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AlleSchonWeg commented Feb 5, 2025

Tamilarasan-Paranthaman commented Feb 6, 2025

mattleibow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jsuarezruiz commented Mar 3, 2025

azure-pipelines bot commented Mar 3, 2025

mattleibow left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ahamed-Ali Mar 6, 2025 • edited Loading

Choose a reason for hiding this comment

mattleibow left a comment

Choose a reason for hiding this comment

rmarinho commented Mar 19, 2025

rmarinho commented Mar 19, 2025

azure-pipelines bot commented Mar 19, 2025

Tamilarasan-Paranthaman commented Dec 20, 2024 •

edited

Loading

Ahamed-Ali Mar 6, 2025 •

edited

Loading