Android Question Resize content to any screen size/resolution

ciprian

Active Member

Licensed User

Longtime User

• Nov 9, 2013

• #2

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

 

Upvote 0

adrianstanescu85

Active Member

Licensed User

Longtime User

• Nov 9, 2013

• #3

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

 

Upvote 0

ciprian

Active Member

Licensed User

Longtime User

• Nov 9, 2013

• #4

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

 

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Nov 9, 2013

• #5

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

 

Upvote 0

adrianstanescu85

Active Member

Licensed User

Longtime User

• Nov 9, 2013

• #6

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!

 

Upvote 0

KMatle

Expert

Licensed User

Longtime User

• Nov 9, 2013

• #7

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):

B4X:

    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.

 

Last edited: Nov 9, 2013

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Nov 9, 2013

• #8

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.

 

Upvote 0

adrianstanescu85

Active Member

Licensed User

Longtime User

• Nov 9, 2013

• #9

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!!

 

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Nov 9, 2013

• #10

@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

Click to expand...

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.

 

Upvote 0

klaus

Expert

Licensed User

Longtime User

• Nov 9, 2013

• #11

@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.

 

Upvote 0