B4A Class [B4X] [XUI] AS Popup Menu

This is a simple cross platform Popup Menu.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.

Left: B4J Right: B4A

[B4X] AS PopupMenu with icons

https://www.b4x.com/android/forum/threads/b4x-xui-as-popup-menu.121832/ Private Sub ShowMenu aspm_Main.Initialize(Root,Me,"aspm_Main") aspm_Main.MenuCornerRadius = 10dip aspm_Main.ItemLabelProperties.TextAlignment_Horizontal = aspm_Main.OrientationHorizontal_LEFT...

www.b4x.com

aspm_MoreOptions.Initialize(Root,Me,"aspm_MoreOptions")
 
aspm_MoreOptions.ItemLabelProperties.ItemBackgroundColor = xui.Color_ARGB(255,19, 20, 22) 'Change the Background Color of the item
aspm_MoreOptions.AddMenuItem("Share location",1)'Add item
aspm_MoreOptions.AddMenuItem("Settings",2)'Add item

aspm_MoreOptions.OrientationHorizontal = aspm_MoreOptions.OrientationHorizontal_RIGHT
aspm_MoreOptions.OrientationVertical = aspm_MoreOptions.OrientationVertical_BOTTOM
 
aspm_MoreOptions.ItemLabelProperties.BackgroundColor = xui.Color_ARGB(200,0,0,0)'black
 
aspm_MoreOptions.OpenMenu(xlbl_MoreOptions,150dip)

ASPopupMenu
Author: Alexander Stolte
Version: 1.08

• ASPM_ItemLabelProperties
  • Fields:
    • BackgroundColor As Int
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • ItemBackgroundColor As Int
    • LeftRightPadding As Float
    • TextAlignment_Horizontal As String
    • TextAlignment_Vertical As String
    • TextColor As Int
    • xFont As B4XFont
  • Functions:
    • Initialize
      Initializes the fields to their default value.
• ASPM_TitleLabelProperties
  • Fields:
    • BackgroundColor As Int
    • Height As Float
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • ItemBackgroundColor As Int
    • LeftRightPadding As Float
    • TextAlignment_Horizontal As String
    • TextAlignment_Vertical As String
    • TextColor As Int
    • xFont As B4XFont
  • Functions:
    • Initialize
      Initializes the fields to their default value.
• ASPopupMenu
  • Events:
    • ItemClicked (Index As Int, Tag As Object)
  • Fields:
    • AutoHideMs As Int
    • CloseDurationMs As Int
    • OpenDurationMs As Int
  • Functions:
    • AddMenuItem (text As String, tag As Object) As String
    • AddTitle (Text As String, height As Float) As String
    • Class_Globals As String
    • Clear As String
      clears the list
    • CloseMenu As String
    • CreateASPM_ItemLabelProperties (TextColor As Int, xFont As B4XFont, TextAlignment_Vertical As String, TextAlignment_Horizontal As String, BackgroundColor As Int, ItemBackgroundColor As Int, LeftRightPadding As Float) As ASPM_ItemLabelProperties
    • CreateASPM_TitleLabelProperties (TextColor As Int, xFont As B4XFont, TextAlignment_Vertical As String, TextAlignment_Horizontal As String, BackgroundColor As Int, ItemBackgroundColor As Int, LeftRightPadding As Float, Height As Float) As ASPM_TitleLabelProperties
    • getBase As B4XView
    • getisOpen As Boolean
      checks if the menu is open
    • getItemLabelProperties As ASPM_ItemLabelProperties
      change the label properties, call it before you add items
      <code>ASScrollingTags1.LabelProperties.xFont = xui.CreateDefaultBoldFont(15)</code>
    • GetMenuItemAt_Background (index As Int) As B4XView
      gets a menu item background (parent of label)
    • GetMenuItemAt_Label (index As Int) As B4XView
      gets a menu item label - the label with the text
    • getOrientationHorizontal_LEFT As String
    • getOrientationHorizontal_MIDDLE As String
    • getOrientationHorizontal_RIGHT As String
    • getOrientationVertical_BOTTOM As String
    • getOrientationVertical_TOP As String
      Vertical = Top,Bottom
      Horizontal = Left,Middle,Right
    • getSize As Int
      gets the list size
    • getTitleLabelProperties As ASPM_TitleLabelProperties
      change the label properties, call it before you add the title
      <code>ASScrollingTags1.TitleLabelProperties.xFont = xui.CreateDefaultBoldFont(20)</code>
    • Initialize (Parent As B4XView, CallBack As Object, EventName As String) As String
      Initializes the object. You can add parameters to this method if needed.
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • OpenMenu (view As B4XView, width As Float)
      Opens the menu on a view
    • OpenMenu2 (parent As B4XView, width As Float)
      Open the menu on center of parent/view
    • RemoveTitle As String
      Removes the title if exists
    • Resize (parent_width As Float, parent_height As Float) As String
    • setActivityHasActionBar (value As Boolean) As String
    • setCloseAfterItemClick (enabled As Boolean) As String
      closes the menu automatically after clicking on an item
      standard is True
    • setDividerColor (color As Int) As String
      the color of the dividers
    • setDividerEnabled (enable As Boolean) As String
      Adds or Removes the dividers
    • setDividerHeight (height As Float) As String
      the height of the dividers
    • setIsInSpecialContainer (value As Boolean) As String
      set it true if the target is on a listview or as a child on a panel where the left and top values differ from the form
    • setItemBackgroundColor (crl As Int) As String
      sets the item background color for all items
    • setMenuCornerRadius (radius As Int) As String
    • setOrientationHorizontal (orientation As String) As String
    • setOrientationVertical (orientation As String) As String
    • ViewScreenPosition (view As B4XView) As Int()
  • Properties:
    • ActivityHasActionBar
    • Base As B4XView [read only]
    • CloseAfterItemClick
      closes the menu automatically after clicking on an item
      standard is True
    • DividerColor
      the color of the dividers
    • DividerEnabled
      Adds or Removes the dividers
    • DividerHeight
      the height of the dividers
    • IsInSpecialContainer
      set it true if the target is on a listview or as a child on a panel where the left and top values differ from the form
    • isOpen As Boolean [read only]
      checks if the menu is open
    • ItemBackgroundColor
      sets the item background color for all items
    • ItemLabelProperties As ASPM_ItemLabelProperties [read only]
      change the label properties, call it before you add items
      <code>ASScrollingTags1.LabelProperties.xFont = xui.CreateDefaultBoldFont(15)</code>
    • MenuCornerRadius
    • OrientationHorizontal
    • OrientationHorizontal_LEFT As String [read only]
    • OrientationHorizontal_MIDDLE As String [read only]
    • OrientationHorizontal_RIGHT As String [read only]
    • OrientationVertical
    • OrientationVertical_BOTTOM As String [read only]
    • OrientationVertical_TOP As String [read only]
      Vertical = Top,Bottom
      Horizontal = Left,Middle,Right
    • Size As Int [read only]
      gets the list size
    • TitleLabelProperties As ASPM_TitleLabelProperties [read only]
      change the label properties, call it before you add the title
      <code>ASScrollingTags1.TitleLabelProperties.xFont = xui.CreateDefaultBoldFont(20)</code>

Changelog

• 1.00
  • Release
• 1.01
  • Adds background_color global variable - the background color of the parent view during the menu is open
  • Adds setItemBackgroundColor - change the items background color
  • Better Handling in "Nested Layouts"
  • Add ActivityHasActionBar - set to true if you have a ActionBar enabled
  • Add IsInSpecialContainer - set it true if the target is on a listview or as a child on a panel where the left and top values differ from the form
  • Add setOrientationVertical
  • Add setOrientationHorizontal
  • Adds "Enums" for Orientations -TOP,BOTTOM -LEFT,MIDDLE,RIGHT
• 1.02
  • Add OpenMenu2 - Opens the menu in center of the parent view
  • Add Clear - clear all
  • Add getBase - gets the base view to customize it
  • Add getLabelProperties - customize it if you want, before you add a new menu item
    • 
    • this is now possible
      • aspm_main.LabelProperties.ItemBackgroundColor = xui.Color_ARGB(255,Rnd(1,256), Rnd(1,256), Rnd(1,256))
  • Remove background_color and itembackground_color
    • Added to getLabelProperties
  • Add GetMenuItemAt_Label
  • Add GetMenuItemAt_Background
  • Add getSize
  • Add setMenuCornerRadius - sets the corner radius for the menu (works only in B4A and B4I)
    • 
• 1.03
  • Add LeftRightPadding to ASPM_LabelProperties - label padding to have more space left and right for example HorizontalCenter = LEFT
  • OpenMenu the background is now smoother on show
  • setMenuCornerRadius is now available on B4J (thanks @Erel)
• 1.04
  • getLabelProperties is renamed to getItemLabelProperties
  • Add AddTitle - you can now add a title to the menu
    • Add TitleLabelProperties - you can change the title properties with it
  • Add RemoveTitle - Removes the title if exists
  • Add AutoHideMs
  • Add DividerEnabled - you can now show dividers between the items
    • Add DividerHeight - the height of the dividers
    • Add DividerColor - the color of the dividers
• 1.05
  • OpenMenu Show Animation with the background is now animated
  • BugFixes
• 1.06
  • BugFixes
• 1.07
  • Add get isOpen - checks if the menu is open
  • BugFix - if you called OpenMenu several times without closing the menu, then the menu was added several times
  • Add set CloseAfterItemClick - closes the menu automatically after clicking on an item
    • standard is True
  • Add set and get CloseDurationMs - the duration it takes for the menu to be completely closed
  • Add set and get OpenDurationMs - the duration it takes for the menu to be fully visible
• 1.08
  • Intern Function IIF renamed to iif2
• 1.09
  • Add set MenuViewGap - sets the gap between the menu and the attached view
  • Add get TriangleProperties
  • Add set ShowTriangle - only visible if you open the menu with OpenMenu
    • Default: False
• 1.10
  • BugFix
• 1.11
  • Add OpenMenuAdvanced - You can set the Left, Top and Width value to show the menu on the parent
  • Add MenuHeight - gets the MenuHeight even if the menu is not yet visible
  • BugFixes
• 1.12 (read more)
  • Add get and set ClickColor
  • Add get and set BackgroundPanelColor
  • B4J Only - Hover Over Item with color
• 1.13 (read more)
  • Add AddMenuItemWithIcon
  • Add get IconProperties
  • Add get and set ItemHeight
• 1.14
  • Text can now be multiline
• 1.15
  • B4I Improvements - the entire screen is now used for the background shadow
    • When the navigation bar was hidden, there was an area at the top that did not go dark when the menu was opened
    • The height of the area is now determined and the gap closed
    • B4XPages is now required in B4I
• 1.16
  • BugFix If the icon horizontal alignment is set to center and there is no text, the icon is now displayed in the center
• 1.17
  • BugFix on CloseMenu thanks to @Mike1970

Have Fun

 

[mcqueccu]

Nice one. Your Libraries are always great

 

[Xfood]

Nice, could you add the background color, the text color, and an image? would be great

 

[Alexander Stolte]

Update

• 1.01
  • Adds background_color global variable - the background color of the parent view during the menu is open
  • Adds setItemBackgroundColor - change the items background color
  • Better Handling in "Nested Layouts"
  • Add ActivityHasActionBar - set to true if you have a ActionBar enabled
  • Add IsInSpecialContainer - set it true if the target is on a listview or as a child on a panel where the left and top values differ from the form
  • Add setOrientationVertical
  • Add setOrientationHorizontal
  • Adds "Enums" for Orientations -TOP,BOTTOM -LEFT,MIDDLE,RIGHT

"Nested Layouts" are a challenging task... ?

 

[Alexander Stolte]

Update

• 1.02
  • Add OpenMenu2 - Opens the menu in center of the parent view
  • Add Clear - clear all
  • Add getBase - gets the base view to customize it
  • Add getLabelProperties - customize it if you want, before you add a new menu item
    • 
    • this is now possible
      • aspm_main.LabelProperties.ItemBackgroundColor = xui.Color_ARGB(255,Rnd(1,256), Rnd(1,256), Rnd(1,256))
  • Remove background_color and itembackground_color
    • Added to getLabelProperties
    • Add GetMenuItemAt_Label
    • Add GetMenuItemAt_Background
    • Add getSize
  • Add setMenuCornerRadius - sets the corner radius for the menu (works only in B4A and B4I)
    • 
      
      

 

[Erel]

Add setMenuCornerRadius - sets the corner radius for the menu (works only in B4A and B4I)

This is the relevant code from B4XImageView:

#if B4J
    Dim jo As JavaObject = mBase
    Dim shape As JavaObject
    If mRound Then
        Dim radius As Double = Min(mBase.Width / 2, mBase.Height / 2)
        Dim cx As Double = mBase.Width / 2
        Dim cy As Double = mBase.Height / 2
        shape.InitializeNewInstance("javafx.scene.shape.Circle", Array(cx, cy, radius))
    Else
        Dim cx As Double = mBase.Width
        Dim cy As Double = mBase.Height
        shape.InitializeNewInstance("javafx.scene.shape.Rectangle", Array(cx, cy))
        If mCornersRadius > 0 Then
            Dim d As Double = mCornersRadius
            shape.RunMethod("setArcHeight", Array(d))
            shape.RunMethod("setArcWidth", Array(d))
        End If
    End If
    jo.RunMethod("setClip", Array(shape))
#else if B4A

 

[Alexander Stolte]

This is the relevant code from B4XImageView:

Thanks @Erel

Update

• 1.03
  • Add LeftRightPadding to ASPM_LabelProperties - label padding to have more space left and right for example HorizontalCenter = LEFT
  • OpenMenu the background is now smoother on show
  • setMenuCornerRadius is now available on B4J (thanks @Erel)

 

[angel_]

Is it possible to include symbols with Material Icons or FontAwesome?

 

[Alexander Stolte]

Is it possible to include symbols with Material Icons or FontAwesome?

sure, but the result is not so good:

    For i = 0 To 4 -1
        aspm_main.LabelProperties.ItemBackgroundColor = xui.Color_ARGB(255,Rnd(1,256), Rnd(1,256), Rnd(1,256))
        aspm_main.LabelProperties.xFont = xui.CreateMaterialIcons(15)
        aspm_main.AddMenuItem(Chr(0xE859) &  " Test_" & (i +1),"item_" & i)
    Next

 

[Alexander Stolte]

Is it possible to include symbols with Material Icons or FontAwesome?

I will create an "Advanced" version of the view, which will support scrolling (xcustomlistview) and custom layouts. But the version here, should be as simple as possible.

 

[Erel]

Does it support CSBuilder? It shouldn't be complicated to combine fonts and icons.

 

[Alexander Stolte]

Does it support CSBuilder?

Yes, but only on B4A and B4I.

    For i = 0 To 4 -1
        aspm_main.LabelProperties.ItemBackgroundColor = xui.Color_ARGB(255,Rnd(1,256), Rnd(1,256), Rnd(1,256))
        Dim cs As CSBuilder
        'aspm_main.AddMenuItem(Chr(0xE859) &  " Test_" & (i +1),"item_" & i)
        aspm_main.AddMenuItem("","item_" & i)
        aspm_main.GetMenuItemAt_Label(i).Text = cs.Initialize.Typeface(Typeface.MATERIALICONS).Append(Chr(0xE859)).Typeface(Typeface.DEFAULT).Append(" Test_" & (i +1)).PopAll
    Next

 

[Erel]

With CSBuilder you can fix the vertical offset.

The other option, which is probably not worth adding in this case, is to use BBLabel (BCTextEngine).

 

[Andrew (Digitwell)]

With CSBuilder you can fix the vertical offset.

Hi, how do you do this as I have the same problem and resorted to 2 labels!

 

[Andrew (Digitwell)]

Found it.

'Note that we vertically align the material icon character.
cs.Initialize.Append("Text with MaterialIcons: ").Typeface(Typeface.MATERIALICONS).VerticalAlign(5dip).Append(Chr(0xE531)).PopAll

 

[Alexander Stolte]

Update
1.04

• getLabelProperties is renamed to getItemLabelProperties
• Add AddTitle - you can now add a title to the menu
  • Add TitleLabelProperties - you can change the title properties with it
• Add RemoveTitle - Removes the title if exists
• Add AutoHideMs
• Add DividerEnabled - you can now show dividers between the items
  • Add DividerHeight - the height of the dividers
  • Add DividerColor - the color of the dividers

The update in one picture:

Examples:

aspm_main.DividerEnabled = True
aspm_main.DividerHeight = 2dip
aspm_main.DividerColor = xui.Color_White

aspm_main.AddTitle("Title",60dip)

 

[Alexander Stolte]

Important Update!
1.05

• OpenMenu Show Animation with the background is now animated
• BugFixes

 

[Rubsanpe]

Hi. I am trying to change the background color of the title with no luck so far.

aspm_main.TitleLabelProperties.BackgroundColor = xui.color_White
aspm_main.AddTitle("Title",60dip)

But the background color is still black. It doesn't matter what color I put on it.

Rubén

 

[Alexander Stolte]

Update
1.06

• BugFixes

But the background color is still black. It doesn't matter what color I put on it.

fixed in 1.06

 

[Rubsanpe]

Thank you. Background is changed, but a black border continues to surround it.

Solved assigning color to ItemBackgroundColor

aspm_main.TitleLabelProperties.BackgroundColor = xui.Color_Gray
aspm_main.TitleLabelProperties.ItemBackgroundColor = xui.Color_Gray
aspm_main.AddTitle("Title",60dip)

Rubén