Android Tutorial Designer Scripts Tutorial

Background

One of the most common issues that Android developers face is the need to adopt the user interface to devices with different screen sizes.
As described in the visual designer tutorial, you can create multiple layout variants to match different screens.
However it is not feasible nor recommended to create many layout variants.

Basic4android v1.9 introduces a new tool named "designer scripts" that will help you fine tune your layout and easily adjust it to different screens and resolutions.

The idea is to combine the usefulness of the visual designer with the flexibility and power of programming code.

You can write a simple script to adjust the layout based on the dimensions of the current device and immediately see the results. No need to compile and install the full program each time.

You can also immediately see the results on the abstract designer. This allows you to test your layout on many different screen sizes.

How to

Every layout file can include script code. The script is written inside the visual designer under the new Designer Scripts tab:

SS-2012-03-20_12.55.44.png


Their are two types of scripts: the general script that will be applied to all variants, and a script specific to the current variant.

Once you press on the Run Script button (or F5), the script is executed and the connected device / emulator and abstract designer will show the updated layout.

The same thing happens when you run your compiled program. The (now compiled) script is executed after the layout is loaded.

The general script is first executed followed by the variant specific script.

The script language is very simple and is optimized for managing the layout.

Lets start with an example.

Example

In this example we will build the following layout:
SS-2012-03-20_13.08.05.png


btnLeft and btnRight should be located in the top corners.
btnDown should be located at the bottom and fill the entire width.
ListView1 should fill the entire available area.
ToggleButton1 should be located exactly in the center.

The first step is to add the views and position them with the visual designer (you do not need to be 100% accurate).
Now we will select the designer scripts tab and add the code.
Note that the views are locked when the designer scripts tab is selected.

The code in this case is:
B4X:
'All variants script
btnRight.Right = 100%x

btnDown.Bottom = 100%y
btnDown.Width = 100%x

EditText1.Width = 100%x
EditText1.Bottom = btnDown.Top - 5dip

ListView1.Width = 100%x
ListView1.SetTopAndBottom(btnLeft.Bottom, EditText1.Top)

ToggleButton1.HorizontalCenter = 50%x
ToggleButton1.VerticalCenter = 50%y

The result:

SS-2012-03-20_15.10.06.png


10'' tablet:
SS-2012-03-20_15.11.16.png


SS-2012-03-20_15.35.16.png


Reference

The following properties are supported:

- Left / Right / Top / Bottom / HorizontalCenter / VerticalCenter - Gets or sets the view's position. The view's width or height will not be changed.

- Width / Height - Gets or Sets the view's width or height.

- TextSize - Gets or sets the text size. You should not used 'dip' units with this value as it is already measured in physical units.

- Text - Gets or sets the view's text.
TextSize and Text properties are only available to views that show text.

- Image - Sets the image file (write-only). Only supported by ImageView.

- Visible - Gets or sets the view's visible property.

Methods:

- SetLeftAndRight (Left, Right) - Sets the view's left and right properties. This method changes the width of the view based on the two values.

- SetTopAndBottom (Top, Bottom) - Sets the view's top and bottom properties. This method changes the height of the view based on the two values.

Keywords:

- Min / Max - Same as the standard Min / Max keywords.
- AutoScale - Autoscales a view based on the device physical size.
Example:
B4X:
AutoScale(Button1)
- AutoScaleAll - Autoscales all layout views.
Example:
B4X:
AutoScaleAll
- AutoScaleRate - Sets the scaling rate, a value between 0 to 1. The default value is 0.3
Example:
B4X:
AutoScaleRate(0.2)

- ActivitySize - Returns the approximate activity size measured in inches.

- If ... Then condition blocks - Both single line and multiline statements are supported. The syntax is the same as the regular If blocks.

- Landscape (v3.20) - Returns True if the current orientation is landscape.
- Portrait (v3.20) - Returns True if the current orientation is portrait.

Notes and tips

- %x and %y values are relative to the view that loads the layout.
Usually it will be the activity. However it you use Panel.LoadLayout then it will be relative to this panel.
Note that ScrollView inner panel width is set to -1. This is a special value that causes the panel to fill its parent available size.
If you want to load a layout file (with a script) to the inner panel then you will need to first set the panel width: ScrollView.Panel.Width = ScrollView.Width.

- Use 'dip' units for all specified sizes (except of TextSize). By using 'dip' units the values will be scaled correctly on devices with higher or lower resolution.

- In most cases it is not recommended to create variants with scales other than 1.0. When you add such a variant you will be given an option to add a normalized variant instead with a scale of 1.0.

- Variables - You can use variables in the script. You do not need to declare the variables before using them (there is no Dim keyword in the script).

- Activity.RerunDesignerScript (LayoutFile As String, Width As Int, Height As Int) - In some cases it is desirable to run the script code again during the program. For example you may want to update the layout when the soft keyboard becomes visible. Activity.RerunDesignerScript method allows you to run the script again and specify the width and height that will represent 100%x and 100%y. In order for this method to work all the views referenced in the script must be declared in Sub Globals.
Note that this method should not be used to handle screen orientation changes. In that case the activity will be recreated and the script will run during the Activity.LoadLayout call.

It is recommended to continue to this tutorial: http://www.b4x.com/forum/basic4andr...ing-multiple-screens-tips-best-practices.html
 
Last edited:

Hubert Brandel

Active Member
Licensed User
Longtime User
I am happy with the good infos, and I will read it again, but my problem is a little bit different. I had to use small buttons and editcontrols to fit on the small smartphones (480x800), but many users now use 7" tabs because the screens are to small for many people. I did use DIP, but the DIP will not grow on bigger size tabs.
Thats why I have to upsize the controls and the fontsize.
I think I am on the right way now.
 
Last edited:

gjoisa

Active Member
Licensed User
Longtime User
Problem with list view

I successfully implemented designer script in my app ,and runs perfectly in all screen variants , except list view . In a tablet (800*1280) listview labels looking small . I tried to increase the height of list view , but no difference . is there any other method to do that ?
 

B4AJunkie

Member
Licensed User
Longtime User
Is there a possibility to start the variant specific script before the all variants script?

I have a panel on the left side. On big tablets the panel should take 90%x to be as big as possible. On smaller smartphones the panel should only 80%x to leave enough space for buttons on the right side.

I thought i could declare the panelwidth dependening in the variant specific design and then design the buttons with the all variants script depending on the panelwidth.

Or is there any other way?

PS: By the way. The possibility of an "if"-statement would be great in the script. This would give the possibility to give views a maximum size depending on the resolution of the device.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User

metrick

Active Member
Licensed User
Longtime User
The next version will include an AutoScale method which will make it simpler.
+1 Awesome.
 

jnbarban

Member
Licensed User
Longtime User
Hi everyone. i need help....
I have a big project B4A ( Approximately 60 activity and Layout)
this project is actually in version 1.80.
I have try to migrate in 2.20 in order to use "AutoScaleAll" function.
All my project is based on variant 600x1024 scale 1.5 (samsung Galaxy tab 1)
The problem :
When i uncomment "AutoScaleAll" on Designer Script, all views are scale ?
i supposed that "AutoscaleAll" did not change view's if the target device have the same variant as variant declarate on designer interface ?
example :
AutoScaleAll.jpg



May be i don't understand how work "AutoScaleAll" so, someone can learn me ? Thanks...
 
Last edited:

jnbarban

Member
Licensed User
Longtime User
Thanks Erel.
But...i try to make my interface with a variant "Standard" 320*480 scale=1 (on Abstract designer ) . Then, when i use "AutoScrollAll" on my device (detected 600*1024 scale=1.5)

My interface don't scale in totality of the screen :

AutoScaleAll2.jpg



:sign0013: but why the result is not that i expected ?
 

tiobred

New Member
Licensed User
Longtime User
Design

Boa tarde a todos,

Erel, eu sou desenvolvedor e comprei o B4, como sugestão, eu gostaria de solicitar se possível, uma ajuste no B4 no que se refere a design, eu e outros usuários que conheço acha um pouco difícil e custoso trabalhar com layouts para vários dispositivos escrevendo na mão grande. Estou esperando com muita ansiedade uma versão que eu não tenha que me preocupar com design, ou seja, eu vou desenhar a tela e o que eu desenhar, automaticamente vai se ajustar para qualquer dispositivo, essa é a minha vontade. Espero que um dia isso seja possível no B4.

Agradeço.

Abraços.
Anderson Azevedo.
 

Rusty

Well-Known Member
Licensed User
Longtime User
I have a project with many layouts and am trying to use the designer scripts.
I open my designer and then the scripts tab; none of my views show up on the designer.
I can add a new view and it shows up and I can execute scripts against it and they work, but my original views fail to show up.
What am I doing incorrectly?
Thanks,
Rusty
 

Rusty

Well-Known Member
Licensed User
Longtime User
Yes, I open the designer, open a layout, it appears just fine as currently designed. I click the Designer Scripts tab and the layout is then blank. I click the Main tab and the layout is the way it was originally.
If I add a new view, it will show in the designer when in script mode, but none of the other views will show.
Thanks,

Interestingly enough, this only occurs on one layout (.bal) file in the several I use in the project.
On some of the others some views show up, but others do not show. On other layouts, all views show...
 
Last edited:
Top