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.
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));
Related
I want to change the Material-UI form dialog box background color but in doing so the text-field color is also changing...what should I do?
You can override the style of the component, here are a few links to the MUI docs for reference.
Here's the link to React Dialogue's override CSS documentation. Here is a second link to overriding/ styling the component, and a third.
In my app, I can't figure out how to properly style the toolbar with my logo image.
What I want to make it look like is pretty much like the Toolbar from the "Sport1" App.
Example
So I need the back Command on the left side of the toolbar, my logo in the middle from a MultiImage out of the resource and on the right another command.
Also, I'd like to let the Toolbar get smaller with scrolling.
What I have tried so far:
res_theme = r;
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
So, this looks good the way it is. I dont actually need a Title, thats why I do
Form f = (" ", ...);
If I don't add a title to the form, the toolbar gets very small and squeezes the background Image from the toolbar. The centered logo from the toolbar is just for styling reasons there, it does not need to have a command. Is there a way to leave out the Title? I now have set it to completely transparent, but for me this is just a work-around.
Also, I guess rather than setting the logo as background with a centered alignment, I think it would be better to add it to the title section as Image, but I don't know if this is better or how to do it.
Now, I also want to make the Toolbar get smaller when scrolling down. I found kind of a example code in the Codename One Toolbar Documentation, but it does not work out for me, since the background Image gets removed.
This was the code for the scrolling Animation:
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
In the example, it worked. With my toolbar it does not, I have no clue why. I also can't see, where the size of the "after scrolling toolbar" is set.
Can I add there an Image as well? Kinda like one toolbar before scrolling with my logo, then while scrolling it transforms into a smaller one with only a textlogo image?
Here is my whole code what I have tried to make it work:
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
f.add(new SpanLabel("asdasdasdasd");
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
f.show();
From the example above if looks like you just want to use the image as the title instead of styling the toolbar with a background image.
Just use ((Label)toolbar.getTitleComponent()).setIcon(myImage);.
I am interested in customizing the side menu. I would like to draw a shadow over the "previous screen" that had slid right when a hamburger / side menu opens.
Is there currently a way to accomplish this?
Here is a screenshot of what I would like to accomplish:
What would be nice if there was the equivalent of Dialog.setDefaultBlurBackgroundRadius(8); for SideMenu
You can do that pretty easily. Style the SideNavigationPanel UIID to white to create the background color, make sure it's opaque (bg transparency == 255).
You can add side commands with material icons using addMaterialCommandToSideMenu from the Toolbar class. However it will set the same color to both the icon and the text so an alternative would be to use an icon from FontImage or elsewhere.
The separator can be added like we do it in the new kitchen sink:
Label separator = new Label(" ");
Style separatorStyle = separator.getAllStyles();
separatorStyle.setBgImage(Image.createImage(40, 2, 0x7f000000));
separatorStyle.setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL_ALIGN_CENTER);
separatorStyle.setMargin(0, 0, 0, 0);
f.getToolbar().addComponentToSideMenu(separator);
How can i style the side menu, I created it using this tutorial youtube link, I want ot make it transparent and insert a label with a logo
please see below images on how i would like it to look like.
How it looks now
How i would like it to look
How i would like it to look when opened
To style the side menu, modify the SideNavigationPanel UIID in your theme.
To add the logo, you can do something like this
Toolbar t = new Toolbar();
form.setToolbar(t);
t.setTitle("tayary");
Label logoLabel = new Label(logoImage);
logoLabel.setTextPosition(Label.BOTTOM);
logoLabel.setText("label text here");
logoLabel.setUIID("SideMenuLogo");
t.addComponentToSideMenu(logoLabel);
Add the SideMenuLogo UIID to your theme, change Alignment to Center, and adjust the Top and Bottom margins.
To underline commands, modify the background in SideCommand UIID in your theme. It should be of Type: IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM. For the image, you can use any borderBottom image in your theme (If you don't have one, create any border using Image Border Wizard, and use its borderBottom image).
You can check this demo for a working a example.
I've dynamically created a horizontal scrolling list of labels (with icon and bottom text) within a container in a tab.
However, I cannot seem to bind any action to this Label - I want touch, long press, options(commands), drag, etc
If I use Button instead of Label, I cannot seem to use URLImage to grab the icon from a url and save it to storage and use that as the button icon. It always uses only the placeholder from:
Image img = URLImage.createToStorage(placeholder, counter+"_thumbnail", thumbnailURL, URLImage.RESIZE_SCALE);
How do I grab events on the Labels? Here is a snippet of how I'm adding the labels to the container:
Container c = StateMachine.instance.findFirstListContainer();
for(...){
Label l = new Label();
l.setText(title);
l.setIcon(img);
l.setUIID("listItem");
l.setTextPosition(2);
c.addComponent(l);
}
You should use a Button rather than a Label and invoke the setUIID("Label") method.
The reason why you didn't do this is a separate question/issue: https://groups.google.com/d/msg/codenameone-discussions/5HoDEFjB5II/5dc4iKuYNSYJ