B4A Library [B4X] [XUI] AS FloatingActionButton

Alexander Stolte

Expert
Licensed User
HeyHo,
this is a cross platform Floating Action Button.

This library is not free, because, it cost a lot of time and gray hair to create such views.
Donations from 5€ or 6$ are valid. (You can donate any amount you want :))
Please write FloatingActionButton in the order description, thanks.

Thanks for your understanding. :)
  1. Donate
  2. I will send you an e-mail with the code to decrypt the .zip file
  3. Done
Screenshot_20201218-113355.jpg
ezgif.com-crop.gif
temp.jpg
IMG_0575.jpg
IMG_0574.jpg
2021-02-02 20.13.08.jpg

Example of the icon rotation animation:
Sub ASFloatingActionButton1_ButtonClicked(open As Boolean)
    If open = True Then
        ASFloatingActionButton1.Base.GetView(1).SetRotationAnimated(250,135)
    Else
        ASFloatingActionButton1.Base.GetView(1).SetRotationAnimated(250,0)
    End If
End Sub
The orientation property is always based on the position of the view on your screen. That is, if you position the view at the bottom right, then use "BottomRight".
B4X:
ASFloatingActionButton1.Orientation = ASFloatingActionButton1.Orientation_BottomRight
The menu opens from bottom to top and the text is flush on the left.
Screenshot_20201218-113355.jpg
B4X:
ASFloatingActionButton1.Orientation = ASFloatingActionButton1.Orientation_TopLeft
The menu opens from top to bottom and the text is flush on the right
IMG_0575.jpg
Since 1.03 you can set FontAwesome and Material Icons to the view. Examples:
Set Main Button a Material Icon:
ASFloatingActionButton1.ButtonIconText.Font = xui.CreateMaterialIcons(24)'because the icon we want to display is an Material Icon
ASFloatingActionButton1.ButtonIconText.Text = Chr(0xE145)
Add Item Buttons with Font Icons:
ASFloatingActionButton1.ItemButtonProperties.IconText_Font = xui.CreateMaterialIcons(20)'because the next 2 item we want to add is a Material Icon
ASFloatingActionButton1.AddItem(Null,Chr(0xE859),"Test Text","")
ASFloatingActionButton1.AddItem(Null,Chr(0xE87D),"Test Text","")
 
ASFloatingActionButton1.ItemButtonProperties.BackgroundColor = xui.Color_ARGB(255,73, 98, 164)'the next item should be a blue button
ASFloatingActionButton1.ItemButtonProperties.IconText_Font = xui.CreateFontAwesome(20)'because the next item we want to add is a FontAwesome Icon
ASFloatingActionButton1.AddItem(Null,Chr(0xF179),"Test Text","")
ASFloatingActionButton
Author: Alexander Stolte
Version: 1.03

  • ASFloatingActionButton
    • Events:
      • ButtonClicked (open As Boolean)
      • ItemClicked (index As Int, Value As Object)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddItem (Icon As B4XBitmap, IconText As String, Text As String, Value As Object) As String
        Adds a child button to the menu
        Icon - the bitmap for this item.
        IconText - set FontAwesome or MaterialIcons - dont forget to set the right font
        Text - the text for this item. Put a "" if you dont want to show a text label
      • Class_Globals As String
      • CloseMenu As String
        closes the menu if the menu is open
      • CreateASFloatingButton_ItemButtonProperties (BackgroundColor As Int, IconText_Font As B4XFont, IconText_Color As Int) As ASFloatingButton_ItemButtonProperties
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
      • getBackground As B4XView
        gets the background panel
      • getBase As B4XView
        gets the mbase
      • getButton As B4XView
        gets the main button panel
      • getButtonIconText As B4XView
        gets the main button label for FontAwesome- or Material-Icons
      • getItemButtonProperties As ASFloatingButton_ItemButtonProperties
        gets or sets the Item Button Properties
        BackgroundColor - the background color of the child buttons
      • GetItemPanel (index As Int) As B4XView
        gets the main panel of a item
        <code>ASFloatingButton1.GetItemPanel(0).GetView(0) 'xpnl_item_button - the round button panel</code>
        <code>ASFloatingButton1.GetItemPanel(0).GetView(1) 'xiv_item - the icon</code>
        <code>ASFloatingButton1.GetItemPanel(0).GetView(2) 'xlbl_item_text - the text label</code>
      • getItemTextProperties As ASFloatingButton_ItemTextProperties
        gets or sets the Item Text Properties
      • getMainButtonBackgroundColor As Int
        gets or sets the background color of the main button
      • getOrientation As String
      • getOrientation_BottomLeft As String
        view is on bottom, the items opens to the top and the text is right
      • getOrientation_BottomRight As String
        view is on bottom, the items opens to the top and the text is left
      • getOrientation_TopLeft As String
        view is on top, the items opens to the bottom and the text is right
      • getOrientation_TopRight As String
        view is on top, the items opens to the bottom and the text is left
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • OpenMenu As String
        opens the menu if the menu is not open
      • RemoveAll As String
        removes all child items
      • RemoveAt (Index As Int) As String
        Removes a special child item
      • setButtonIcon (icon As B4XBitmap) As String
        sets the icon of the main button
      • setMainButtonBackgroundColor (clr As Int) As String
        gets or sets the background color of the main button
      • setOrientation (orient As String) As String
        gets or sets the orientation of the items if the menu is open
        <code>ASFloatingButton1.Orientation = ASFloatingButton1.Orientation_BottomRight</code>
    • Properties:
      • Background As B4XView [read only]
        gets the background panel
      • Base As B4XView [read only]
        gets the mbase
      • Button As B4XView [read only]
        gets the main button panel
      • ButtonIcon
        sets the icon of the main button
      • ButtonIconText As B4XView [read only]
        gets the main button label for FontAwesome- or Material-Icons
      • ItemButtonProperties As ASFloatingButton_ItemButtonProperties [read only]
        gets or sets the Item Button Properties
        BackgroundColor - the background color of the child buttons
      • ItemTextProperties As ASFloatingButton_ItemTextProperties [read only]
        gets or sets the Item Text Properties
      • MainButtonBackgroundColor As Int
        gets or sets the background color of the main button
      • Orientation As String
        gets or sets the orientation of the items if the menu is open
        <code>ASFloatingButton1.Orientation = ASFloatingButton1.Orientation_BottomRight</code>
      • Orientation_BottomLeft As String [read only]
        view is on bottom, the items opens to the top and the text is right
      • Orientation_BottomRight As String [read only]
        view is on bottom, the items opens to the top and the text is left
      • Orientation_TopLeft As String [read only]
        view is on top, the items opens to the bottom and the text is right
      • Orientation_TopRight As String [read only]
        view is on top, the items opens to the bottom and the text is left
  • ASFloatingButton_ItemButtonProperties
    • Fields:
      • BackgroundColor As Int
      • IconText_Color As Int
      • IconText_Font As B4XFont
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASFloatingButton_ItemTextProperties
    • Fields:
      • BackgroundColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextAlignment_Horizontal As String
      • TextAlignment_Vertical As String
      • TextColor As Int
      • TextFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFixes
    • AddItem - New Value Parameter
    • ItemClicked - New Value Parameter
    • Adds get and set Orientation and Designer Property
    • Adds Orientation enums
      • Orientation_BottomRight
      • Orientation_BottomLeft
      • Orientation_TopRight
      • Orientation_TopLeft
  • V1.02
    • ButtonClicked-Event-Value Open is now always True if no childs exists
    • Add RemoveAt - removes a special child item
    • Add RemoveAll - removes all child items
  • V1.03
    • Detailed Informations about the update, you find here
    • Adds ButtonIconText - gets the main button label for FontAwesome- or Material-Icons
    • Adds the following parameter to ItemButtonProperties
      • IconText_Font
      • IconText_Color
    • Adds new parameter IconText to AddItem - set FontAwesome or MaterialIcons - dont forget to set the right font
Have Fun :)
 

Attachments

Last edited:

LucaMs

Expert
Licensed User
Very nice.

This library is not free, because, it cost a lot of time and gray hair to create such views.
Do you mean that with the donations you will buy hair dye? 😁
 

Alexander Stolte

Expert
Licensed User
Hi. It is a very good library.
Thank you very mutch! :)

Versatile and easy to use.
I have tried to explain everything as well as possible.

I am currently working on an update which will fix a few bugs and add an important feature so that you can use the library on the left of the screen or at the top of the screen.
 

Alexander Stolte

Expert
Licensed User
Update
1.01

  • BugFixes
  • AddItem - New Value Parameter
  • ItemClicked - New Value Parameter
  • Adds get and set Orientation and Designer Property
  • Adds Orientation enums
    • Orientation_BottomRight
    • Orientation_BottomLeft
    • Orientation_TopRight
    • Orientation_TopLeft
You can now use the FAB on any orientation you want.
IMG_0574.jpg
IMG_0575.jpg
 

janderkan

Active Member
Licensed User
Thank you for this very nice lib.
I only use B4X libs, and yours add so much value to B4X.
Here in Denmark it is 50/50 on Android and IOS, so we must always create apps for both systems.
 

janderkan

Active Member
Licensed User
shot.jpg

With a white background I can see a border round the image, please help to get rid of it :)
You can change the borderwidth in the designer. :D:D
 
Last edited:

janderkan

Active Member
Licensed User
If I have only the Button item and no childs, then there is a little thing with events.

B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    ASFloatingActionButton1.ButtonIcon = ASFloatingActionButton1.FontToBitmap(Chr(0xf090),False,20,xui.Color_White)
End Sub

Private Sub ASFloatingActionButton1_ButtonClicked(open As Boolean)
    If open Then
        ASFloatingActionButton1.CloseMenu
    End If
End Sub
I would expect that the next time I click the button, then I would get the event with open=true, again, but I dont.
Jan
 
Last edited:

janderkan

Active Member
Licensed User
Do you still need a "RemoveAt" function?
Are you a psychic, I was thinking about how to remove an item but I am sure that I didnt ask the question here ??
But I found :
B4X:
ASFloatingActionButton.Background.RemoveAllViews
and that is enough for me, for now.
 
Last edited:

Alexander Stolte

Expert
Licensed User
Are you a psychic, I was thinking about how to remove an item but I am sure that I didnt ask the question here ??
I played with the idea myself, but currently I don't need it in my project, but maybe you do.

Update
  • V1.02
    • ButtonClicked-Event-Value Open is now always True if no childs exists
    • Add RemoveAt - removes a special child item
    • Add RemoveAll - removes all child items
 

janderkan

Active Member
Licensed User
I played with the idea myself, but currently I don't need it in my project, but maybe you do.

Update
  • V1.02
    • ButtonClicked-Event-Value Open is now always True if no childs exists
    • Add RemoveAt - removes a special child item
    • Add RemoveAll - removes all child items
Remember to update the zip in the first post. :)
 

angel_

Active Member
Licensed User
It looks very nice, how many items can you add?, If there are many you can do scroll in the list?
 

ggranata

Member
Hi, Thank you for this very nice lib.
I have little problem: When I use it in Activity with CustomListView, the FloatingActionButton is sent back.
To resolve my problem, I add this 2 lines:
B4X:
ASFloatingActionButton1.Base.BringToFront
ASFloatingActionButton1.Background.BringToFront
IMHO the FloatingActionButton must be always bringtofront.
 

Alexander Stolte

Expert
Licensed User
Top