A complete solution for dips, %x/%y variants etc. Anyone please?

[bluedude]

Hi,

I have been looking on the forum and there are snippets of solutions but not a real clear guideline that works for all (maybe i'm not smart enough)

First of all, do I need to use the combination of dip's, %x/%y and variants on one application?

Sometimes I see dips and sometimes %x, so what is it?

Erel's guidance for creating three variants is clear. But that said, do I need to ResizeViews then with all the %x/%y stuff for every variant? Here the link that explains that: http://www.b4x.com/forum/basic4andr...25-multiple-screens-one-way-do.html#post52178

And how about dip? How does that fit into above approach and do I still need to do that. And if I use for example 100 dip for the width of a button, for which variant is that 100 dip then? I cannot set dip in the designer so I need to do that through code.

I blame Google for this problem, they should have set some standards.

Cheers,

 

[bluedude]

Right, I missed that one! That could help solve my problem because then I can skip resizing stuff for the variants that I precisely configured.

 

[agraham]

I think Layoutvalues just shows the screen dimensions of your device

Instead of thinking why don't you read what I posted and also check the documentation.

Dim lv As LayoutValues
lv = Activity.LoadLayout("somelayout")

 

[Kevin]

I feel pretty stupid, cannot get my head around it. You say you create %x/%y values for each variant and each screen? But when I look at below code you don't seem to use all these values. You say in portrait mode Height < 700, so which values are you using then? The ones from the 320x480 variant or the 480x800 variant? I mean, the %x or %y differ for these is.

I missed part of this before. If the DIP < 700 then it will always be a phone. The 480x800 7" tablet variant is scale 1. You will not find a phone that is that large (not currently anyway). There are phones that are 480x800 scale 1.5, but as I showed in post 14(?), when you convert that to dip, it is less than 700 high.

This is one reason I used only two basic sizes, phone and 10" tablet. By getting the activity height in dip, there is no question which variant it is using. It is either phone or tablet. Adding more (custom) variants complicates this method.

 

[bluedude]

Thanks, I read all but there are not really good practical step by step guides. I don't want to use separate variant files for example, I use variants in one file.

And tested some routines but they don't deliver the exact result i'm looking for.

Cheers,

 

[bluedude]

What I mean is, if you create the x% and y% values like in the spreadsheet, for which variants do you do this? You indicated you use three: 320x480, 480x800 and 800x1200. So if you do <700 in code which calculated %x and %y do you use from the spreadsheet? The ones for 320x480 or the ones for 480x800? Two variants could mean different button positions for example, so different %x/%y.

BTW, i'm now using a check for which variant is used, as indicated by agraham. So if a variant exists I don't resize anything because I want to use exact that one. That always gives me freedom to do one special device.

 

[bluedude]

Just forget it, thanks for your help! I decided to see if I can solve it myself instead of asking stupid questions. I have checked out many forum topics but none shows a whole solution that works with say three variants (in one file) and resizing for non supported devices. Tried a few but not with the quality results I need. There are always gaps somewhere between buttons etc. Going to figure out a different solution that is going to work. If it works I will share it.

 

[timo]

What I mean is, if you create the x% and y% values like in the spreadsheet, for which variants do you do this? You indicated you use three: 320x480, 480x800 and 800x1200. So if you do <700 in code which calculated %x and %y do you use from the spreadsheet? The ones for 320x480 or the ones for 480x800? Two variants could mean different button positions for example, so different %x/%y.

BTW, i'm now using a check for which variant is used, as indicated by agraham. So if a variant exists I don't resize anything because I want to use exact that one. That always gives me freedom to do one special device.

When I use t a similar method, I only design one Layout 320x480 and base the calculations on it. Naturally the Views must be contained in the reference panel.
This is an example where I didn't think at all at tablets, but only at phones:
http://www.b4x.com/forum/test-my-app/13875-scorecard.html
(look at the picture Erel posted)

 

[bluedude]

Cool app.! Which calculations do you use in code? When I test it does not give me great results (many gaps) so I guess my calculations are not perfect.

Do you use %x/%y like the sample in the excel sheet?

 

[timo]

The spreadsheet is probably of another app, but the sense is that.
Now I'm trying to code the Excel Table directly in b4a without using it anymore, extracting the values from the designer sets (layout.bal is not accessible).

 

[timo]

I've forgotten: sometimes I only use 'Left', it depends on what you are doing.

 

[timo]

This is a piece of code of what I'm trying to develop at the moment to eliminate the spreadsheet. It's only a beginning....

Sub FitPnl(pnl As Panel)
pnl.Top=0 
pnl.Left=0
pnl.Width=100%x   
pnl.Height=100%y 
End Sub

Sub FitLbl(lbl As Label)
Dim percLeft,percTop,percWidth,percHeight As Float
percLeft=lbl.Left/pnlW
lbl.Left=pnlW*percLeft
percTop=lbl.Top/pnlH
lbl.Top=pnlH*percTop
percWidth=lbl.Width/pnlW
lbl.Width=pnlW*percWidth
percHeight=lbl.Height/pnlH
lbl.Height=pnlH*percHeight
End Sub

 

[timo]

This is an example to avoid the Excel spreadsheet passage.
It is very basic, just to see how it works.

I started from the designer an this is the code
(LblTest's Parent is pnlContainer)

'Activity module
Sub Process_Globals
   
End Sub

Sub Globals

   Dim lblTest As Label
   Dim pnlContainer As Panel
   
   'panel
   Dim pnlW,pnlH As Int 
   
   'label
   Dim percLeft,percTop,percWidth,percHeight As Float
      
   
End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.LoadLayout("main")

'panel dimensions from designer:
pnlW=pnlContainer.Width 
pnlH=pnlContainer.Height

CalcLbl(lblTest)'calculate the Label in % of the designed panel
FitPnl(pnlContainer)'new dimention of the panel to fit the device
AdaptLbl(lblTest)'new dimension of the Label according to the new panel's dimentions


End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub CalcLbl(lbl As Label)
'proportionally in % of the designed original panel

percLeft=lbl.Left/pnlW
percTop=lbl.Top/pnlH
percWidth=lbl.Width/pnlW
percHeight=lbl.Height/pnlH
   
End Sub

Sub FitPnl(pnl As Panel)
'fits panel to device

pnl.Top=0 
pnl.Left=0
pnl.Width=100%x   
pnl.Height=100%y 

End Sub

Sub AdaptLbl(lbl As Label)
'adapt the Label to the new dimention sof the panel

lbl.Left=pnlContainer.Width*percLeft
lbl.Top=pnlContainer.Height*percTop
lbl.Width=pnlContainer.Width*percWidth
lbl.Height=pnlContainer.Height*percHeight

End Sub

Here are the designed main.bal an the apk, for who doesn't want to write...
Try it, it will fit any device.

From this code you can add text management, some changes for more views and ratio control.

 

[rfresh]

I guess that's the problem, no universal rules

Do you know if you can check in code which variant the app. picked? I know we can check the device scale etc. but say for example I have three variants: 320x480, 480x800 and 800x1200 and I run this on my Galaxy Nexus. It would be nice to be able to check in code which variant it picks. I don't want to go into separate files per variant.

In above sample my Galaxy Nexus still picks 320x480.

Is it better to focus on different scales instead of resolution?

I use this code to know what the screen specs are and then I can code accordingly. Is that what you mean?

Sub Get_Screen_Resolution
   Main.pScreenWidth=GetDeviceLayoutValues.Width
   Main.pScreenHeight=GetDeviceLayoutValues.Height
   Main.pScale=GetDeviceLayoutValues.Scale
   If Main.pScale= 0.75 Then
   Main.pDPI="120"
   End If
   If Main.pScale= 1 Then
   Main.pDPI="160"
   End If
   If Main.pScale= 1.5 Then
   Main.pDPI="240"
   End If
   If Main.pScale=2 Then
   Main.pDPI="320"
   End If
End Sub

 

[agraham]

From the documentation

LoadLayout (Layout As String) As LayoutValues
Loads a layout file (.bal).
Returns the LayoutValues of the actual layout variant that was loaded.