How to control/scale image size in Codename One?

4
votes

I used the (new) GUI Builder and inserted an image (by way of adding a Label). However, it appears too big. Is there anyway I can scale and control the size? (I saw something which points to cloudinary but that seems too complicated. I just want to simply scale down the image.)

1
codenameone
I poked around the GUI Builder but could not find any way to control the image size. - ikevin8me

1 Answers

3
votes

There are several ways to resize images in Codename One and I will mention few below:

1.

Use MultiImages in the GUI Builder. With this multiple sizes of images are generated from one image based on the sizes you specified. In your GUI Builder, Click Images -> Add Multi Images -> Select your image -> Check Preserve Aspect Ratio -> Increase the % that represents the percentage of the screen width you want the image to occupy. Set any DPI you don't require to 0.

2.

Use ScaledImageLabel or ScaledImageButton, it will resize the image the fill available space the component is occupying.

3.

Scale the image itself in code (This is not efficient, though):

public static Image getImageFromTheme(String name) {
    try {
        Resources resFile = Resources.openLayered("/theme");
        Image image = resFile.getImage(name);
        return image;
    } catch (IOException ioe) {
        //Log.p("Image " + name + " not found: " + ioe);
    }
    return null;
}

Image resizedImage = getImageFromTheme("myImage").scaledWidth(Math.round(Display.getInstance().getDisplayWidth() / 10)); //change value as necessary

4.

Mutate the image (Create an image from another image).