Orientation guidelines

fabero · Aug 25, 2011

I know, I can block orientantion for example if I block landscape, if device rotate 90° the app remain like in vertical.

But I want to know how to:

1) cacth the orientation mode, that is horizontal or vertical; or else catch if the app is in horizontal or vertical?

2) how to define the layout if is horizontal or vertical? There is a way to define both layout?

3) How use the defined layout based of the orientation.

klaus · Aug 25, 2011

1) You can check if Activity.Height > Activity.Width then it is in portrait mode. But if your concern is what layout the system should use you don't need it the OS does it, see below.
2) You can define two layout variants in a same layout file, one for portrait and one for landscape. You'll find an exampe in chapter 8.6 Layout variants in the Beginner's Guide.
3) Don't worry about that, the OS does it for you. It takes the layout that best fits the current conditions. If you have a layout file with two layout variants, portrait and landscape, the OS will take the right one.

Best regards.

fabero · Aug 25, 2011

klaus said:
1) You can check if Activity.Height > Activity.Width then it is in portrait mode. But if your concern is what layout the system should use you don't need it the OS does it, see below.
2) You can define two layout variants in a same layout file, one for portrait and one for landscape. You'll find an exampe in chapter 8.6 Layout variants in the Beginner's Guide.
3) Don't worry about that, the OS does it for you. It takes the layout that best fits the current conditions. If you have a layout file with two layout variants, portrait and landscape, the OS will take the right one.

Best regards.

So you are meaning that:

1) Add a variant and rerrange the activity with the new layout.

2) the OS choose automatically the right layout

Right?

But that add a questions:

Rotating with emulator, and adding variant, i rearrange the Activity. So for a only phone application, it will be ok.

But I can't code a single application that's good for tablet and phones, because, how I can test on emulator for tablets?

And.. The emulator with level 8, i suppose, doesn't support "tablet variant" 10".. I need to set a new emulator, with setting manually the dimensions in pixel, and next choose the new right variant to rearrange layout?

klaus · Aug 25, 2011

1) Add a variant and rerrange the activity with the new layout.
2) the OS choose automatically the right layout

Yes.

1) If add 2 "tablet" layout (ex. 10" horizontal and landscape) and rearrange layout for this layout, the OS if on a tablet, use these layouts or not?

Yes, you need to define the layout with the resolution and density of the tablet like for the other resolutions. It could be interesting to have two layout files, one for smartphones and one for tablets because of the screen size difference. As tablets have a bigger screen you can put more views on it than on a smartphone screen. But in this case it's up to you to tell the system what layout file to load. The choice of one or several layout files depends on the number of views per 'page (screen)', number 'pages' etc. and your feeling. You should also have a look at the Documentation Wiki.

2) How I can test with emulator all layouts?

You can setup different Emulators, one for each resolution. You can change the orientagen of the Emulator with Ctrl+F11.

Best regards.

fabero · Aug 25, 2011

klaus said:
Yes, you need to define the layout with the resolution and density of the tablet like for the other resolutions. It could be interesting to have two layout files, one for smartphones and one for tablets because of the screen size difference.

Sure. But you mean code a new app specifically for tablet? Or what to do the 2 layouts and help OS to choose the right layout?

fabero · Aug 25, 2011

klaus said:
You can setup different Emulators, one for each resolution. You can change the orientagen of the Emulator with Ctrl+F11.
Best regards.

Level 8, seems not allowed predefined 1280x800 layout. You suggest me to set manually like wrote in the common device sizes?

klaus · Aug 25, 2011

But you mean code a new app specifically for tablet?

No, not necessarily.

Or what to do the 2 layouts?

You can have two layout files and in the code (one code for all) select the right layout file. If there are too many differences for the 'page' (screen) updates having two different applications could also be a solution, but probably less convenient for maintenance. This depends on the complexity of the application.

Best regards.

fabero · Aug 25, 2011

klaus said:
No, not necessarily.

You can have two layout files and in the code (one code for all) select the right layout file. If there are too many differences for the 'page' (screen) updates having two different applications could also be a solution, but probably less convenient for maintenance. This depends on the complexity of the application.

Best regards.

You mean: test the Layout dimension (with or height) and do the right Activity.LoadLayout ?

klaus · Aug 25, 2011

You mean: test the Layout dimension (with or height) and do the right Activity.LoadLayout ?

Yes, perhaps also the density. It seems that there do exist smartphones with a resolution of 480/800 density 240 and 7'' tablets with a resolution of 480/800 but density 160.

Best regards.

fabero · Aug 25, 2011

klaus said:
Yes, perhaps also the density. It seems that there do exist smartphones with a resolution of 480/800 density 240 and 7'' tablets with a resolution of 480/800 but density 160.

Best regards.

Mmmmmmmmhmmm.. Wich is the difference in layout in this case?

klaus · Aug 25, 2011

The physical width and heights of a screen with 480/800 pixels density 160 are 1.5 bigger than those of a screen with 480/800 pixels density 160.
So you can put more views with same physical dimensions on the 160 density screen.
Let's take an example:
A Button with a size of 150dip * 60dip has a size of:
density 160: 150 * 60 pixels
density 240: 225 * 90 pixels
but with almost the same physical dimensions.
On a 480/800*240 screen you can put 2 buttons side by side,
but on a 480/800*160 screen you can put 3 buttons side by side.

Best regards.

fabero · Aug 25, 2011

klaus said:
The physical width and heights of a screen with 480/800 pixels density 160 are 1.5 bigger than those of a screen with 480/800 pixels density 160.
So you can put more views with same physical dimensions on the 160 density screen.
Let's take an example:
A Button with a size of 150dip * 60dip has a size of:
density 160: 150 * 60 pixels
density 240: 225 * 90 pixels
but with almost the same physical dimensions.
On a 480/800*240 screen you can put 2 buttons side by side,
but on a 480/800*160 screen you can put 3 buttons side by side.

Best regards.

Interesting but very complicated to manage... The commons dpi i see in wiki, but specifically for device where i can find? Another thing that i ignored.. The unit dimensions for views (label, button) defined by gui with designer about height and withd are dpi and not pixels? In your example with 2 device wich different dpi but same dimensions, the button appear differently?

klaus · Aug 25, 2011

Interesting but very complicated to manage...

Yes, that's why I wrote that it could be intersting to have two applications one for smartphones and one for tablets, depending if you want to put more views on the big screen.

The unit dimensions for views (label, button) defined by gui with designer about height and withd are dpi and not pixels?

The dimensions in the Designer are dips (density independant pixels).

In your example with 2 device wich different dpi but same dimensions, the button appear differently?

Attention, the phyical button sizes are the same, not the screen sizes.

Best regards.

fabero · Aug 25, 2011

Ok so I do 2 different app. One for phones, another for tablets.

klaus said:
Attention, the phyical button sizes are the same, not the screen sizes.
Best regards.

So the only thing needed is make an emulator with correct screen size, and put my views in designer mode. Right?

klaus · Aug 25, 2011

Yes, the only problem that you could have is the screen size of your computer to show the whole Emulator size.

Best regards.

fabero · Aug 25, 2011

klaus said:
Yes, the only problem that you could have is the screen size of your computer to show the whole Emulator size.

Best regards.

Ok Klaus, you are so welcome. You explain me more things that I ignored. :sign0060:

+1 to you

nfordbscndrd · Aug 25, 2011

klaus said:
Yes, that's why I wrote that it could be intersting to have two applications one for smartphones and one for tablets, depending if you want to put more views on the big screen.

I have a large app which uses more views on tablets than on phones, but I just use different layouts in the same app. I would hate to try to keep the code in sync for two different apps for the same program -- having to make a change in one every time I made a change in the other.

nfordbscndrd · Aug 25, 2011

fabero said:
Ok so I do 2 different app. One for phones, another for tablets.

For the record, I am just a bug at the feet of Klaus in terms of B4A knowledge, but creating separate apps for phones and tablets sounds to me like asking for trouble (in my humble opinion).

You mentioned looking at the Wiki, but it shows code explaining how to use layouts for different size and density devices (phones to tablets) in the same app. Does that not work for you?

The commons dpi i see in wiki, but specifically for device where i can find?

The Wiki also refers you to this post for an example of how to adjust layouts for slightly different device resolutions, so you do not need to create a different layout for the exact sizes and dpi of each device.

fabero · Aug 25, 2011

nfordbscndrd said:
For the record, I am just a bug at the feet of Klaus in terms of B4A knowledge, but creating separate apps for phones and tablets sounds to me like asking for trouble (in my humble opinion).

You mentioned looking at the Wiki, but it shows code explaining how to use layouts for different size and density devices (phones to tablets) in the same app. Does that not work for you?

Seems to be more simple. Doing 2 apps.

The Wiki also refers you to this post for an example of how to adjust layouts for slightly different device resolutions, so you do not need to create a different layout for the exact sizes and dpi of each device.

Great!

klaus · Aug 25, 2011

I also wrote this:

You can have two layout files and in the code (one code for all) select the right layout file. If there are too many differences for the 'page' (screen) updates having two different applications could also be a solution, but probably less convenient for maintenance. This depends on the complexity of the application.

The choice should be the difference between
- the amount of code differentiation between the management of the different screen contents, on a bigger screen you could have less 'pages' than on a small screen. This also, is not that easy for maintenance.
- the hassle of maintaining two applications.

I know, the choice is not evident nor easy. My goal is by far not to promote two applications but to carefuly evaluate the problem to make a good choice.

Best regards.

Orientation guidelines

Member

Expert

Member

Expert

Member

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Well-Known Member

Well-Known Member

Member

Expert

Privacy & Transparency

Privacy & Transparency