codenameone / CodenameOne

Cross-platform framework for building truly native mobile apps with Java or Kotlin. Write Once Run Anywhere support for iOS, Android, Desktop & Web.
https://www.codenameone.com/
Other
1.71k stars 408 forks source link

Tabs material icons do not change color together with the text on the tabs #3576

Open ThomasH99 opened 2 years ago

ThomasH99 commented 2 years ago

Describe the bug Tabs material icons do not change color together with the text on the tabs. Bug report created as suggested by Shai on Reddit.

To Reproduce Compile and run this code on the simulator. When clicking a tab the tab text changes color but not the icon.

Form hi = new Form("Test tabs w material icons") ;
Tabs tabs = new Tabs();
//TAB with materialIcon
tabs.addTab("MatIcn", FontImage.MATERIAL_10MP, 10,new Button("Tab w material icon"));
//TAB with Image
Style style = new Button().getStyle();
Style selectedStyle = new Button().getSelectedStyle();
Image icon = FontImage.createMaterial(FontImage.MATERIAL_10MP, style);
Image iconSel = FontImage.createMaterial(FontImage.MATERIAL_10MP, selectedStyle);
tabs.addTab("ImgIcn", icon,new Button("Tab w Image icon"));
tabs.setTabSelectedIcon(1, iconSel);
hi.add(tabs);
hi.show();

Expected behavior Icons should change to the same color as text (as defined by the UIID "Tabs").

shai-almog commented 2 years ago

I think I see what I missed here...

The UIID used for the individual tab is Tab not Tabs. I think this should work just fine with that based on the code.

ThomasH99 commented 2 years ago

Thanks for looking at this. I don't understand your comment - should something be changed in the test code or did you identify the error in CN1?

shai-almog commented 2 years ago

The color of the current tab is defined when you style the Pressed version of Tab not Tabs and not Selected. Did you run your test case after changing those?

AnthonyRivers commented 2 years ago

Hi ThomasH99,

I just started learning the API a few weeks ago and I'm no expert but I was able to set the color for each icon using CSS without problems.

I set the style with the following lines of code. Style s1 = UIManager.getInstance().getComponentStyle("tabstyle");
Style s2 = UIManager.getInstance().getComponentStyle("tabstyle2");

image

image

ThomasH99 commented 2 years ago

@shai-almog, before submitting the issue, I had tried both with and without styling, in both cases I have the same issue: only the text changes color, while the icon color stays the same. Did you run the example? I ask because I compile with a local version of CN1 sources which has not been updated for some weeks, so if there was a change was made recently I may not have it.

@AnthonyRivers thanks for your input. I think your approach of creating the icon images myself can be a work-around. However, what I expected is that when using material icons directly (as in the lines:

//TAB with materialIcon 
tabs.addTab("MatIcn", FontImage.MATERIAL_10MP, 10, new Button("Tab w material icon"));

) that the icon color should change automatically like it does for the text.

ThomasH99 commented 2 years ago

Any update on this? Seems to be a bug. I've fixed the issue for now with the work-around shown by Anthony, but the code is ugly and if it is a bug in CN1 it seems worth fixing.