Image displaced or absent with ImageViewer

Question

Using the designer. My form has a layout BoxLayoutY. I just drop the ImageViewer in it. I have a pic added through "Add Picture", which is 1080 x 1400. I add it to the ImageViewer.
The "Simulate Device" command gives, in iPhone3:

And in Nexus (the pic below is static: can't be scrolled up or down):

Help?

I have installed the app locally on my Android and I get the same half cut pic as in the screenshot of the Nexus simulator.

The overal goal is to have a single form, scrollable vertically, showing pics (adjusted at the width of the screen) and text.

EDIT:
Could be a problem with the resolution of the pic. I decrease the res to 350 x 467 and it displays fine. So it will pixelize or won't scale to fit the width of the screen on larger devices?

Answer 1

The image viewer doesn't have a preferred size since it doesn't have an image in it. Its designed for usage full screen or within a predetermined layout. If you place it in the center of a border layout it will take up available space and work as expected.

Since it scales the image and allows manipulation of that images size, its size is flexible. If you want a component that takes up the exact image size you should use a Label.

Answer 2

Ok got it!

What I was doing wrong was that I had:

MainForm (in a BoxY layout)
-> a container nested in it (in Borderlayout)
---> an ImageViewer nested at the center of it.

This produced the effect above (half cut pic).

Instead, what achieved a properly sized pic was:

MainForm (in a BorderLayout).
-> The ImageViewer nested at the center of it. That's it, no container.