This is always a challenge. A phone in portrait mode is nothing like a tablet or desktop in landscape...
Fortunately, we can adjust the appearance for phone or desktop. I don't worry about tablets since they automatically take the best from both (upper and lower) screen views.
Often, we use Flat buttons in footers (fixed or not) with Text to identify what they are. However, on a phone, the footer may extend two or more lines and confuse the user - since you have to scroll (way) down to expose the extra content in the footer. It seems this also degrades the performance of scrolling the whole page.
The code above added 4 floating buttons - and 4 (short) labels to fit in a footer on a phone - each in their own cell. Describes what buttons are... Works fine for me in this situation.
You will need to experiment on what works best for each of the 3 screen widths. You can also switch between flat and floating - depending on the device the ConnectPage sub determined you are using..
Fortunately, we can adjust the appearance for phone or desktop. I don't worry about tablets since they automatically take the best from both (upper and lower) screen views.
B4X:
inp.Footer.AddRowsM(1, True,0, 0, "").AddCellsOS(4, 0,0,0, 3,3,3, "")
Dim SaveBtn As ABMButton
SaveBtn.InitializeFloating(page, "SaveBtn", "mdi-toggle-check-box","green")
inp.Footer.Cell(1,1).AddComponent(SaveBtn)
Dim lbl1 As ABMLabel
lbl1.Initialize(page, "lbl1", "Save", ABM.SIZE_SPAN, False, "")
inp.Footer.Cell(1,1).AddComponent(lbl1)
Dim CancelBtn As ABMButton
CancelBtn.InitializeFloating(page, "CancelBtn", "mdi-navigation-cancel", "green")
inp.Footer.Cell(1,2).AddComponent(CancelBtn)
Dim lbl2 As ABMLabel
lbl2.Initialize(page, "lbl2", "Back", ABM.SIZE_SPAN, False, "")
inp.Footer.Cell(1,2).AddComponent(lbl2)
Dim AttBtn As ABMButton
AttBtn.InitializeFloating(page, "AttBtn", "mdi-image-camera-alt", "green")
inp.Footer.Cell(1,3).AddComponent(AttBtn)
Dim lbl3 As ABMLabel
lbl3.Initialize(page, "lbl3", "Pic", ABM.SIZE_SPAN, False, "")
inp.Footer.Cell(1,3).AddComponent(lbl3)
Dim NoteBtn As ABMButton
NoteBtn.InitializeFloating(page, "NoteBtn", "mdi-notification-event-note", "green")
inp.Footer.Cell(1,4).AddComponent(NoteBtn)
Dim lbl4 As ABMLabel
lbl4.Initialize(page, "lbl4", "Note", ABM.SIZE_SPAN, False, "")
inp.Footer.Cell(1,4).AddComponent(lbl4)
Often, we use Flat buttons in footers (fixed or not) with Text to identify what they are. However, on a phone, the footer may extend two or more lines and confuse the user - since you have to scroll (way) down to expose the extra content in the footer. It seems this also degrades the performance of scrolling the whole page.
The code above added 4 floating buttons - and 4 (short) labels to fit in a footer on a phone - each in their own cell. Describes what buttons are... Works fine for me in this situation.
You will need to experiment on what works best for each of the 3 screen widths. You can also switch between flat and floating - depending on the device the ConnectPage sub determined you are using..
B4X:
Public ScrnSize As Int = 0 ' set in ABMShared globals
Sub ConnectPage()
' Can only be called from ConnectPage since Page.Ready has not yet fired...
ABMShared.setScrnSize(page) ' set device screen size
.....
(end sub...)
Sub setScrnSize(pg As ABMPage) ' in ABMShared...
Dim ret As Int = 2 ' set initial as desktop
Try
Dim NowWH As String = ABM.GetBrowserWidthHeight( pg) ' returns a string "width;height"
If NowWH <> "" And NowWH <> ";" Then ' check if we got something useful back
Dim split() As String = Regex.Split(";", NowWH) ' split the string
Dim NewH As Int = split(0)
Log(" width in PX: "&NewH)
If NewH < 600 Then ret = 0 ' phone
If NewH > 600 And NewH <= 992 Then ret = 1 ' tablet landscape
If NewH > 992 Then ret = 2 ' desktop
End If
Catch
Log(" screen setting failed!")
End Try
Log(" screen width: " &ret)
ScrnSize = ret
End Sub