1

I went ahead in creating my own Button components, overriding the paintBackground(Graphics g) method to have some circular charts displayed right with the button. Example of desired result: Example of the desired result

What I ended up with though was pretty close, but not exactly: the space between the icon and the text underneath the icon was too large and the text itself was already touching the circle.

Looking at the Label API, there is the method setGap(int). As the gap is 0 by default, I used a negative value, to get them closer together. This removed the space as intended, however had a side-effect: the positioning of the label and the icon was off when applying any gap value. Instead of only affecting the Y values of the label and the icon, the gap value also affects the X values.

After a lot of digging, I found a bug in the codebase of CN1 itself. in the drawLabelComponent() Method of class CodenameOneImplementation, there is the following snippet (Alignment Center and Textposition Bottom, line 7254):

                case Label.BOTTOM:
                case Label.TOP:
                    x = x + (cmpWidth - (preserveSpaceForState + leftPadding
                            + rightPadding
                            + Math.max(((icon != null) ? iconWidth + gap : 0),
                                    stringWidth))) / 2;
                    x = Math.max(x, cmpX + leftPadding + preserveSpaceForState);
                    y = y + (cmpHeight - (topPadding
                            + bottomPadding
                            + ((icon != null) ? iconHeight + gap : 0)
                            + fontHeight)) / 2;
                    break;

It is obvious that the gap variable is included in the calculation for both the X and the Y values, which cannot be true for the setting the gap between the icon and the text in the bottom and top text position cases.

Looking at the left and right text position cases, the gap variable is only used for the X calculation, NOT for the Y calculation.

If this is actually the intended behaviour, someone please enlighten me how to get rid of the gap without affecting the X position of the text and the icon.

Thank you.

Lequi
  • 539
  • 2
  • 13

1 Answers1

1

This seems to be a mistake, we'll fix it. Notice that the gap wasn't designed for negative values so if that fails for you it's not necessarily a bug.

Shai Almog
  • 51,749
  • 5
  • 35
  • 65
  • true, I am using it with negativ values. but first, negative values are not restricted and they seem to work as intended (apart from this specific use case) and second the issue even occurs with positive values. Would greatly appreciate a fix for this, or you can let me know how to participate in helping to fix it. – Lequi Apr 18 '19 at 15:33
  • This is already fixed and is in today's release. My second comment was just a "disclaimer". – Shai Almog Apr 19 '19 at 03:41
  • After making sure I have the latest CN1 verison and I refreshed the project libs, I can still see the error occuring, both in the app visually, as well as in the code. Now, the affected codeline is 7634. So there were a lot of changes in this class, but the gap is still affecting the x value. There may be edge cases I do not see right now, but I do believe removing "+gap" from x calculation line in the Center alignment TOP and BOTTOM cases would fix it. Then it would also be logically consistent with the Center alignment LEFT and RIGHT cases, in which GAP only affects the x value, but not y. – Lequi Jul 26 '19 at 11:33
  • This is more complicated than that since label is drawn natively on iOS and Android so that code exists in these ports. – Shai Almog Jul 27 '19 at 04:17