Search code examples
javaresourcescodenameoneimage-scalingimage-size

CodenameOne - Importing set of images in the theme


My CodenameOne app is mainly intended to be the iOS counterpart of an existing Android app. It is for older devices, in fact, as soon as possible, or in the future, a Swift app is going to replace it for OS 14>.

I need some customised icons and I have the svg code for it.

Initially I had to use the Flamingo tool, that converts svg files in Java classes. I used it like

ScaleImageButton appButton=new ScaleImageButton(new AppIcon().scaled(doubleButtonSize,doubleButtonSize).toImage());

It is cumbersome but it does not even work on iOS.

So now I resorted to create png images for every icon in every dpi level, as it can also be done on Android.

I renamed the files so they follow the standard I think it is proposed in CodenameOne. The possible names are:

verylow.png

low.png

medium.png

high.png

veryhigh.png

560.png

hd.png

2hd.png

4k.png

In the end it has to be used like

Image icon = theme.getImage("icon.png"); 

It seems that the images can be imported in the project in more than one way.

I was said to include them in the theme.

According to the CN1 developer guide I have to set the size for each.

If I import them as a whole (selecting the folder or selecting all images and hitting the "Open" button) in the theme editor a dialog appears with all wrong sizes (but they resemble a particular set of choice, although very unlikely).

They are not always the same sizes but neither they are defaulted according to the provided set of images.

I provide images as 24px, 36px, 48px, 72px, 96px, 144px, 192px, 288px, 384px for normal size icons, and also I provide double sized images for double size icons in my app (the values are not doubled as expected).

I also have to check "Square image" and "Preserve aspect ratio" options (my images are already square).

Then the strangest part is that there is a percentage, I see it is 20 for example. The caption reads "will affect all entries". I understood that it is to scale images, that is what a developer just do not want, unless the developer has wrong sizes, but still proportioned among themselves, that cannot be the case I think.

However I do not need any scaling, the images are right as they are. I created them on purpose.

The developer guide is not enough clear to me.

So I am asking

is it right to tweak the wrong size to match the right ones, and what about the percentage?


Solution

  • This specific UI is a bit out of date by now and wasn't used much even when it was added. Most users opted to do desktop scaling for multi images.

    The scale option is designed to scale down from a high resolution image on the desktop. You don't want/need that.

    You don't need to edit the file. Just make sure to turn on the XML team mode and make sure your images use the right file names. Then once you save the images will appear in the resource file.

    I suggest adding a multi-image using the standard method of add in the menu. Then replacing all the generated images with your copies and reopening the file, then saving again (the last save is important as it will override the res file).