real Screen size capture

[moon]

Hi There,

To make my app "responsive enough" I went thru the math logic and tried to set my components fitting with my design.

Basically I started by capturing the screen size (WxH) before deploying that thru formula to the components.

the thing is that either on emulator or my nexus 5 the screen size appears to be 320x526 ! while my device is supposed to be 1080x1920

Beyond that, while I request a height of 0.05xScreen_Height it tells that I'm at 116 which is not 0.05x526 nor 0.05x1920

:-(

What is it I'm doing wrong ?

Any help/tip or link to existing effective answer will be  appreciated as I didn't find yet any suitable answer that I can use.

Many thx in advance.

M

ps: attached my blocks and the screenshot from my device (for a little example)

[Chris Ward]

Hi Moon

Well, nice try, but App Inventor does it all for you via % values for the height and width of components and arrangements. With the "Sizing" set to "Responsive" in the Screen1 properties palette, you are then good to go on most devices - the resolutions range of which is broad. Experiment!

[moon]

Hi Chris,

Thx for the answer

Honestly I never used that % that appears on the Design side.

The reason is because I never found out to what it refers to. % of the container (which one ? the hierarchically the lower? the highest?) or % of the screen height/width?

From your statement I should understand that it's always (whatever is the component) related to the screen height/width.

Is that correct ?

Thx again

M

[Chris Ward]

Hi moon

That's basically true, % of the Screen. So, if for example a Horizontal Arrangement is set directly on the screen (It's parent), It's dimensions are relative to the Screen. If you put, say, two buttons in that Horizontal Arrangement, their size is in relation to Screen %,  but note that the 'Fill Parent' option is in relation to their parent, the HorzArr. 

Tip: Set the Screen Sizing to "responsive";

Tip: Set the Screen "AlignHorizontal" to be Center and "AlignVertical" to Top;

Tip: Use empty Labels as Spacers between other components.

So in the HorzArr example, the HorzArr would typically be set to 98% wide, so the buttons will be away from the very edge of the screen. The height of the HorzArr would be determined by you, dependent on surrounding components, but let's say it's the top-most arrangement on Screen. Set it's "AlignHorizontal" to Center and  "AlignVertical" to Center. Set the Height to 12%. Now set the Buttons to 45% width, 10% height and in between them place a (no text, no margins) label, Fill Parent width, Fill Parent height. You now have a relatively ergonomic button layout across many screen resolutions.

[Chris Ward]

Hi again moon

I have attached a sample Project File to this post:

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/Mx5x5dra32I/ARFxuw7uBwAJ

If you load the file into App Inventor, you can study how I defined the App GUI. It is only a simple example but I think it will help you.

One thing I forgot to mention is that App Inventor's Design View represents the GUI layout rather crudely. The Companion Emulator is much better, but to really know if your GUI is just right, test a debug APK on your Android device (the more devices the better).