Grid layout button sizing issues

Question

button img size in the grid layout doesnt change whatever I do. Following is my code. if i scale the placeholder it hav no effect as well. The space that takes by padding and margin stays when i set padding and margin to zero as well. How can i make it compact and get rid of that gap between images..

        GridLayout gr = new GridLayout(1,2);
        gr.setAutoFit(true);
        Container grid = new Container(gr);
        grid.setUIID("containerGridImgGallery");
        grid.getAllStyles().setPadding(0, 0, 0, 0);
        grid.getAllStyles().setMargin(0,0,0,0);
        f.addComponent(BorderLayout.CENTER,grid);

        placeholder = (EncodedImage) r.getImage("switch_on.png");
        //if I change the scaled value of placeholder, the img size doesnt change in the grid  eg scaledEncoded(screenWidth / 3, screenWidth / 3) doesnt change the img size
        placeholder = placeholder.scaledEncoded((screenWidth / 2)-10, screenWidth / 3);

        EncodedImage a = URLImage.createToStorage(placeholder , galleryPhotoTitle + offset + imageId, galleryPhotoUrl, URLImage.RESIZE_SCALE_TO_FILL);
        final Button btn = new Button(a);
        btn.setUIID("galleryGridButton");
        btn.getAllStyles().setPadding(0, 0, 0, 0);
        btn.getAllStyles().setMargin(0,0,0,0);

i need grid Layout here since i can set to gridLayout.autofit() in gridLayout which is what i just wanted to auto fit the images as per the screens.How can i fit the grid cells to that of the button inside it? can i set the size of the grid?

updates:

//how to use scaleImageLabel in button? i got it work somehow but not correctly i guess

EncodedImage a = URLImage.createToStorage(largePlaceholder, galleryPhotoTitle + offset + imageId, galleryPhotoUrl, URLImage.RESIZE_SCALE_TO_FILL);
final Button btn = new Button(a);
Image abc = btn.getIcon();
ScaleImageLabel scaledPlaceholder = new ScaleImageLabel(abc);
Container imageHolder = new Container();
imageHolder.addComponent(btn);
btn.setPreferredSize(new Dimension(1,1));
imageHolder.addComponent(scaledPlaceholder);
imageHolder.setLeadComponent(btn);
grid.addComponent(i, imageHolder);

i have a couple of questions: 1)why can't i set the uiid of scaledPlaceholder above (ScaledImageLabel) it takes some of padding & margins which i want to remove. If i set uiid the images do not appear.

2)how does setBackgroundType() work? it doesnot take setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT).

3)And most importantly how can i fit the images in the grid maintaining the aspect ratio? if i do smth like - abc = abc.scaled(230, 336); It fits in the grid but doesnt keep the aspect ratio of the image.

Updates 1:

EncodedImage a = URLImage.createToStorage(largePlaceholder, galleryPhotoTitle + offset + imageId, galleryPhotoUrl, URLImage.RESIZE_SCALE_TO_FILL);
ScaleImageButton scaleImageButton = new ScaleImageButton(a);
scaleImageButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent evt) {
            //......
            }
        });
        grid.addComponent(i, btn);

exception:

java.lang.NullPointerException
    at userclasses.StateMachine$ScaleImageButton.calcPreferredSize(StateMachine.java:500)
    at com.codename1.ui.Component.preferredSizeImpl(Component.java:1930)
    at com.codename1.ui.Component.preferredSize(Component.java:1965)
    at com.codename1.ui.Component.getPreferredSize(Component.java:752)
    at com.codename1.ui.Component.getPreferredW(Component.java:832)
    at com.codename1.ui.layouts.GridLayout.getPreferredSize(GridLayout.java:153)
    at com.codename1.ui.Container.calcPreferredSize(Container.java:1793)
    at com.codename1.ui.Component.preferredSizeImpl(Component.java:1930)
    at com.codename1.ui.Component.preferredSize(Component.java:1965)
    at com.codename1.ui.Component.getPreferredSize(Component.java:752)
    at com.codename1.ui.Component.getPreferredW(Component.java:832)
    at com.codename1.ui.layouts.GridLayout.getPreferredSize(GridLayout.java:153)
    at com.codename1.ui.Container.calcPreferredSize(Container.java:1793)
    at com.codename1.ui.Component.calcScrollSize(Component.java:782)
    at com.codename1.ui.Component.getScrollDimension(Component.java:769)
    at com.codename1.ui.Container.isScrollableY(Container.java:1873)
    at com.codename1.ui.Component.isScrollable(Component.java:1686)
    at com.codename1.ui.Form.isScrollable(Form.java:3058)
    at com.codename1.ui.Component.checkAnimation(Component.java:3802)
    at com.codename1.ui.Component.initComponentImpl(Component.java:4209)
    at com.codename1.ui.Container.initComponentImpl(Container.java:843)
    at com.codename1.ui.Form.initComponentImpl(Form.java:1608)
    at com.codename1.ui.Display.setCurrent(Display.java:1332)
    at com.codename1.ui.Form.show(Form.java:1588)
    at com.codename1.ui.Form.show(Form.java:1566)
    at com.codename1.ui.util.UIBuilder.showForm(UIBuilder.java:2515)
    at com.codename1.ui.util.UIBuilder.showForm(UIBuilder.java:2561)
    at userclasses.StateMachine.showGalleryImage(StateMachine.java:159)
    at userclasses.StateMachine$1.lambda$readResponse$0(StateMachine.java:136)
    at userclasses.StateMachine$1$$Lambda$17/1247957021.actionPerformed(Unknown Source)
    at com.codename1.ui.util.EventDispatcher.fireActionEvent(EventDispatcher.java:345)
    at com.codename1.ui.Button.fireActionEvent(Button.java:397)
    at com.codename1.ui.Button.released(Button.java:428)
    at com.codename1.ui.Button.pointerReleased(Button.java:516)
    at com.codename1.ui.Form.pointerReleased(Form.java:2560)
    at com.codename1.ui.Form.pointerReleased(Form.java:2496)
    at com.codename1.ui.Component.pointerReleased(Component.java:3108)
    at com.codename1.ui.Display.handleEvent(Display.java:2017)
    at com.codename1.ui.Display.edtLoopImpl(Display.java:1065)
    at com.codename1.ui.Display.mainEDTLoop(Display.java:994)
    at com.codename1.ui.RunnableWrapper.run(RunnableWrapper.java:120)
    at com.codename1.impl.CodenameOneThread.run(CodenameOneThread.java:176)

error occured in here

 @Override
        protected Dimension calcPreferredSize() {
            Image i = getIcon();
            Style s = getStyle();
         //error occured here
            return new Dimension(i.getWidth() + s.getPaddingLeft(false) + s.getPaddingRight(false), i.getHeight()
                    + s.getPaddingTop() + s.getPaddingBottom());
        }

One more thing if i use label instead of btn it works fine but same doesnt work in case of button why is that?

Update 2: after adding getIconFromState method, blank form is displayed - same old problem and if null checker is removed, following error

java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.codename1.impl.javase.Executor$1$1.run(Executor.java:100)
    at com.codename1.ui.Display.processSerialCalls(Display.java:1149)
    at com.codename1.ui.Display.mainEDTLoop(Display.java:966)
    at com.codename1.ui.RunnableWrapper.run(RunnableWrapper.java:120)
    at com.codename1.impl.CodenameOneThread.run(CodenameOneThread.java:176)
Caused by: java.lang.NullPointerException
    at userclasses.StateMachine$ScaleImageButton.calcPreferredSize(StateMachine.java:303)
    at com.codename1.ui.Component.preferredSizeImpl(Component.java:1930)
    at com.codename1.ui.Component.preferredSize(Component.java:1965)
    at com.codename1.ui.Component.getPreferredSize(Component.java:752)
    at com.codename1.ui.Component.getPreferredW(Component.java:832)
    at com.codename1.ui.layouts.GridLayout.getPreferredSize(GridLayout.java:153)
    at com.codename1.ui.Container.calcPreferredSize(Container.java:1793)
    at com.codename1.ui.Component.preferredSizeImpl(Component.java:1930)
    at com.codename1.ui.Component.preferredSize(Component.java:1965)
    at com.codename1.ui.Component.getPreferredSize(Component.java:752)
    at com.codename1.ui.Component.getPreferredH(Component.java:842)
    at com.codename1.ui.layouts.BoxLayout.layoutContainer(BoxLayout.java:91)
    at com.codename1.ui.Container.doLayout(Container.java:1366)
    at com.codename1.ui.Container.layoutContainer(Container.java:1358)
    at com.codename1.ui.Container.doLayout(Container.java:1371)
    at com.codename1.ui.Container.layoutContainer(Container.java:1358)
    at com.codename1.ui.Container.revalidate(Container.java:1006)
    at com.codename1.ui.Form.setFocused(Form.java:1922)
    at com.codename1.ui.Form.initFocused(Form.java:1553)
    at com.codename1.ui.Form.show(Form.java:1584)
    at com.codename1.ui.Form.show(Form.java:1566)
    at com.codename1.ui.util.UIBuilder.showForm(UIBuilder.java:2515)
    at com.codename1.ui.util.UIBuilder.showForm(UIBuilder.java:2561)
    at generated.StateMachineBase.startApp(StateMachineBase.java:56)
    at generated.StateMachineBase.<init>(StateMachineBase.java:31)
    at generated.StateMachineBase.<init>(StateMachineBase.java:98)
    at userclasses.StateMachine.<init>(StateMachine.java:51)
    at com.mycompany.myapp.MyApplication.start(MyApplication.java:23)
    ... 9 more

Update 3: screenshot looks like this now: portrait:

landscape:

However if i go to landscape mode from portrait mode and again to portrait mode the images get adjusted as expected but i can still see the thin duplicate image portion there as well.

screenshot going from portrait to landscape and again to portrait:

Shai Almog Shai Almog · Accepted Answer · 2016-01-29T04:09:48

Once the images are downloaded and match the placeholder size they are stored/cached in the system. Since Label (or Button that derives it) doesn't scale the icon image this won't change.

Changing the placeholder size after downloading won't have an effect either.

For 3.3 we introduced a new ScaleImageLabel class that should allow the label to scale to take up the additional space in such a situation. Notice that artifacts may apply due to scaling.

Since you need a Button and not a label try something like this:

public class ScaleImageButton extends Button {

    /**
     * Default constructor
     */
    public ScaleImageButton() {
        setUIID("Label");
        setShowEvenIfBlank(true);
        setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
    }

    /**
     * Create a version with the given image
     * @param i image
     */
    public ScaleImageButton(Image i) {
        setUIID("Label");
        setShowEvenIfBlank(true);
        setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT);
        setIcon(i);
    }

    /**
     * Sets the behavior of the background to one of Style.BACKGROUND_IMAGE_SCALED_FIT,
     * Style.BACKGROUND_IMAGE_SCALED_FILL, Style.BACKGROUND_IMAGE_SCALE
     * @param behavior the background behavior
     */
    public void setBackgroundType(byte behavior) {
        getUnselectedStyle().setBackgroundType(behavior);
        getSelectedStyle().setBackgroundType(behavior);
        getPressedStyle().setBackgroundType(behavior);
    }

    public byte getBackgroundType() {
        return getUnselectedStyle().getBackgroundType();
    }

    @Override
    protected Dimension calcPreferredSize() {
        Image i = getIcon();
        if(i == null) {
            return new Dimension();
        }
        Style s = getStyle();
        return new Dimension(i.getWidth() + s.getPaddingLeft(false) + s.getPaddingRight(false), i.getHeight() +
                s.getPaddingTop() + s.getPaddingBottom());
    }


    public void setIcon(Image i) {
        getUnselectedStyle().setBgImage(i);
        getSelectedStyle().setBgImage(i);
        getPressedStyle().setBgImage(i);
    }

    public Image getIcon() {
        return getUnselectedStyle().getBgImage();
    }

    @Override
    public void setText(String text) {
    }

    @Override
    public Image getIconFromState() {
        return getIcon();
    }

    @Override
    public void setUIID(String id) {
        Image icon = getIcon();
        super.setUIID(id); 
        setIcon(icon);
    }
}

Grid layout button sizing issues

1 Answers