Wish Stretch views in designer to all screen size

[ilan]

hi,

there are lot of threads about this topic in this forum. i understand that it is not the best way just to stretch all your views in your app to all screen size. the proper way would be to use that space for more controls.

but sometimes (sometimes often ) it is needed.

i use a lot the designer to create the look of my apps and in some cases i would like to have the same look as i had it when i created the layout.

now you will think WHY?? if someone use a tablet he would just see big controls but not all my apps are targeting tablets. i create my app on a 5.1 (1920-1080) screen and i would like to have the same result also on a 4" screen or 3.5" ... the tablets are not interesting for me so i dont care if someone would use a 10" tablet and see everything stretched in.

i know that not all of you will agree with me but it would be very nice to have a possibility to choose between manual settings and a "STRETCH" option in the designer where all views are stretch with the same proportions on all screens. (like we do in libgdx)

so my wish STRETCH FUNCTION. PLEASSEEEE

 

[Erel]

If you do not want to deal with tablet layouts then add the views to a panel and put the panel in the center of the screen.
The result will not be worse than stretching the views (which is technically not so simple as you also need to stretch the font size, the ListView items height and so on).

Example:

When running on a tablet:

Once you learn to work with anchors, you will see that in most cases it is very simple to create a flexible layout, similar to how it is done on the desktop (with B4J or any other development tool).

 

[ilan]

Indeed the font size is a problem but for that i create a variable on activity create and all views textsize are changed or set with this variable.

delta = ((100%x + 100%y) / (320dip + 480dip) - 1)
...
label1.textsize = 14 + delta

in b4i i can stretch all views the way i want, i do it like this:

Private Sub Page1_Resize(Width As Int, Height As Int)

'////// Start resize all views to fit all screensize //////

    'start rexize all views
    Dim ratiox As Float = Width/320 'iphone 4 3.5" = x320
    Dim ratioy As Float = Height/460 'iphone 4 3.5" = y480 - 20 !

    For Each v As View In Page1.RootPanel.GetAllViewsRecursive
        If Not(v.Tag = "drm") Then 'drm = dont resize me...
            v.Width = v.Width*ratiox
            v.Height = v.Height*ratioy
            v.Left = v.Left*ratiox
            v.Top = v.Top*ratioy
        End If
    Next

'////// End resize all views ///////

End Sub

so i could use the same code to do it also in b4a and get the stretch effect i want, can i?

with (in activity_create):

Page1_Resize(100%x,100%y)

anyway thank you erel for your answer, if there will be such a function in the future that only scales the views (without text in it) i would be very happy

 

[Erel]

so i could use the same code to do it also in b4a and get the stretch effect i want, can i?

Yes.

 

[klaus]

Did you have a look at the AutoScale code module ?
It is explained in chapter 8.12.3 AutoScale more advanced examples in the B4A Beginner's Guide.

 

[ilan]

Did you have a look at the AutoScale code module ?
It is explained in chapter 8.12.3 AutoScale more advanced examples in the B4A Beginner's Guide.

Yes i have. But will take a look again

Anyway if i use libgdx i normaly create everything in code and not in designer. But all other simple apps that are normaly targeting only phones and not tablets i stretch my views in designer script with %. But i will try to use a simpler way by adding a sub on activity create that will do it like i do in b4i.

If i may ask 1 more question. What is the simplest way to scale the textsize?

Is the code i added above correct?

I have only used it in my latest app and dont have any smallscreen phones to test it.

 

[klaus]

For text size, I would use a scale factor according to the approximate screen size ratio.

 

[ilan]

For text size, I would use a scale factor according to the approximate screen size ratio.

Than you for your answer. Can you please show an example?

A button that is using textsize 16 on a 1080*1920 resolution will have a textsize ? On a 320*480 screen??

 

[Erel]

1080x1920 is meaningless without the scale. It can be larger or smaller than a 320x480 screen (which is also meaningless without the scale).

You can see the values with Log(GetDeviceLayoutValues).

 

[ilan]

1080x1920 is meaningless without the scale. It can be larger or smaller than a 320x480 screen (which is also meaningless without the scale).

You can see the values with Log(GetDeviceLayoutValues).

1080 x 1920, scale = 3.0 (480 dpi)

so how could i calculate the textsize for 320*480 scale 1

 

[klaus]

For what screen size did you define the layout ?
If it's a 10'' screen then
Dim TextScale As Float
TextScale = GetDeviceLayoutValues.DeviceApproximateScreenSize / 10
Label1.Font = Font.CreateNew(Label1.Font.Size * TextScale)
' or
Label1.Font = Font.CreateNew2(Label1.Font.Name, Label1.Font.Size * TextScale)

 

[sorex]

how bad is it to use something like this?

dim l as label
l.Initialize("")
l.Text="blahblah"
l.TextSize=15%y
mainactivity.AddView(l,0,0,100%x,18%y)

 

[ilan]

how bad is it to use something like this?

dim l as label
l.Initialize("")
l.Text="blahblah"
l.TextSize=15%y
mainactivity.AddView(l,0,0,100%x,18%y)

If you create your views in designer you need to calculate the textsize depends on the screensize you created your app and calculate the new size.

But all this is correct only if you use the same proportion (stretch views)

 

[sorex]

how do you test this that it is correct? do you have like 12 machines in genymotion width different resolutions ad scales?

 

[ilan]

I test it on real devices and also on genymotion.

 

[ilan]

Normaly 3 devices should be enough.

I create my apps on a galaxy s5 and i have a galaxy s1 and i test also on a small screen virtual device 3.5".

If i get the reult i want on those then all other devices should also be ok. Tablet for me is not very importent only for games. And normally i use libgdx for games and there the screen is stretched to all screen sizes.

 

[sorex]

@klaus , thanks for the hint on that getdevicelayoutvalues command.

I tried to run my stuff on an emulated Samsung S2 and while everything worked fine the fonts were like blown up.
Even when using drawtext which I hoped that it didn't follow the scaling stuff.

After reading in the scale value and use it on the textsize's it all displays fine.

The only 'issue' that I have is the kerning/padding of the text. the text ain't 100% centered vertically and leans to the top a bit.

Edit: I was able to tweak the padding via javaobject.

 

[sorex]

what a missery

today I open up another machine and there everything was placed wrong.

the cause was the *1dip you see below, when I remove it it's all fine.

 pnlMenu.AddView(l,-2dip,25%y+(12%y*x*1dip),100%x+4dip,10%y)

 

[LucaMs]

what a missery

today I open up another machine and there everything was placed wrong.

the cause was the *1dip you see below, when I remove it it's all fine.

 pnlMenu.AddView(l,-2dip,25%y+(12%y*x*1dip),100%x+4dip,10%y)

I decided: my apps will be... "Picasso style" (Pablo Picasso) so I will never have problems with layouts

 

[Erel]

the cause was the *1dip you see below, when I remove it it's all fine.

You should either use percentage units or dip units. Never both and never none.

The result of percentage is already "scaled".