Multiple screens - one way to do it

dlfallen · May 27, 2011

There have been several posts regarding designing layouts for multiple screen sizes and densities. Specifying view locations in terms of %X and %Y is one such approach which will adapt to any screen. The result may not be optimized visually, but at least it should work on any device.

For most projects, I use the visual designer to layout the various views. Converting multiple views to relative positions can be quite tedious, but here is one method to speed the process (I used this method to update my ProbCalc program located in the Share Your Creations forum):

I used the visual designer to layout all of the views (I used 320 x 480 scale=1).

In Excel (or similar spreadsheet) I created a row with 5 columns containing "Name L T W H".

I then entered the name of each view along with its L T W H values.

I then added 4 more columns labeled "X Y X Y".

For each row (view) I had Excel divide each view's layout values by either X (320) or Y (480) (multiplied by 100 to yield the relative percentages).

Then using Excel's Concatenate fuction I generated the appropriate SetLayout string for each view.

Finally, I pasted these strings into my program in a sub called "ResizeViews", which is called from the sub Activity_Resume.

Because I wanted different portrait and landscape views, I repeated the process for the alternate layout.

It sounds a lot more complicated and time consuming than it really was. Inspect the attached spreadsheet and I think you will see.

derez · May 28, 2011

Thank you for this great idea, I just used to type the values manually after calculating, and this seams a much better way

nfordbscndrd · May 28, 2011

dlfallen said:
There have been several posts regarding designing layouts for multiple screen sizes and densities. Specifying view locations in terms of %X and %Y is one such approach which will adapt to any screen. The result may not be optimized visually, but at least it should work on any device....

Since I believe that you are referring to one of my posts above, I'm going to pitch in my two cents worth:

Your Probability Calculator appears to have about a dozen views on the layout. With such a small number of views, rough positioning of the views is good enough and your method of doing it seems to be an excellent approach.

In this thread, a couple of us were talking about a layout with 100 or more views on it, for which greater precision is needed to keep views from overlapping each other. For example, while a device may have a resolution of 800x480, its Activity.Width and .Height may be something smaller, depending on the inclusion of soft (menu) keys on some devices, different aspect ratios, or even slightly different resolutions.

In such cases, the view positions must be adjusted for the differences, and the only way to do that, AFAIK, is during run-time, since it depends on the device being used.

walterf25 · Dec 5, 2011

Multiple Screen Resolutions

Hi there, this is a very great way to resize different screen resolutions, but i was wondering how do you deal with ads, for example i'm using your spreadsheet to resize my views to fit different screen sizes, but is there a way also to make the ads from admob resize to different screen sizes?:sign0163:

timo · Dec 9, 2011

(sorry, my solution didn't work..)

Kevin · Jan 8, 2012

I know I'm digging up a bit of an old thread, but I had stumbled on this a while ago and didn't really feel like it would work for my particular app so I didn't really do anything with it.

However, after getting very frustrated lately with constantly having to deal with new (and of course slightly different!) device specs more and more frequently, I decided to give it a try. So far I have been creating new variants every time someone complains, but this is a never-ending job and very time consuming as you all know!

While it is not perfect as nfordbscndrd pointed out, I feel that it is a good start. My particular app uses around 50 buttons on each screen and all of them use custom images. Because of this, they all need to have correct height to width ratios in order to look right. This means that technically, this spreadsheet trick won't work 100% for me. However, I think it's a good start and with some (hopefully) minor tweaking, I think I can get what I'm looking for.

My thanks to dlfallen for sharing!

dlfallen · Jan 9, 2012

Kevin, I'm glad you find the technique useful - I know I do. My GPSlog program has something like 116 view modifications using this approach, and it allows the program to look and run well on both my small phone and my 10 inch tablet. It should run fine on just about any device. I haven't heard otherwise, but then again maybe nobody else has tried GPSlog.

Two things to note, illustrated in GPSlog:

Views are resized according to their parent's dimensions.
I use this method to also resize font sizes. Be sure to test readability, as I believe some minor tweaking may be necessary.

Kevin · Jan 10, 2012

I haven't had too much time to work on my app lately (working a lot) but I made some progress last night in the couple hours I had. I definitely think this is going to help solve the problem, but it is taking quite a bit of tweaking, more so than I thought.

Right now I am doing one screen to see how it works, but I've got about 8 more afterwards. This is going to take a while but hopefully I will never have to worry about new devices coming out and creating ongoing and never-ending work. :sign0060:

Thanks again!

magarcan · Jan 10, 2012

It sounds interesting. I'll check when I arrive home.

Thanks!!!

bluedude · Jan 20, 2012

Can you share some of your ResizeViews code? If I just do this and Sub resizeViews a button in the 320x480 variant, it jumps to a smaller top location.

I assume you have some more logic in ResizeViews?

dlfallen · Jan 20, 2012

The ResizeViews code is in my probability calculator project (http://www.b4x.com/forum/basic4android-share-your-creations/7315-probability-calculator.html). The sub first calculates whether you are in landscape or portrait mode, then resizes everything accordingly.

The calculation and code generation are handled in the spreadsheet in the first posting in this thread (Android.zip).

For example, suppose you developed your project in designer with X = 320 and Y = 480 (portrait mode). You place a Label at Left = 10 and Top = 60. You give it a Width = 50 and Height = 40. Expressed in %X and %Y terms, you get Left = 3.1, Top = 12.5, Width = 15.6 and Height = 8.3. The code needed in ResizeViews (and generated by the spreadsheet) is Label1.SetLayout(3.125%X,12.5%Y,15.625%X,8.33333333333333%Y)

Note that in addition to changing the size of the control, you need to recalculate its position (Top, Left).

I now sometimes also calculate the font size as well (different project).

bluedude · Jan 20, 2012

Thanks,

Got it and works. Just added a few things like checking which variant is loaded. Don't want to resize for special devices that I create variants for.

johnaaronrose · Mar 2, 2012

Queries

dlfallen,

I'm a newbie to Android & B4A. Could you tell me what is meant by %X & %Y: it looks like X & Y are the screen sizes in pixels to me and I guess that % is what it says? Looking at the code, DesignerHeight & DesignerWidth are set to 480 & 320 respectively but are not used in ResizeViews.

If you were catering for another resolution (e.g. 480x800) would you create a separate tab on the spreadsheet, copied from the existing tab but with L,T,W,H columns changed accordingly i.e. by use of the Abstract Designer for the extra pair of Layout Variants (i.e. for portrait & landscape)?

I presume that by use of code similar to that in the Designer section of the Basic4android Wiki the appropriate Layout Variant would be loaded at run time. Is that correct?

dlfallen · Mar 3, 2012

%X and %Y are pretty much what they seem to be. In a layout defined as 320 width and 480 height, X is 320 and Y is 480. 50%X would be 160, 20%Y would be 96, etc.

In the designer, I layout the views using any arbitray layout variant (eg, 320 x 480). Then in code, I allow the size and location of the view to adjust to whatever screen size the program happens to be running on. This works because the X in the code equals the width of the actual screen, not the arbitrary width (320) specified in the designer.

For example, in the probability calculator I have a view named Command1. In the designer, I set Left = 0, Top = 230, Width = 107, and Height = 60. This sets the view the way I want it on a 320x480 device. In the spreadsheet I calculate that a Left of 0 is 0%X, Top of 230 = 230/480 = 47.9166666666667%Y, Width of 107 = 107/320 = 33.4375%X, and Height of 60 = 60/48 = 12.5%Y.

In the Sub ResizeViews, the code

B4X:

Command1.SetLayout(0%X,47.9166666666667%Y,33.4375%X,12.5%Y)

uses these values to the actual device being used. If running on a 320x480 screen, the Left, Top, Width, and Height values would be 0, 230, 107, 60 as originally specified for this size screen. If the program ran on (say) a 480 x 800 screen, then for the Command1 view, the Left would be 0% of 480 = 0, the Top would be 47.9166666666667 of 800 = 383.333, the Width would be 33.4375% of 480 = 160.5, and the Height would be 12.5% of 800 = 100. The view will now appear with about the same relative size and location on the large screen as it did on the old screen.

This example also answers your question

If you were catering for another resolution (e.g. 480x800) would you create a separate tab on the spreadsheet

No, the whole point of using %X and %Y is to avoid having to have different layouts for different devices. You still need separate variants for portrait and landscape however. In the probability calculator, I have both the 320 x 480 and 480 x 320 variants listed. In the code

B4X:

 If 100%x < 100%Y Then

the logic uses one set of %X and %Y values if in portrait mode, and a different set if in landscape mode. And yes, Android will select the appropriate layout variant according to the current orientation of the device.

I hope this answers your questions.

johnaaronrose · Mar 3, 2012

Queries

dlfallen,

Thanks for your helpful reply. The problem I find with b4a is the apparent lack of a reference manual, whether online or a pdf. The search facility within the forum doesn't really cover it. Am I missing something? For instance, I wasn't able to find %X or %Y usage. It results in a newbie developing an app by using pieces of code from posts on the forum (i.e. from the tutorial examples posted by Erel & other posts) where I don't understand particular code which was explained elsewhere than those posts.

If I understand you correctly, then Android/b4a selects the landscape/portrait variant according to just the orientation i.e. it ignores the screen resolution even if the resolution of the selected emulator / connected device does not match the resolution of the layout variants. Is that correct?

Should scale be built into the spreadsheet: using a 1.5 scale device (I presume that the values on the spreadsheet are for a 1.0 scale device) should have the calculations multiplied by 1.5?

What is the purpose of setting DesignerHeight & DesignerWidth in Activity_Create: are these names keywords (since I don't see any Dim statements for them)?

Only sort of connected with this thread: I noticed that the Android SDK Platform version (e.g. android-10 representing 2.3.3 aka Gingerbread) is in the Configuration Paths. Does using 2.3.3 automatically allow for Eclair & Froyo phones?

nfordbscndrd · Mar 3, 2012

johnaaronrose said:
The problem I find with b4a is the apparent lack of a reference manual, whether online or a pdf. The search facility within the forum doesn't really cover it. Am I missing something? For instance, I wasn't able to find %X or %Y usage.

Have you looked at the Documentation Wiki (linked above in yellow) and the Beginner's Guide?

The Beginner's Guide is a step-by-step reference complete with pictures while the Wiki's purpose is to organize B4A's Help pages while frequently adding new info from the forums.

If you can't find anything when searching for %X, you can try looking for the underlying topic, which is layout design. To find that page in the Wiki, click on the yellow Wiki link above and then click on Designer. In particular, see Making Adjustments to Layouts in Code. That section has a link to a discussion of using percents to adjust layouts.

JonPM · Mar 3, 2012

johnaaronrose said:
dlfallen,

Thanks for your helpful reply. The problem I find with b4a is the apparent lack of a reference manual, whether online or a pdf. The search facility within the forum doesn't really cover it. Am I missing something? For instance, I wasn't able to find %X or %Y usage. It results in a newbie developing an app by using pieces of code from posts on the forum (i.e. from the tutorial examples posted by Erel & other posts) where I don't understand particular code which was explained elsewhere than those posts...

There its a pretty extensive Beginners Guide, have you read this? its under Documentation at the top...

Sent from my DROIDX

johnaaronrose · Mar 3, 2012

Re Documentation

nfordbscndrd & JonPM,

I have read the Beginner's Guide. But as I implied, the problem for a newbie is where to read in more details about certain topics.

I have seen the Wiki but it's quite limited in scope. I've also run the b4ahelpview utility: that seems quite awkward to find the particular topics that I'm interested in.

I've just looked at the "Making Adjustments to Layouts in Code" section of the Wiki Designer webpage. I didn't see a link to a discussion of using percents to adjust layouts: I saw a link back to this thread and a link to a thread entitled "an Alien screen resolution. best way to survive" (which seems to centre the Activity display within the actual device's display thus allowing for the Notification Area & soft home etc buttons).

dlfallen · Mar 16, 2012

While on vacation, I received an email from johnarronrose requesting further answers to questions in post #15 (above). I am responding here for two reasons:
(1) There are a lot of others in our community that know things I don't, and they may contribute further clarification or correct any of my inaccuracies, and
(2) Other users may have the same or similar questions and could benefit from a public response.

If I understand you correctly, then Android/b4a selects the landscape/portrait variant according to just the orientation i.e. it ignores the screen resolution even if the resolution of the selected emulator / connected device does not match the resolution of the layout variants. Is that correct?

Of course, if the device is held in a portrait orientation, android/b4a automatically selects the portrait variant. Same for the landscape orientation. Screen resolution (eg. 240 dpi) has nothing to do with it. If by "screen resolution" you mean width and height of the device's screen vs width and height prescribed in the layout variant, android selects whichever variant is most appropriate. If, for example, you had two portrait variants it would select the one that best fit the actual device. At least, that is my understanding.

Should scale be built into the spreadsheet: using a 1.5 scale device (I presume that the values on the spreadsheet are for a 1.0 scale device) should have the calculations multiplied by 1.5?

No. The spreadsheet is based on the ratio of available screen size to designer screen size. No adjustment for scale is needed. My phone is 480 x 854, Scale = 1.5, (240 dpi) and my tablet is 800 x 1232, Scale = 1.0, (160 dpi). Also, the tablet uses some screen for soft keys (eg. Home, Back) but on the phone the keys are separate from the screen. ProbCalc (and similarly scaled programs) display just fine on both devices.

What is the purpose of setting DesignerHeight & DesignerWidth in Activity_Create: are these names keywords (since I don't see any Dim statements for them)?

No purpose for these undeclared variables - they are vestigial items. I originally had a purpose in mind for them, but wound up not using them and haven't cleaned up the code.

johnaaronrose · Jul 27, 2012

Orientation change

dlfallen,
Thank you for your earlier replies. I've now got my app working on multiple screen resolutions. One thought I had is that the user might move the device resulting in an orientation change (e.g. from portrait to landscape). Looking at the documentation, I get the impression that this would result in an Activity_Pause event. Am I correct? Should ResizeViews etc be invoked from that event and how would one test that orientation change resulted in Activity_Pause. Or this a different way of handling this situation?

Multiple screens - one way to do it

Active Member

Attachments

Expert

Well-Known Member

Expert

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Active Member

Active Member

Well-Known Member

Well-Known Member

Active Member

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency