Change CodenameOne Accordion Icon UIID

Question

How do you change the UIID for the openIcon and closeIcon on a CodenameOne Accordion? It does not appear that there is any method available to do this.

What I am ultimately trying to do is to change the color of the material icon being used for the openIcon/closeIcon in one instance of an Accordion component. I have tried to do this a dozen different ways with no luck. I have been able to change the UIID of the accordion container itself, the header, and the content, but not the > icon.

I realize that I could create a > icon of the desired color and then use setCloseIcon/setOpenIcon to assign it. However, I would prefer to use the material icon, and those get their color from the UIID.

I see in the CN1 source that arrow.setUIID("AccordionArrow"); appears to be used in the AccordionContent class. However defining an AccordionArrow UIID in the theme builder does not appear to make a difference either.

Diamond Diamond · Accepted Answer · 2017-08-31T22:09:03

You can customize the material icons programmatically. Create below method and reuse it where necessary.

public static FontImage materialIcon(char charCode, float size, int color) {
    Font fnt = Font.createTrueTypeFont("native:MainLight", "native:MainLight").derive(CN.convertToPixels(size), Font.STYLE_PLAIN);
    Style s = new Style(color, 0, fnt, (byte) 0);
    FontImage fm = FontImage.createMaterial(charCode, s);
    return fm;
}

//Change material icon, size and color as appropriate
accordion.setOpenIcon(materialIcon(FontImage.MATERIAL_ARROW_DROP_DOWN, 4, 0x4D5052));
accordion.setCloseIcon(materialIcon(FontImage.MATERIAL_ARROW_DROP_UP, 4, 0x4D5052));

Change CodenameOne Accordion Icon UIID

1 Answers