Scaling background image without distorting proportions

[AUDIOVISUALISA]

Hi all,

I am fairly new to App Inventor and got stuck with a little problem, that seemed pretty simple to me at the beginning, but I could not find a helpful answer yet:

I would like to make an app that works on different devices, with different screen sizes and aspect ratios. The orientation of the app should always be portrait (not landscape). In this app, I would like to add a background image on every screen. To make this background picture fit to every device size, I would like to center-align it horizontally (so that it is not left- or right-aligned) and make the height of the picture always fill the height of the screen. The width should scale proportionally (not distort the image!) and the left and right edges of the image can be cropped depending on the aspect ratio of the device (the main subject of the picture should be in the middle anyway, so whatever is cropped on the left and right is not that important).

Is it possible to somehow solve it this way? If not, is there any other solution to maintain the image proportions?

Any help will be very much appreciated!
Thanks in advance.
Lisa

[SteveJG]

You have several questions.

Portrait

set Screen1.ScreenOrientation to    portrait           in the Screen1.Initialize event handler

Different screen sizes

This is problematical until MIT implements Android API 4  options to use features of Tablets that could occur at any time but most probably sometime this Summer.

===================================================

Universal screen size by Sajal

http://www.imagnity.com/tutorials/app-inventor/universal-screen-size-using-app-inventor/

Taifun's explanation:  http://puravidaapps.com/snippets.php#2screensize

=============

A possible work around for images.

App Inventor can not directly report the 'real' screen dimensions in pixels of a png or jpg image.

So, you got to figure that out.

You could  put the image in a Canvas.BackgroundImage   and have the H and W set to  Automatic

..then   imageW   to  Canvas1.Width; imageH to Canvas1.Height     (where the imageW/imageH are variable place holders used  to establish the H W.

Now you have H and W, so you know the aspect ratio of the IMAGE.W/H = imageAspectRatio

Then....     set  Canvas.Width to Screen1.Width;    Canvas.Height to   ....   ok, you get the idea; this gets complicated.  However, you now have the correct proportions Lisa.

(You might be able to do this with an Image control instead of a Canvas....have not tried)

Try some blocks and show us what you get.

Regards,

Steve

[AUDIOVISUALISA]

Hello Steve,

Portrait

set Screen1.ScreenOrientation to    portrait           in the Screen1.Initialize event handler

 
"portrait" in this case is a text block?

Different Screen Sizes
Thanks for the canvas hint. I tried out a solution based on that and it worked. What I did is the following:
1) I made a square dummy image (Dummy_Background.jpg) with a size of 1920x1920px (biggest Android device has this height, as far as I know...). The main subject of the image is in the middle area, that would fit into a device with 9:16 aspect ratio (narrowest device aspect ratio).
2) I put a canvas on the screen, with automatic width and height and put the Dummy_Background.jpg as its BackgroundImage (see Designer_Viewer.jpeg attached). In Designer mode it looks weird, because the image is bigger than the screen, but don't get confused by that, haha! :D
3) In Blocks mode, in the Screen1.Initialize event handler, I set both canvas width and height to screen height (as the image is square). So whenever Screen1 is started, the canvas will be as wide and high as the screen's height (see Blocks.jpg attached).
4) Emulator_View.jpg shows the result in the emulator, as opposed to the problem I had before (Emulator_View_wrong.jpeg).

But this raises another question:
As the background image is now actually a canvas with a background image, is it still possible to put text/buttons/checkboxes etc. on top of it?

All the best!
Lisa

[SteveJG]

Yes, portrait goes in a violet  Text block ... you type portrait    

You can not place buttons on a Canvas.  You can use the Canvas  DrawText for labels  and either use ImageSprites placed on the Canvas as 'buttons' ..they have event handlesrs for Touched, TouchedDown and TouchedUp.. so they can simulate a button.   You can create a hotspot on the Canvas so that when clicked the Canvas Touched will act as a button but only for the area you define with a 'ring fence.)

Here are some other options That might work  ...    Screen1.BackGroundImage = Canvas1.Picture  and compensate for the aspect ration.   If the image is in the background, then you may place Buttons, labels etc. on top of the image.

Again, try some blocks...you appear to be progressing   :)     ...and others certainly appreciate you post with images.

Regards,

Steve