Selected Tabs and other components not Coloring correctly on Adroid 9 (Samsung Galaxy Tab S5E)

[Mark Bolduc]

If you are experiencing an issue please mention the full platform your issue applies to:
IDE: NetBeans/Eclipse/IDEA Netbeans 11
Desktop OS Windows 10 Pro
Simulator Latest

Device Adroid 9 (Samsung Galaxy Tab S5E)

I have a new Samsung Galaxy Tab S5E, 

Have issues of propper coloring of components where on PC and IOS the foreground color is blue vs black on Android

Please see "IOS_ColoringPage_1.JPG" as a multi colored form

Please see "Android_ColoringPage_1.JPG", same form with all foreground being black

Please see "Android_ColoringPage_2.JPG", 4 Tabs where Tab position "Realy Long Text Tab" is showing an inverse of color to the unselected 3 tabs.

Please see "IOS_ColoringPage_2.JPG", 4 Tabs where Tab position "Realy Long Text Tab" is showing Green foreground as it should.

Please see "IOS_ColoringPage_3.JPG", Backgroung color is white, foreground color is Green as it should

Please see "Android_ColoringPage_3.JPG", Backgroung color is white, foreground color is black with thin white border around each letter.

This has been reproduced on Android 7, 8 & 9 (Samsung Tablet S5E and Huawei tablet) devices

Here is the Tabs reproducable test case.

            Form hi = new Form("Custom Tabs", new BorderLayout());
            Container page = new Container(new BorderLayout());
            Tabs tb = new Tabs(Component.TOP) {
                @Override
                protected Component createTab(String title, Image icon) {
                    SpanButton custom = new SpanButton(title);
                    custom.setName("SpanButton");
                    custom.setIcon(icon);
                    custom.setUIID("Container");
                    custom.setTextUIID("mpiTabMetalUnSelected");
                    custom.setIconPosition(BorderLayout.NORTH);
                    return custom;
                }

                @Override
                public String getTabTitle(Component tab) {
                    return ((SpanButton) tab).getText();
                }

                @Override
                public String getTabTitle(int index) {
                    String TabTitle = "";
                    try {
                        for (int a = 0; a < getComponentCount(); a++) {
                            Container cnt = (Container) getComponentAt(a);
                            for (int b = 0; b < cnt.getComponentCount(); b++) {
                                if (cnt.getComponentAt(b).getName() != null && cnt.getComponentAt(b).getName().compareToIgnoreCase("SpanButton") == 0 && index == b) {
                                    return getTabTitle(cnt.getComponentAt(b));
                                }
                            }
                        }
                    } catch (Exception g) {
                        g.printStackTrace();
                    }
                    return TabTitle;
                }

                @Override
                public void setTabTitle(String title, Image icon, int index) {
                    try {
                        for (int a = 0; a < getComponentCount(); a++) {
                            Container cnt = (Container) getComponentAt(a);
                            for (int b = 0; b < cnt.getComponentCount(); b++) {
                                if (cnt.getComponentAt(b).getName() != null && cnt.getComponentAt(b).getName().compareToIgnoreCase("SpanButton") == 0 && index == b) {
                                    SpanButton custom = (SpanButton) cnt.getComponentAt(b);
                                    custom.setText(title);
                                    return;
                                }
                            }
                        }
                    } catch (Exception g) {
                        g.printStackTrace();
                    }
                }

                @Override
                protected void setTabSelectedIcon(Component tab, Image icon) {
                    ((SpanButton) tab).setPressedIcon(icon);
                }

                protected void selectTab(Component tab) {
                    for (int a = 0; a < this.getComponentCount(); a++) {
                        Container cmp1 = (Container) this.getComponentAt(a);
                        int selIndex = this.getSelectedIndex();
                        for (int b = 0; b < cmp1.getComponentCount(); b++) {
                            if (cmp1.getComponentAt(b).getName() != null && cmp1.getComponentAt(b).getName().startsWith("SpanButton") == true) {
                                if (selIndex == b) {
                                    ((SpanButton) tab).setTextUIID("mpiTabMetalSelected");
                                } else {
                                    ((SpanButton) cmp1.getComponentAt(b)).setTextUIID("mpiTabMetalUnSelected");
                                }
                            }
                        }
                    }
                }

                @Override
                protected void bindTabActionListener(Component tab, ActionListener l) {
                    ((SpanButton) tab).addActionListener(l);
                }
            };
            tb.addSelectionListener(new SelectionListener() {
                @Override
                public void selectionChanged(int oldSelected, int newSelected) {
                }
            });

            tb.setTabUIID(null);
            Button btn = new Button("Set Tab 3 Selected");
            btn.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent evt) {
                    tb.setSelectedIndex(2, true);
                }
            });
            tb.addTab(" \nTab 1", btn);
            tb.addTab("Really long\ntext in tab", new Label("T2"));
            tb.addTab(" \nTab 3", new Label("T3"));
            tb.addTab(" \nTab 4", new Label("T4"));
            tb.getTabsContainer().setScrollableX(false);
            tb.setSelectedIndex(0);
            int selIndex = tb.getSelectedIndex();
            boolean found = false;
            for (int a = 0; a < tb.getComponentCount(); a++) {
                Container cmp1 = (Container) tb.getComponentAt(a);
                for (int b = 0; b < cmp1.getComponentCount(); b++) {
                    Component cmp2 = (Component) cmp1.getComponentAt(b);
                    if (selIndex == b) {
                        if (cmp2.getName() != null && cmp2.getName().compareToIgnoreCase("SpanButton") == 0) {
                            ((SpanButton) cmp2).setTextUIID("mpiTabMetalSelected");
                            found = true;
                            break;
                        }
                    }
                }
                if (found == true) {
                    break;
                }
            }
            page.addComponent(BorderLayout.CENTER, tb);
            Button btn9 = new Button("Exit Page");
            btn9.addActionListener((evt) -> {
                System.exit(0);
            });
            page.addComponent(BorderLayout.SOUTH, btn9);
            hi.add(BorderLayout.CENTER, page);
            hi.show();

Thoughts?

Regards

[Shai Almog]

How are the styles defined?

Does this look the same in the Android simulator skin?

If so did you try live editing the UIID and using the component inspector tool to see why coloring isn't consistent?

[Mark Bolduc]

Using "SamsungGalaxS5" skin (Although my device is a Tab S5E)

Simulator is displaying colors correctly, all testing on the simulator is behaving for the SamsungGalaxyS5 skin.

Styles are defined in theme components.

Please see "Simulator_ColoringPage_4.JPG", using Simulator, first screen

Please see "Simulator_ColoringPage_5.JPG", using Simulator, second coloring screen

Please see "ThemeComponent_Selected_Tab_ColoringPage_6.JPG", Component Color Tab 

Please see "ThemeComponent_Selected_Tab_ColoringPage_7.JPG", Component Border Tab.

Please see "ThemeComponent_MyRoInventoryLabelRed_ColoringPage_7.JPG", Button Component , where Alignment, Padding, Margin, Border,Derived are "Derived"

Please Note that "Android_ColoringPage_3.JPG" shows athe most basic Button example ("Exit Page") where the unselected state color should be blue, however it is black.

This is in the reproducable test case above.

Please see "CodenameoneBuildHints.JPG" for attached testcase

Thoughts?

Regards

[Shai Almog]

It looks like you're relying a bit on the behavior of style inheritance. This generally works OK but has some nuanced limits in some cases e.g. with cyclic dependencies that can be subtle.

Try disabling the inheritance and explicitly defining a color for one of the styles.

Is it possible that the device has some setting for accessibility or something in the developer tools enabled that is causing this behavior?

[Mark Bolduc]

I have looked on my device in settings and turned off the "High Contrast Fonts" default. (See "Screenshot_20200211-192150_Accessibility.jpg")

This solved all coloring issues.

What is this and should this be of concern?

Thoughts?

Regards and thanks for all your help.

[Shai Almog]

Accessibility is designed for people with disability and has MANY factors (e.g. it can read the UI for a blind person). In this case it makes some things more readable. We don't support accessibility at this time although we have an RFE on the matter.