B4J Library [ABMaterial]: MashButtons

Mashiane · Dec 10, 2017

Hi there

This post is about 1. MashDashboardButton (row 1), 2. MashPillButton (row 2) and 3. MashButtonGroup (rest)

You can also increase the margin between the button to expand the spaces between them. These is no external dependency for this as it was just some tweaking of css styles here and there.

Button Group Events

B4X:

Sub bg_click(value As Map)
    Dim valuex As String = value.GetDefault("value","")
    page.Msgbox("",valuex,"Button Group","OK",True,"","")
End Sub

You can then trap each button from the valuex value and process whatever is necessary.

In Class_Globals

B4X:

Public dbButton As MashDashboardButton
    Public dbButton1 As MashDashboardButton
    Public dbButton2 As MashDashboardButton
    Public dbButton3 As MashDashboardButton
    Public pillB1 As MashPillButton
    Public pillB2 As MashPillButton
    Public pillB3 As MashPillButton
    Public pillB4 As MashPillButton
    Public bg As MashButtonGroup
    Public bgv As MashButtonGroup
    Public bgc As MashButtonGroup
    Public bgf As MashButtonGroup
    Public bghc As MashButtonGroup
    Public bgcu As MashButtonGroup
    Public bgcl As MashButtonGroup
    Public bgcr As MashButtonGroup
    Public bgcd As MashButtonGroup
    Public bgvf As MashButtonGroup

In ConnectPage

B4X:

'dashboard buttons
    dbButton.Initialize(page,"dbButton",MashPlugIns.MaterialIcons.mdi_desktop_windows,"Windows",MashPlugIns.EnumThemes.danger)
    page.Cell(2,1).AddComponent(dbButton.ABMComp)
    dbButton1.Initialize(page,"dbButton1",MashPlugIns.MaterialIcons.mdi_3d_rotation,"Rotation",MashPlugIns.EnumThemes.info)
    page.Cell(2,1).AddComponent(dbButton1.ABMComp)
    dbButton2.Initialize(page,"dbButton2",MashPlugIns.MaterialIcons.mdi_access_alarms,"Warning",MashPlugIns.EnumThemes.Warn)
    page.Cell(2,1).AddComponent(dbButton2.ABMComp)
    
    'pill buttons
    pillB1.Initialize(page,"pillB1","ABMaterial 4.03",MashPlugIns.EnumThemes.danger)
    page.Cell(3,1).AddComponent(pillB1.ABMComp)
    pillB2.Initialize(page,"pillB2","Rotation",MashPlugIns.EnumThemes.info)
    page.Cell(3,1).AddComponent(pillB2.ABMComp)
    pillB3.Initialize(page,"pillB3","Warning",MashPlugIns.EnumThemes.Warn)
    page.Cell(3,1).AddComponent(pillB3.ABMComp)
    
    'normal button group
    bg.Initialize(page,"bg")
    bg.AddButton("btnLeftv","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bg.AddButton("btnMiddlev","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bg.AddButton("btnRightv","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(4,1).AddComponent(bg.ABMComp)
    
    'button group with floating buttons
    bgc.Initialize(page,"bgc")
    bgc.IsFloating = True
    bgc.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgc.AddButton("btnLeftc","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgc.AddButton("btnMiddlec","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgc.AddButton("btnRightc","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(5,1).AddComponent(bgc.ABMComp)
    
    'button group with half circle down
    bghc.Initialize(page,"bghc")
    bghc.HalfCircleDown = True
    bghc.ButtonSize = MashPlugIns.EnumButtonSize.large
    bghc.AddButton("btnLefthc","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bghc.AddButton("btnMiddlehc","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bghc.AddButton("btnRighthc","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(6,1).AddComponent(bghc.ABMComp)
    
    'button group with half circle up
    bgcu.Initialize(page,"bgcu")
    bgcu.HalfCircleUp = True
    bgcu.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgcu.AddButton("btnLefthcu","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgcu.AddButton("btnMiddlehcu","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgcu.AddButton("btnRighthcu","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(6,1).AddComponent(bgcu.ABMComp)
    
    'button group with half circle to left
    bgcl.Initialize(page,"bgcl")
    bgcl.HalfCircleLeft = True
    bgcl.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgcl.AddButton("btnLefthc","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgcl.AddButton("btnMiddlehc","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgcl.AddButton("btnRighthc","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(6,1).AddComponent(bgcl.ABMComp)
    
    'button group with half cirle to right
    bgcr.Initialize(page,"bgcr")
    bgcr.HalfCircleRight = True
    bgcr.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgcr.AddButton("btnLefthcr","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgcr.AddButton("btnMiddlehcr","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgcr.AddButton("btnRighthcr","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(6,1).AddComponent(bgcr.ABMComp)
    
    
    'vertical button group   
    bgv.Initialize(page,"bgv")
    bgv.IsVertical = True
    bgv.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgv.AddButton("btnLeftv","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgv.AddButton("btnMiddlev","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgv.AddButton("btnRightv","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(7,1).AddComponent(bgv.ABMComp)
    
    
    'vertical button group with floating buttons
    bgvf.Initialize(page,"bgvf")
    bgvf.IsVertical = True
    bgvf.IsFloating = True
    bgvf.ButtonSize = MashPlugIns.EnumButtonSize.large
    bgvf.AddButton("btnLeftv","Left",MashPlugIns.MaterialIcons.mdi_3d_rotation,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.danger)
    bgvf.AddButton("btnMiddlev","Middle",MashPlugIns.MaterialIcons.mdi_access_alarms,MashPlugIns.EnumIconPosition.IconRight,MashPlugIns.EnumThemes.info)
    bgvf.AddButton("btnRightv","Right",MashPlugIns.MaterialIcons.mdi_accessibility,MashPlugIns.EnumIconPosition.IconLeft,MashPlugIns.EnumThemes.Warn)
    page.Cell(7,1).AddComponent(bgvf.ABMComp)

Will be available soon as part of MashPlugIns