Image Autoscale to fit width of a container

Question

I am trying to create a google+ like app were a post contains an image. I use a box layout as the container for the image, but the image does not take up the width of the parent and auto scale the height to preserve the pixel aspect ratio on android as in google plus. I can achieve this on the browser using the css rule by setting the max-width of the image to 100%.

To better understand this, see the code below

 private void loadImageArea(){
        BundleContext context=getBundleContext();
        UIBuilder builder=context.getUIBuilder();
        Container boxHeader=(Container) builder.findByName("contentWrap", getForm());
        Container imageWrap=(Container) builder.findByName("imageWrap", getForm());
        Label imageLabel=new Label();
        imageLabel.setUIID("ImageLabel");
        Image icon=getImage();
        ImageIO io;
        URLImage img;
        Image dst=null;
        int containerWidth=Display.getInstance().getDisplayWidth()-       boxHeader.getStyle().getPadding(Component.LEFT)-boxHeader.getStyle().getPadding(Component.RIGHT);
        int width=icon.getWidth();
            if(width>containerWidth){
            Log.p("Container width: "+containerWidth);
            width=containerWidth;
            dst=icon.scaledWidth(width);
        }
        imageLabel.setIcon(dst); 
        imageWrap.removeAll();
        imageWrap.addComponent(imageLabel);
    }

1)On the simulator it works after I calculate and set the scaled width of the image as the parent container returns a width of zero. Also Scaling is very poor and pixelated. I am trying to implement some filter algorithms on top of Pisces for better results, not sure of performance and memory, but would try 2)On Android ,Why is the image not using the set width and and scaling accordingly. As you can see from the output, it is centralized and down scaled.

Kind Regards!

Answer 1

You can set the image as bgImage and select the option background behavior as scale to fit which will preserve aspect ratio while showing the whole image in the available space of the component.

You can also just get a scaled version of the image using the appropriate methods of the Image class.