Android Question How to ensure that the GUI design setup for Mobiles envelop the complete screen space on big tablet

[beelze69]

Hi,

I have an application designed for an HTC mobile. In the layout I have placed controls with AutoScaleall narrative in the Designer.

Whereas, the gui seems to display Okay with many standard mobile devices , in my MIPAD tablet it just occupies 1/4th of the space.

How to ensure that the Layout will automatically adjust to the complete screenwidth irrespective of the device on which the application is run ?.

Sorry if I sound too basic.

Thanks

 

[asales]

Is better to use % to set the width, height and position of the view.
To fit in all width use:
<view>.width = 100%x

See this too:
https://www.b4x.com/android/forum/t...creens-tips-and-best-practices.17647/#content

 

[beelze69]

Hi,

I went through the tutorial and also the link wherein Erel has spoken about setting up the Designer Scripts based on variants.

I am sorry, but I did not quite understand the operation of the designer.

What am I supposed to do ?

i) I selected 2 variants:

a) 320 x 480 Scale 1 160dpi
b) 800 x 1280 Scale 1 (160dpi)

When I select them the RHS GUI shows display as per various sizes.

For example I have attached one layout file here..

As you can see I have used AutoScaleRate and also the %x %y etc. that are mentioned in the tutorial.

But still my layout does not display properly on my MIPAD tablet (the Webview control for example does not occupy the full screen)... It occupies only 1/4 of the tablet screen space..




i) What am I supposed to do ? Drag the controls to envelop the full screen for each variant that I have selected ?

ii) Will I get seperate .BAL files for each variant ?

iii) How will my application 'automatically detect' what is the TARGET Device size and appropriately load the appropriate LAYOUT file ?

I have a request

iv) Can somebody show me how to adjust the sample .BAL file that I have attached such that the display occupies the entire screen both on most PHONES and TABLETS (under both the Portrait and Landscape views)...

.



Ps. help ..

Thanks

 

[klaus]

Attached you find my test project.
I modified the layout only for the panelImpReportView.

You should use Anchors.
I removed the second layout variant.
You could use a different layout variant for landscape mode.

 

[BillMeyer]

@beelze69

Good Day,

I downloaded your file and took a look at it and I can see your frustration.
I suggest that you see this first: https://www.b4x.com/android/forum/threads/b4x-anchors-demonstrated.64112/#content

Now, all my screen designs contain 2 or 3 variants (if you design for iOS with B4i - iPad is mandatory now - New Apple Policy). My device is a Samsung S8plus. So my first variant is a screen size to suit that device. I do all my design layout on that screen so that I can see what it would look like on a physical device, and here is where the trick comes in....

All my designs make use of Anchors as explained in the link above that I included for you.

Once I am satisfied with my design, I then add a variant, let's say specifically for a tablet (800 x 1280) - in theory and if your design is good then you should see your screen adapt and fill the space. Having said that, when you run your app on a device that does not have your design resolution that device will look for the nearest fit and adapt to that size - but with anchors it now scales also.

I imported your .bal file and had a look at it (it's very complex) but I took some of your panels and configured them to use anchors, added a tablet variant and like magic all your items that I changed to use anchors magically transformed to fill the tablet screen size. I also removed your script from the scripts section and only left "AutoScaleAll"

Here is your original with some "Anchors" inserted - see only one variant

Now here is your same screen, with a tablet variant added without any other modification - looks different to your original design !! Note the grey colour around the arrows and the corresponding "white dots" on the screen design item.

Note it filled the screen "real estate" - BUT - all your scripts are gone in the script section (this is not a complete overhaul by the way)

and Finally, once you have created your "second" variant, you can adjust it with influencing your original variant.

It was very frustrating for me in the beginning as well, but once I mastered this - my design work has become so much easier and quicker.

Enjoy !!

 

[BillMeyer]

Attached you find my test project.
I modified the layout only for the panelImpReportView.

You should use Anchors.
I removed the second layout variant.
You could use a different layout variant for landscape mode.

As Klaus says !!

Thanks Klaus - you beat me to it !!

 

[beelze69]

As Klaus says !!

Thanks Klaus - you beat me to it !!

Hi BillMeyer,

Thanks a lot.

Can you share with me the modified file (you have given the screen shot but not the .BAL file)...

I still did not understand the variant part.

I mean, I tried to press F5 to 'generate the script for the variant but nothing happened !'.

Basically my thought process goes something like this:

The list of all possible device types are on the RHS panel.

I design the basic layout on my exsting device.

Then I select EACH OF THE DEVICE on the RHS, press an F5 and the 'variant specific script for that device is generated on the LHS PANEL'.

Once I have generated for all the possible (or rather available) configurations, I save the .BAL file and use it in my application.

My application should automatically detect the device dimensions and 'load the appropriate variants'.

I mean, I have not understood this thing properly as it is being used by the b4A developers in the b4A designer.


Can you please help me ...





2, member: 38943"]@beelze69

Good Day,

I downloaded your file and took a look at it and I can see your frustration.
I suggest that you see this first: https://www.b4x.com/android/forum/threads/b4x-anchors-demonstrated.64112/#content

Now, all my screen designs contain 2 or 3 variants (if you design for iOS with B4i - iPad is mandatory now - New Apple Policy). My device is a Samsung S8plus. So my first variant is a screen size to suit that device. I do all my design layout on that screen so that I can see what it would look like on a physical device, and here is where the trick comes in....

All my designs make use of Anchors as explained in the link above that I included for you.

Once I am satisfied with my design, I then add a variant, let's say specifically for a tablet (800 x 1280) - in theory and if your design is good then you should see your screen adapt and fill the space. Having said that, when you run your app on a device that does not have your design resolution that device will look for the nearest fit and adapt to that size - but with anchors it now scales also.

I imported your .bal file and had a look at it (it's very complex) but I took some of your panels and configured them to use anchors, added a tablet variant and like magic all your items that I changed to use anchors magically transformed to fill the tablet screen size. I also removed your script from the scripts section and only left "AutoScaleAll"

Here is your original with some "Anchors" inserted - see only one variant

View attachment 68937

Now here is your same screen, with a tablet variant added without any other modification - looks different to your original design !! Note the grey colour around the arrows and the corresponding "white dots" on the screen design item.

View attachment 68938

Note it filled the screen "real estate" - BUT - all your scripts are gone in the script section (this is not a complete overhaul by the way)

and Finally, once you have created your "second" variant, you can adjust it with influencing your original variant.

It was very frustrating for me in the beginning as well, but once I mastered this - my design work has become so much easier and quicker.

Enjoy !![/QUOTE]

 

[beelze69]

Dear Klaus,

Thanks for your help.

But I still remain unclear.

You have modified one Panel Layout and it looks nice on my Tablet now- both on
the portrait and landscape views, it is occupying the entire screen space and is
evenly spaced.

But I am trying to understand how you have done it.

Because, I have not understood certain concepts.

i) Now, the original .BAL file that I have posted was for 1 MODULE, I have inserted a Panel EACH for a 'Sub-menu' option under that MODULE and inserted my other controls over these Panels and depending on the user clicking the menu options, I make the panels visible/invisible.

My project is like this:

Main Project has 2 Modules

Module 1-> Layout File 1-> has many panels and each panel has many controls. I make the panels visible/invisible as required.

Module 2-> Layout File 2-> has many panels and each panel has many controls. I make the panels visible/invisible as required.

There is one main panel having one Tabstrip control that has 2 menu options for invoking
MODULE 1 and MODULE 2 and I load the Layout File 1 and Layout File 2
under each Menu option.

So my Panels are like Frames inside Forms (analogy to delphi/vb6) which I make visible/invisible.

So basically I load everything at the start of the activity.

Is it possible to do this in a better way ?

Actually, it is very cumbersome to design this type of layouts.

My first question:

Can I have ONE .BAL file for EACH Panel and depending on the sub-menu option that I have chosen, during run-time, load the specific .BAL file on the button-click event for invoking that sub-menu option ?

Firstly, I want to know if this is possible and if yes, how to write the code since here we load everything in the ACTIVITY at one time.

ii) Secondly, you have mentioned that I can create a Layout variant for the landscape
seperately.

I am sorry, but I am not understanding the concept of variants as it is being used by the b4A developers

Are you trying to say the following:

i) I should create one type of layout for 'Portrait' and

ii) One type of layout for 'Landscape' ?

If that is so, how do I load them dynamically at runtime depending on the orientation change ?

Now coming to the Designer,

I tried to press F5 to 'generate the script for the variant but nothing happened !'.

Basically my thought process goes something like this:

The list of all possible device types are on the RHS panel.

I design the basic layout for my existing device.

Then I select EACH OF THE DEVICE on the RHS, press an F5 and the 'variant specific script for that device is generated on the LHS PANEL'.

Once I have generated for all the possible (or rather available) configurations, I save the .BAL file and use it in my application.

My application should automatically detect the device dimensions and 'adjust itself automatically'.

I mean, I have not understood this thing properly as it is being used by the b4A developers in the b4A designer.


Can you please help me ...

 

[klaus]

Did you have a look at the B4X Booklets?
Especially B4X Visual Designer.
Allmost all your concerns are explained there.

You have modified one Panel Layout ...
But I am trying to understand how you have done it.

First, I set the horizontal and the vertical anchor of the panel to Both making it fill the screen.
Then, I set the vertical anchor of all the buttons to Bottom, to align them at the bottom of the screen.
Then I set both anchors of the Webview to Both, to make it fill the screen width and the space between the top of the screen and the top of the upper button.
Then I added code in Script General to 'fine tune' the horizontal positions of the views.

There are no 'rules' for all this. You can have one *.bal file for each panel and load them as needed or you can have the layouts for all panels in a same *.bal file.
This depends on the type of project and its size, and also your preferences.
In a big project, several *.bal files are easier to maintain rather than having everything in one layout.
You may have a look at this thread: Different examples with 2 layouts.

ii) Secondly, you have mentioned that I can create a Layout variant for the landscape
seperately.

You can create a portrait and a landscape layout variant in a same x.bal file. The operating system will automatically detect the orientation and use the relevant layout variant.
It can be interesting to have a different layout for portrait and landscape, look at chapter 2.9 Layout variants in the B4X VisualDesigner Booklet, you'll see what I mean.

I tried to press F5 to 'generate the script for the variant but nothing happened !'.

Pressing F5 will not generate any script for you, it will 'only' run your script.

It would be much easier to help you if you posted your test project as a zip file.
So we can see what exactly you have done and how.

 

[Erel]

Visual designer video tutorial: