Android Question My phone's Variants in Visual Designer

johnaaronrose

Active Member
Licensed User
Longtime User
Currently, I'm only interested in developing for Android. I'm converting old apps developed with B4A to B4XPages. I'm developing a new apps with B4XPages. All being done with B4A 11.20.
My phone's specification is 720 pixels wide by 1560 pixels height. It has 320 dpi i.e. scale=2.
I have therefore defined a Portrait Variant in Visual Designer as 720x1560 with Scale=2.0: however, Visual Designer objects to this saying that a scale of greater than 1.0 may lead to errors, also I've seen in the documentation (I forget where) that the recommendation is to have scale=1.0. Does this matter? If so, what should I define the Variant as? I have viewed the Visual Designer tutorial and found it confusing in this matter. Similarly, for the Visual Designer booklet.

In my new app, I have noticed that ToastMessageShow of a GetLayoutValues variable shows it as 0x0,scale=0, dpi=0 after loading the layout and even after waiting 10 seconds! Why is this?
B4X:
Root.LoadLayout("Main")
    Sleep(5000)
    Dim GetLayoutValues As LayoutValues
    ToastMessageShow(GetLayoutValues, True)
    Sleep(5000)
    ToastMessageShow("100%X=" & 100%X & ", 100%Y=" & 100%Y, True) 
    Sleep(5000)
    ToastMessageShow(GetLayoutValues, True)

However, ToastMessageShow of 100%X shows 720 but 100%Y shows 1394. I presume that the difference of 166 pixels in height (versus the 1560 of the phone's specification) is due to the top (title) bar and the bottom (3 Android 'buttons') bar, though I don't know how much vertical space each bar occupies (how do I find that out?). Should I therefore NOT put any Views in the vertical space occupied by these bars?

Looking at the Designer booklet, it recommends having a different Variant for each of Portrait & Landscape. But it doesn't say how to select the appropriate one at runtime. Could this be something like:
B4X:
If 100%X < 100%Y then
    Root.LoadLayout("MainPortrait")
Else
    Root.LoadLayout("MainLandscape")
End If
Years ago, I used to use the SetLayout command (now SeLayoutAnimated with first parameter=0 for a View coded as B4xView), in code after a layout was loaded, to set the position & size of Views by something like:
B4X:
LabelStep1.SetLayout(Round2(0%X, 0), Round2(53.0846%Y, 0), Round2(33.3333%X, 0), Round2(5.7389%Y, 0))
where the numbers before the before %X & %Y were calculated on a spreadsheet as a percentage of the various position & size parameters (i.e. Left, Width, Top, Height) of each View relative to the phone's width & height appropriately: that method was suggested by someone in a post about his ProbCalc B4A project. This is similar to the AutoScale function on page 87 of the Visual Designer booklet with the AutoScaleRate=1.0. The Visual Designer booklet refers to "The AutoScale function is based on the standard variant (320 x 480, scale = 1.0)." which seems like a phone that very few people would have nowadays.
 

Sagenut

Well-Known Member
Licensed User
Longtime User
Upvote 0

johnaaronrose

Active Member
Licensed User
Longtime User
Attached are screenshots of the main layout (loaded by B4XMainPage) on my phone (720x1560) & tablet (1280x800) The phone display is Ok but the tablet display has the I6 ImageViews and Labels above them as too small I hoped that their sizes would be increased as a result of having just 1 variant (320x480 phone). Does this mean that I have to have 2 variants: one for phones & one for tablets? If so, what code should I use for B4A to test whether the running Android device is a phone or tablet?
As a general point, how do developers write a n Android app which displays Ok on all phones & all tablets?
 

Attachments

  • PaintingCoursesPhoneScreenshot.jpg
    PaintingCoursesPhoneScreenshot.jpg
    268.1 KB · Views: 41
  • PaintingCoursesTabletScreenshot.jpg
    PaintingCoursesTabletScreenshot.jpg
    186 KB · Views: 37
  • PaintingCourses.zip
    121 KB · Views: 33
Upvote 0

klaus

Expert
Licensed User
Longtime User
Uncomment AutoScaleAll in the DesignerScript like:
B4X:
AutoScaleAll
PanelBoth.HorizontalCenter = 50%x

You can also play with the autoscale rate like:
B4X:
AutoScaleRate(0.6)
AutoScaleAll
PanelBoth.HorizontalCenter = 50%x
The default AutoScaleRate is AutoScaleRate(0.3).
 
Upvote 1

johnaaronrose

Active Member
Licensed User
Longtime User
Still having the Labels & ImageViews not being increased in size on my tablet. Is this due to Panel1 & Panel2 both having Horizontal Anchor as both even though their containing Panel (i.e. PanelBoth) has its Horizontal Anchor as left?
I've uncommented the AutoScaleAll as follows for the main layout:
B4X:
'All variants script
AutoScaleAll
PanelBoth.HorizontalCenter = 50%x
Should I have the same last line as above for Panel1 & Panel2?
 

Attachments

  • PaintingCourses.zip
    121 KB · Views: 32
Upvote 0

johnaaronrose

Active Member
Licensed User
Longtime User
Still having the Labels & ImageViews (in Panel1 & Panel2) not being increased in size on my tablet. Is this due to Panel1 & Panel2 both having Horizontal Anchor as both even though their containing Panel (i.e. PanelBoth) has its Horizontal Anchor as left?
I've uncommented the AutoScaleAll as follows for the main layout:
B4X:
'All variants script
AutoScaleAll
PanelBoth.HorizontalCenter = 50%x
Should I have the same last line as above for Panel1 & Panel2?
 

Attachments

  • PaintingCourses.zip
    121 KB · Views: 32
Upvote 0

klaus

Expert
Licensed User
Longtime User
They are increased but not as much as you expect.
Have you tried to add this line as suggested in post #23 ?
AutoScaleRate(0.6)
This sets the scale factor, for all Views. With 0.6 the text on top might be too big.
You can set the scale rate to 0.5 for a compromise.
If you really want to keep the text on top smaller and the images bigger you need to add code in the Designer Script.
 
Upvote 1

johnaaronrose

Active Member
Licensed User
Longtime User
Sorry about the delay in replying. This is due to my desktop running Ubuntu and my not being a Windows user for over 15 years. Initially, I tried to get B4A running under Wine but that failed after initially working. I've finally got B4A working as in a VirtualBox Windows 10 VM: it took me time to get B4A-Bridge working in conjunction with the VM.
I've now tried your idea of AutoScaleRate (0.5). It didn't improve things on the main layout. I've tried both PanelBoth Panel1 & Panel2 with anchor as left & both. That didn't help on my 800x1280 pixels tablet.
 

Attachments

  • PaintingCourses.zip
    121.1 KB · Views: 29
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
When you comment these two lines:
B4X:
PanelBoth.HorizontalCenter = 50%x
'Panel1.HorizontalCenter = 50%x
'Panel2.HorizontalCenter = 50%x
Does it look OK?
If it is not satisfactory for you, show a screenshot of the result.
Then you probably need to readjust the views in the Designer Script.
 
Upvote 1

johnaaronrose

Active Member
Licensed User
Longtime User
Sorry about the delay in replying. This is due to my desktop running Ubuntu and my not being a Windows user for over 15 years. Initially, I tried to get B4A running under Wine but that failed after initially working. I've finally got B4A working as in a VirtualBox Windows 10 VM: it took me time to get B4A-Bridge working in conjunction with the VM.
I've now tried your idea of AutoScaleRate (0.5). It didn't improve things on the main layout. I've tried both PanelBoth Panel1 & Panel2 with anchor as left & both. That didn't help on my 800x1280 pixels tablet.
Better but still not exactly what I want: the labels and imageviews are indented too much on both left & right.
I know it's off-topic but I've been trying to find out why my app's version 1 is on Google's Play Store at:
https://play.google.com/store/apps/details?id=me.myddns.rose.paintingcourses
but not findable by search using either Android's Play Store app or or Google Play Store's web site. Any ideas why that might be and how to 'correct' that problem?
 

Attachments

  • PaintingCourses.zip
    121.1 KB · Views: 29
  • PaintingCoursesTabletScreenshot.jpg
    PaintingCoursesTabletScreenshot.jpg
    311.3 KB · Views: 36
Upvote 0

klaus

Expert
Licensed User
Longtime User
Attached your project modified.
I removed the two Panels leaving only PanelBoth.
Be aware that the Gravity for ImageView declared as a B4XView is set to CENTER not to FILL like in the Designer.
I set the upper row to ImageView and left the second row As B4XView so you see the difference.
 

Attachments

  • PaintingCoursesNew.zip
    122.4 KB · Views: 35
Upvote 1
Top