Android Tutorial Supporting multiple screens - tips and best practices

Status
Not open for further replies.

Erel

Administrator
Staff member
Licensed User
This cannot be done automatically with the designer script. You will need to do it with code (with the help of Canvas.MeasureStringWidth).
 

salmander

Active Member
Licensed User
Thanks Erel. Here is my scenario, my app works fine on my phone, but when I installed my app on a low resolution device the views are properly aligned but the text in it is only appearing partially, which makes sense, as the screen dpi and resolution is small. So I am trying to resize the text-size based on the view height and width.
Can you please provide a sample code?
 

Erel

Administrator
Staff member
Licensed User
A better solution will be to maintain the same physical views size (or slightly decrease it). You can use the scale value that is described in the first post.

If you want help with finding the required font size by code then please start a new thread.
 

CarlM

Member
Licensed User
Variant Specific Scripts

Hi Erel,

I am just getting to grips with the designer scripts which I find very useful, saves a lot of work!

But I was wondering if there is a specific use for the 'Variant Specific' scripts as I cant seem to see examples of it in use in either of the tutorials?

Thanks.
 

Erel

Administrator
Staff member
Licensed User
The purpose of the "scaling" method described in the first post is to make it easier to cover all layouts with the generic script.

However in some cases you may need to add a variant, the standard landscape phone for example. The variant specific script lets you add code that will only be executed for this specific variant.

From my experience you should try to avoid adding more variants. Adding many variants will make it difficult to maintain and update the app.
 

CarlM

Member
Licensed User
OK thanks.
I must be getting layouts and variants confused. So I only need to add a Variant (of a layout) if for example I want to resize/add/change/hide controls when changing to a landscape view - in which case the 'specific variant' script overrides the generic one?
Thanks Erel.
 

Erel

Administrator
Staff member
Licensed User
if for example I want to resize/add/change/hide controls when changing to a landscape view
Yes. Though in some cases you can take care of all the different screen sizes in the general script.

The specific variant code runs after the general script.
 

moster67

Expert
Licensed User
Erel,

when we add views in the code, they are not available for the Designerscript since those views were/are not part of the original layout (I guess).

If I still want these added views to be considered by the Designerscript, I think I may perhaps use a panel as some kind of place-holder and then add my views to these panels. I haven't tried but I think it should work.

Alternatively, technically speaking, would it be possible to let us insert in the DesignerScript some "virtual/unassigned" views, then set the properties for instance "unassigned.button5.left=90%x". Then in the code, after adding the view, we assign the added view to the "unassigned" view and finally we run "RerunDesignerScript".

PseudoCode:

B4X:
sub Globals
        dim myCodeAddedButton as Button
end sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("1")

   myCodeAddedButton.Initialize("myCodeAddedButton")
   Activity.AddView(myCodeAddedButton,0,80dip,300dip,100dip) 'in this case the position is not really important
   unassigned.button5=myCodeAddedButton
   Activity.RerunDesignerScript("1",100%x,100%y)   
   
End Sub
Would it be feasible? :)


One last thing, already suggested, it would be nice if we could double-click on a view (or a group of selected vievs) in the abstract-designer so the line(s) were added automatically into the script.
 

corwin42

Expert
Licensed User
I think what you want to do is possible now with the magic size "-1" which means MATCH_PARENT or FILL_PARENT.

Just add a placeholder panel to your design. In the code you create your additional view and then add it to the placeholderpanel with:

B4X:
placeholderpanel.AddView(ManuallyAddedView, 0, 0, -1, -1)
If you then rerun the designerscript and the dimensions of your placeholder panel changes the manually added view will change its size, too.

I don't think that your approach with the unassigned views will give you any advantage.

The only feature that I'm missing currently in the designer scripts is the possibility to use something like process global variables in the scripts so you can calculate some scaling factors outside from the script and pass them to the script.
 

moster67

Expert
Licensed User
Yes, that would probably work, especially together with the magic size -1 you mentioned. This was more or less the first scenario I mentioned in my post.

However, I don't see if we use a panel how we can inherit all properties of the view we want to add to the panel. If I add by code for instance a button to a placeholder-panel, I can't set or modify the text-size of the button in the designer-script. If the "unassigned" view in my hypothesis scenario would be of the same type as the view to add, maybe we can also get all the related properties such as the text-size.

This means we can use this "unassigned" view in the scaling formulas proposed by Erel for adapting text-size on a tablet like:

B4X:
delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.2 'value between 0 to 1. 
scale = 1 + rate * delta

unassigned.button5.TextSize = unassigned.button5.TextSize * scale
I don't think that would be possible by using a panel as a place-holder.

In either way, the panel-approach should work but an approach with unassigned views would be even better, I think. Of course, this might not even be technically possible.
 

corwin42

Expert
Licensed User
I see no advantage of adding a view by code when it is available in the designer. All views that are available in the designer I add there. Only views not available in the designer (AHDashboard, AHActionBar, AHViewpager etc.) should be added outside and for them I use a placeholder panel.
 

moster67

Expert
Licensed User
I see no advantage of adding a view by code when it is available in the designer. All views that are available in the designer I add there. Only views not available in the designer (AHDashboard, AHActionBar, AHViewpager etc.) should be added outside and for them I use a placeholder panel.
I agree with you that most stuff can be handled the way you suggested, especially using a panel. The placeholder-approach was something I started to think about this morning and then I just wrote down my ideas how it could be enhanced further:)
 

MiniDemonic

Member
Licensed User
I see no advantage of adding a view by code when it is available in the designer. All views that are available in the designer I add there. Only views not available in the designer (AHDashboard, AHActionBar, AHViewpager etc.) should be added outside and for them I use a placeholder panel.
How can you not see an advantage of adding views by code?
Adding views during runtime, like making a custom listview using scrollview and labels, adding multiple views like 10 labels and more, this is stuff I c/wouldn't do by hand.

Yes, that would probably work, especially together with the magic size -1 you mentioned. This was more or less the first scenario I mentioned in my post.

However, I don't see if we use a panel how we can inherit all properties of the view we want to add to the panel. If I add by code for instance a button to a placeholder-panel, I can't set or modify the text-size of the button in the designer-script. If the "unassigned" view in my hypothesis scenario would be of the same type as the view to add, maybe we can also get all the related properties such as the text-size.

This means we can use this "unassigned" view in the scaling formulas proposed by Erel for adapting text-size on a tablet like:

B4X:
delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.2 'value between 0 to 1. 
scale = 1 + rate * delta

unassigned.button5.TextSize = unassigned.button5.TextSize * scale
I don't think that would be possible by using a panel as a place-holder.

In either way, the panel-approach should work but an approach with unassigned views would be even better, I think. Of course, this might not even be technically possible.
As for adding placeholder panels just to inherit the size, why?

for example:
B4X:
delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.2 'value between 0 to 1. 
scale = 1 + rate * delta

button5.TextSize = button5.TextSize * scale
Works when adding views by code, you don't need to set their size inside the designer script, you can still set the size when adding the views.
If you know how to size the placeholder panel you know how to size your button.
 

Hubert Brandel

Active Member
Licensed User
it would be nice to have a IF ... THEN ... END IF in the script mode.
I want to scale the buttons and textcontrols up to a max size and
the rest only the listboxes.
 

Paulsche

Well-Known Member
Licensed User
B4X:
delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
rate = 0.2 'value between 0 to 1. 
scale = 1 + rate * delta
I am very happy.
I have my app (18 layouts) with Designer Script
revised, with small adjustments, it works perfectly.
Previously had six layout variants, then only one.
 

Zeev Goldstein

Active Member
Licensed User
hi
i am trying to use autoscale but it is not recognized
should i import or link any code or lib ?
i get it in red
 

Zeev Goldstein

Active Member
Licensed User
ok - got it but it does not work
for wide screen it seems ok
but what about a screen height - i have a short physical screen and the bottom of my panel is hidden now
 

Erel

Administrator
Staff member
Licensed User
AutoScaleAll changes the size of the views based on the screen size.

It is only the first step in the UI management process.
 
Status
Not open for further replies.
Top