B4J Code Snippet [ABMaterial] - Responsive Design - Input Footer

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.

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

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