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:
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.
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.