CodeName One - Image gets pixelated when scaling - image

Question

I am getting an image dynamically from a webservice. Afterwards I am supposed to use it as background for the upper half of the screen. My problem is that I only get one size of the image (which should be approximately right for many smartphones phones) but when I resize it to make it fill half of the screen it gets pixelated.
I have tried putting it as background of a container (adding padding to the expected size) and using BACKGROUND_IMAGE_SCALED_FILL and/or using Image methods scaledHeight/scaledWidth, fill and scaled.
It doesn't matter if I scale it to a bigger or smaller size it still deteriorates noticeably.
Is this to be expected? Is there another way to scale images?
public class CopyOfVistaPantallaPrincipal extends VistaDisparaEventos {
private Container canvasPantallaPrincipal;
public CopyOfVistaPantallaPrincipal() {
canvasPantallaPrincipal = new Container();
canvasPantallaPrincipal.setName("canvasPantallaPrincipal");
super.canvas = this.canvasPantallaPrincipal;
initPantallaPrincipal();
}
private void initPantallaPrincipal() {
canvasPantallaPrincipal.setLayout(new LayeredLayout());
canvasPantallaPrincipal.getUnselectedStyle().setBgTransparency(0);
ModeloNovedades modelo = new ModeloNovedades();
Image imgPrincipal = createImagenPrincipal(modelo);
canvasPantallaPrincipal.setName("canvas pantalla principal");
Container otro = new Container(new BorderLayout());
if (imgPrincipal != null) {
img.getUnselectedStyle().setBorder(null);
img.getUnselectedStyle().setPadding(0, 0, 0, 0);
img.getUnselectedStyle().setMargin(0, 0, 0, 0);
canvasPantallaPrincipal.addComponent(img);
}
canvasPantallaPrincipal.addComponent(otro);
}
private Container createImagenPrincipal(ModeloNovedades modelo) {
return loadTopImage(modelo, modelo.getDestacado());
}
private Container loadTopImage(ModeloNovedades modelo, Hashtable destacado) {
int width = Display.getInstance().getDisplayWidth();
int imgHeight = (int) ((Display.getInstance().getDisplayHeight() / 2) * 0.95) ;
//Default image
Image foregroundImage = FormFactory.loadImage("/imagenPrincipaLogoOld.png");
if (! modelo.getDestacado().isEmpty()){
String destacadaURL = "" + destacado.get("imagen");
if (! destacadaURL.equals("")){
//After updating it loads the downloaded image here
byte[] data = (byte[]) DataCenter.getInstance().get(destacadaURL, false);
foregroundImage = FormFactory.loadImage(data, 100);
}
}
imageContainer.getAllStyles().setPadding(imgHeight/2, imgHeight/2, width/2, width()/2);
imageContainer.getAllStyles().setBgImage(foregroundImage);
imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
return imageContainer;
}
}
If I'm not returning the image but a container having it as background I would add it to a Container like this:
imageContainer.getAllStyles().setPadding(imgHeight/2, imgHeight/2, width/2, width/2);
imageContainer.getAllStyles().setBgImage(foregroundImage);
imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED); //only if it was scaled
Original image (please ignore the dark bar over it, it was added recently and I didn't save the previous version, as I said it comes dynamically):
http://i68.tinypic.com/16lmeqr.jpg
Scaled:
http://i68.tinypic.com/w7zafm.jpg
Cropped:
http://i65.tinypic.com/2nkp79l.png
Image as of the last update:
http://i68.tinypic.com/2ik7eiq.png

Answer 1

Remove all of your code that manipulates the image, needs scaling, scale etc... That is all redundant. Every pass you do on manipulating an image deteriorates it a little bit...
You need just one line change and you need to do it always so the image will always "fit" without cropping or any other changes:
imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALE_TO_FILL);
Notice that you can just use ScaleImageLabel instead of image container which does roughly the same thing.