Dynamic Resizing of Views

[Bear2000]

Hi Guys

I have made an app that has in total 62 buttons, textboxes, imageviews, labels, etc which was written as Scale 1.0 on a 320*480 emulator

The app is running like it should however when I loaded it onto a Galaxy mini which has a smaller screen size than the Standard Screen size the app was too large for the screen

I then read the tut regarding resizing which seems to suggest that I will need to write code for each button etc in order for them to resize according to the screen size

I trialed the tut and resized the panels and although the panels did resize and the buttons etc appeared to move correctly the top of the panel docked half way down the activity

My question is:
a) am I right in thinking that I need resize each button etc

b) my app has 5 panels. Am I able to simply resize them (If so how)

c) is there another option

Thanks in advance

Bear

 

[mc73]

Though, resizing is ok programmatically, I usually create layout variants. But of course, this is mainly for layouts created using the designer.

 

[Bear2000]

I guess I dont quite understand that process

I know I can add a variant in the designer but that is all I understand

I have seen in the abstract designer under layout there is an option named match chosen variant and another named match connected device but what does that actually mean

 

[WAZUMBi]

I scale everything based on the screen dimensions.

So for example:

I create a scale based on which ever is smallest (width or height)
screenX = GetDeviceLayoutValues.Width
screenY = GetDeviceLayoutValues.Height

If my apps orientation is portrait then

scale = screenX / 32
If it's lanscape then
scale = screenY / 32


button.Width = 12 * scale
button.Height = 5 * scale

to center on the screen:
button.Left = (screenX - button.Width) / 2
button.Top = (screenY - button.Height) / 2

The only thing to account for is if the device has a soft menu in which case I subtract 50dip from the height before scaling

I don't know if this is the most efficient way of doing things (I'm sure Erel has better) but my layout appears the same regardless of the screen size or the device.

 

[Bear2000]

Thanks Wazumbi but not quite what im looking for

I was hoping to fill the screen regardless of screen size

I am guessing that mc73 solution would require me to make a layout for every layout size which also requires a lot of work in which case it would be a coin toss between designer layout and code layout

My question is

Is there an easier way?:sign0163:

 

[kanaida]

I use percentages myself. I tend to think of it like an excel sheet or html table. Layouts only seem to work for very simple screens from what i've tried myself. The designer can work as long as you don't need to scroll around i guess.

I determine what 100%x is by throwing it into a variable, then divide accordingly by how much width each item is. Height works similarly. If all buttons use the same columns (like square tiles) then it's pretty easy and you can use one set of variables. If the number of items in each grid row changes then you'll have to calculate them row by row to figure out the correct placement. They key though is not to use raw numbers, use percentages. In fact, if you do it in an html editor (set the table with to 100% before you start) you'll have the exact values needed

Here's a small sample mixing staticly sized objects with dynamically sized. (a combox anchored to left,top,right, and a button that never changes size.)
p1 is a panel
cContactList is a spinner/combobox
b1 is a button

p1.Initialize(40dip)
Activity.AddView(p1,0,0,100%x,100%y)

cContactList.Initialize("cContactList")
C.ContactListsToSpinner(cContactList)
p1.AddView(cContactList,0,0,100%x-40dip,40dip)

b1.Initialize("b1")
b1.SetBackgroundImage(LoadBitmap(File.DirAssets,"application_form_edit.png"))
p1.AddView(b1,100%x-40dip,4,32dip,32dip)

 

[Informatix]

I use percentages myself. I tend to think of it like an excel sheet or html table. Layouts only seem to work for very simple screens from what i've tried myself. The designer can work as long as you don't need to scroll around i guess.

The designer has a script engine and the scripts are made for positioning and resizing views.

 

[Erel]

Please see this tutorial: http://www.b4x.com/forum/basic4andr...ing-multiple-screens-tips-best-practices.html

 

[Bear2000]

Thanks for your help everyone

Erel I have been through all the tuts

I will revisit this one as you direct

I guess I was hoping that there would be a short cut ie resizing 5 panels rather than 60+ buttons etc

First app

Much to learn

Bear:sign0089:

 

[Erel]

You can iterate over all views and apply some manual scaling if you like.

For i = 0 To Panel1.NumberOfViews - 1
 Dim v As View
 v = Panel1.GetView(i)
 v.Width = v.Width * someScaleFactor
Next

 

[netsistemas]

Resize form

Creo que la solución ideal está en este post:

http://www.b4x.com/forum/basic4andr...-scripts-tutorial.html?utm_medium=application