Android Question Resize content to any screen size/resolution

[adrianstanescu85]

Hello

I designed an app using Basic4Android and tested it on a 1280x800 px device. The graphical elements' sizes (and fonts) are all specified in pixels, so for instance each button has a certain specific AxB px size.

I'd like to ask if there is a quick solution so that another device - that has another resolution - for instance 480x800 px could automatically fit the first design to the new size/resolution, WITHOUT the need for implementing different GUIs/layouts according to specific screen sizes. I do have an awful lot of elements that would need re-doing without any solution like this...

Thank you!
Adrian

 

[ciprian]

I think it's better to use "dip" instead of "pixels", and you can use scripts into the designer , combined with "autoscale all" function.
Best regards.

Ciprian

 

[adrianstanescu85]

Thank you for the reply! How do I implement this "autoscale all" function?

 

[ciprian]

Look in here http://www.b4x.com/android/forum/threads/designer-scripts.17036/

 

[klaus]

You can also have look at chapter 8.10 AutoScale in the Beginner's Guide.

 

[adrianstanescu85]

I think I got the hang of it. I used the AutoScaleRate to resize everything and it works well!

I do have two questions:
1) How do I resize the Activity background image file?
2) How do I calculate the rate form device to device and set that calculus directly into the script, so that depeding on each device the rate would be adjusted accordingly?

Thank you!

 

[KMatle]

It's very easy. You have to position your views in a intelligent way (relative) so Autoscale all will scale everything correct.

Example (Designer Script):

    AutoScaleAll
 
    Label1.Top=10dip
    Label1.Left=0
    Label1.height=35dip
    Label1.Width= 150dip
    Label1.TextSize =15
     
    Label2.Top=Label1.Top+Label1.Height + 10dip
    Label2.Left=0
    Label2.height=35dip
    Label2.Width=150dip
    Label2.TextSize =15
 
    Label3.Top=Label2.Top+Label2.Height+10dip
    Label3.Left=0
    Label3.height=35dip
    Label3.Width=150dip
    Label3.TextSize =15
 
    Label4.Top=Label3.Top+Label3.Height+10dip
    Label4.Left=0
    Label4.height=35dip
    Label4.Width=150dip
    Label4.TextSize =15
 
    Label5.Top=Label4.Top+Label4.Height+10dip
    Label5.Left=0
    Label5.height=35dip
    Label5.Width=150dip
    Label5.TextSize =15

As you can see ONE view has a defined position. ALL the following views have relative positions to this ONE view. So Autoscale can handle it all.

Inside my APP code there is NO position/scaling at all

Play with it in the UI-Cloud. Even the textsizes are scaled

You can even use "IF... Then..." blocks in the script so you can check the x/y resolution to scale your image.

 

[klaus]

1) How do add the image ? You should set Gravity to Fill.

2) Normally you use ONE AutoScaleRate for all devices. You should use the value that fits best your needs.

You also may have a look at the Scale module.

 

[adrianstanescu85]

Since the first tablet that I used for the original design was 1280x800 px (1.6 aspect ratio), when I use AutoScaleRate for a device that has 800x480 px (1.66666 aspect ratio), a background image scales correctly by that ratio but leaves a tiny free edge on one side, since the aspect ratio is different. Is there a way to have a scaling on the horizontal and one on the vertical separately, or even so... just set the free edge on both sides? How do I check the resolution inside the designer script so that I can calculate that scale rate?

Thank you!!

 

[klaus]

@Klaus Matle
Your principle is OK.
But, in your example AutoScaleAll does nothing because you reset all the dimensions of the Views after the scaling.
In your example the Labels have the same dimensions on all screen sizes because they have fixed values.
I would suggest an improuvment of your code:

Width = 150dip
Height = 35dip

Label1.Top = 10dip
Label1.Left = 0
Label1.Height = Height
Label1.Width = Width
Label1.TextSize =15

Label2.Top = Label1.Bottom + 10dip
Label2.Left = 0
Label2.Height = Height
Label2.Width =Width
Label2.TextSize =15

Label3.Top = Label2.Bottom + 10dip
Label3.Left = 0
Label3.Height = Height
Label3.Width = Width
Label3.TextSize =15

If you have a lot of same values you could use variables, so if one time you want to change it you change it only once.
You have some more properties and methods in the DesignerSripts like Right, Bottom, SetLeftAndRight, SetTopAndBottom etc.

 

[klaus]

@adrianstanescu85
You shouldn't use AutoScale on layout variants other than the 'standard' layout (320 * 480 / 160) because the scaling equations are based on this layout.
You can do it with the Scale module where you can define reference layout different from the default layout.
There is no easy way to adjust the free edge.
You could use a Panel and set its Height and Width properties according to the image width and height and the set the Top and Left properties.