How can I set gap between icon and text of the button. Here I've set the textPosition as Label.BOTTOM. Setting margin or padding in style of icon doesn't work.
Code:
style.setMarginBottom(100);
style.setPaddingBottom(100);
FontImage bookingIcon = FontImage.createMaterial(FontImage.MATERIAL_FILTER_NONE, style, 4);
Button bookingButton = new Button(bookingIcon);
bookingButton.setUIID("SeparateLine");
bookingButton.setText("Book");
bookingButton.setTextPosition(Label.BOTTOM);
This is a special case called "gap". E.g. bookingButton.setGap(pixels); or Label.setDefaultGap(pixels);.
Alternatively you can use the theme constant labelGap which should map to gap size in millimeters.
Related
I've set the uiid of a picker in the theme. The font is set in millimeter (2.5) for all unselected, selected and pressed.It works fine. But when I use setEnabled(false), the font style changes and is bigger. P.S I've set same font and same font size for unselected, selected and pressed in the theme. How can I make it work?
Picker stationPicker = new Picker();
stationPicker.setEnabled(false); //without this line, it works fine
stationPicker.setType(Display.PICKER_TYPE_STRINGS);
stationPicker.setSelectedString("Select the service center");
stationPicker.setUIID("small");
stationPicker.getAllStyles().setMarginLeft(1);
stationPicker.getAllStyles().setBgColor(0xcccccc);
when setEnabled isnot used
Img when setEnabled is used
There is another UIID: Disabled.
When you set enabled to false the disabled UIID takes over.
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));
I have a written a custom toolbar. And I am having tough time to make it work (design wise). I have a couple of questions regarding it.
1)The main issue I am facing is to place the menu icons in their exact positions. When I tested it in different devices the gaps betn them is different.I have used table layout and grid layout for the menu icons as well & the logo in layered layout but the result is not good.
Code:
void addTitle(Form form, Resources theme) {
Toolbar toolbar = new Toolbar();
form.setToolbar(toolbar);
Container containerTitle = new Container(new BorderLayout());
Image titleImage = theme.getImage("toolbar_bg.jpg");
containerTitle.getAllStyles().setBgImage(titleImage);
containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
containerTitle.setPreferredH(titleImage.getHeight());
ScaleImageButton ruslanLogo = new ScaleImageButton();
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
FlowLayout.encloseCenter(ruslanLogo)));
Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);
ruslanLogo.setIcon(ruslanLogoImage);
Image emergencyImage = theme.getImage("emergency.png");
Image receipeImage = theme.getImage("receipe.png");
Image fmImage = theme.getImage("fm.png");
Image gameImage = theme.getImage("game.png");
TableLayout tableLayout = new TableLayout(1, 5);
//GridLayout gridLayout = new GridLayout(5);
Container tableContainer = new Container(tableLayout);
Button emergencyButton = getButton(emergencyImage);
emergencyButton.getAllStyles().setAlignment(Label.CENTER);
Button fmButton = getButton(fmImage);
fmButton.getAllStyles().setAlignment(Label.CENTER);
Button gameButton = getButton(gameImage);
gameButton.getAllStyles().setAlignment(Label.CENTER);
Button receipeButton = getButton(receipeImage);
receipeButton.getAllStyles().setAlignment(Label.CENTER);
Button transparentButton = getButton(receipeImage);
transparentButton.getAllStyles().setAlignment(Label.CENTER);
transparentButton.setVisible(false);
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(emergencyButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(fmButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(transparentButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(gameButton));
tableContainer.addComponent(tableLayout.createConstraint().widthPercentage(20), BoxLayout.encloseY(receipeButton));
containerTitle.addComponent(BorderLayout.SOUTH, tableContainer);
toolbar.revalidate();
}
2)I have checked the width and preferred width, they differs. Does it affects the design?
int width = emergencyButton.getWidth(); //60
int preferredwidth = emergencyButton.getPreferredW(); //74
3)In above code, I used the bg image height to set the height of the toolbar. "containerTitle.setPreferredH(titleImage.getHeight());" Is it the good way to set height? Because the height changes slightly in android mobiles I have tested, however it looks horribly big in tabs, and I tested it in different simulator, the height differs greatly. How have you set the toolbar height in normal toolbar?
Image titleImage = theme.getImage("toolbar_bg.jpg");
containerTitle.getAllStyles().setBgImage(titleImage);
containerTitle.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_TILE_HORIZONTAL);
containerTitle.setPreferredH(titleImage.getHeight());
ScaleImageButton ruslanLogo = new ScaleImageButton();
toolbar.setTitleComponent(LayeredLayout.encloseIn(containerTitle,
FlowLayout.encloseCenter(ruslanLogo)));
4)How can I set the width of icon?
Image emergencyImage = theme.getImage("emergency.png");
Button emergencyButton = getButton(emergencyImage);
if I just do this, some devices the icon is too big.If I scale it eg: emergencyImage.scaledWidth(screenwidth/8) , the image quality is bad.If I set preferredW like emergencyButton.setPreferredW(100), the img width varies vastly in different devices. PS the images in the theme are saved as multiImage
Setting the preferred width/height is problematic as it implies the inverse dimension and might have quite a few implications. I noticed you used:
Image ruslanLogoImage = theme.getImage("ruslanLogo.png").scaledWidth(toolbar.getPreferredH() - 180);
Which sets the width based on the preferred height instead of the width/5 or something like that. It also sets the value based on preferred height before the toolbar construction is done so things will behave differently.
Preferred width includes padding which might affect your design. I would suggest creating a center aligned 0 padding/margin UIID in the designer and setting it to all of your components to eliminate padding/margin differences and shorten your code.
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);
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