B4A Library [B4X] [XUI] AS FloatingActionButton [Payware]

Alexander Stolte · Dec 18, 2020

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.

AS FloatingActionButton

A cross platform Floating Action Button.

payhip.com

Thanks for your understanding.

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.

B4X:

ASFloatingActionButton1.Orientation = ASFloatingActionButton1.Orientation_TopLeft

The menu opens from top to bottom and the text is flush on the right

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

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
    
    FontAwesome To Bitmap
    
    Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
    
    www.b4x.com
  - 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
1.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
1.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
1.04
- Add Event ItemTextClicked - triggers if you click on a text item
1.05
- Intern Function IIF renamed to iif2
1.06
- B4J BugFixes
1.07
- Add get isOpen
- Add Event Open - is triggered when the button is opened
- Add Event Closed - is triggered when the button is collasped again
- BugFix
1.08
- 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

Have Fun

AS FloatingActionButton

A cross platform Floating Action Button.

payhip.com

Erel · Jan 26, 2021

Do you want to put the list before the button? Best to hide the button.

You can also change the panel's elevation to 2 or more (in the designer).

Alexander Stolte · Jan 26, 2021

ggranata said:
I set BringToFront on FloatingActionButton but it is ignored.

can you reproduce it? i also use the button together with a listview, without problems

ggranata · Jan 27, 2021

Alexander Stolte said:
can you reproduce it? i also use the button together with a listview, without problems

Sorry I can not reproduce it in a new project. I did some mistakes in the code. Thanks

Alexander Stolte · Feb 6, 2021

Update
V1.03

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

Breaking Change: AddItem have now a new paramter "IcontText"
Breaking Change: The Event "ItemClicked" has a new parameter, change the event to this "ItemClicked(index as int,Value as Object)"

You can now customize each item before you add it. Example:
Adds a new item with blue background and Font Awesome Icon

B4X:

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","")

You can now set FontAwesome- or Material-Icons, instead of images.
Example:

B4X:

ASFloatingActionButton1.AddItem(Null,Chr(0xE859),"Test Text","")'set the image parameter to Null

Rubsanpe · Feb 6, 2021

Hi, great update. I have tried the new example and I get the following error:

*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
Call B4XPages.GetManager.LogEvents = True to enable logging B4XPages events.
** Activity (main) Resume **
ASFloatingActionButton1_ButtonClicked: true
Error occurred on line: 0 (ASFloatingActionButton)
java.lang.Exception: Sub asfloatingactionbutton1_itemclicked signature does not match expected signature.
public static anywheresoftware.b4a.pc.RemoteObject com.stoltex.floatingbutton.b4xmainpage_subs_0._asfloatingactionbutton1_itemclicked(anywheresoftware.b4a.pc.RemoteObject,anywheresoftware.b4a.pc.RemoteObject) throws java.lang.Exception
class anywheresoftware.b4a.pc.RemoteObject, class anywheresoftware.b4a.pc.RemoteObject, class java.lang.String,

The new signature is Private Sub EventName_ItemClicked(index as int,Value as Object)

If i change it then it works.

Rubén

Alexander Stolte · Feb 6, 2021

Oh sorry, I have not considered this dependence.
The Event "ItemClicked" has a new parameter.
change the event to this:
_ItemClicked(index as int,Value as Object)

Rubsanpe · Feb 6, 2021

Hi. I change it, i only want warn you.

Rubén

Alexander Stolte · Feb 6, 2021

Rubsanpe said:
Hi. I change it, i only want warn you.

thank you very much, I have updated the example project.

Daica · Mar 22, 2021

I'm finally trying this out now and its awesome so far. Do you think you could capture the text click as well?

Alexander Stolte · Mar 22, 2021

Daica said:
Do you think you could capture the text click as well?

Yes, but i will extend it with another event, so that if you click on the text you can execute something else than if you click on a button.
I'll put it on the ToDo.

Alexander Stolte · Mar 22, 2021

Update
V1.04

Add Event ItemTextClicked - triggers if you click on a text item

Alexander Stolte · Jul 7, 2021

Update

1.05
- Intern Function IIF renamed to iif2

Sandman · Jun 10, 2022

Hi Alexander, this works great in B4A (and in B4i I assume, haven't tried it yet), but I'm getting no action in B4J.

The button with the plus shows up but nothing happens when I click it. Do I need to do something special to get it working in B4J?

Alexander Stolte · Jun 10, 2022

Update

1.06
- B4J BugFixes

Mashiane · Jun 10, 2022

AS, do you have a consolidated thread that showcases all your amazing stuff here so that one can see everything, whether images or gifs?

I want to check the components you have used in one place so that I can decide what I can use in my projects and how.

Thanks again, keep changing the world!

Alexander Stolte · Jun 10, 2022

Mashiane said:
AS, do you have a consolidated thread that showcases all your amazing stuff here so that one can see everything, whether images or gifs?

[B4X] AS Views Overview

AS Animated Counter AS MsgBox AS PinLock AS Placeholder AS Button Slider AS Floating Loading Button AutoTextSizeLabel AS Sliding Circles (Loadingview) AS Ripple View AS Gradients Panel AS Color Chooser AS Draw AS View Pager Have fun :)

www.b4x.com

For years in my signature

Mashiane said:
Thanks again, keep changing the world!

pliroforikos · Aug 29, 2022

Hello,
I'm facing a problem with B4i. I have a simple form with 1 panel with a b4xtable inside and a float menu outside of panel. Also the app uses drawerMenu.

When i click in float menu ASFloatingActionButton1_ButtonClicked event fires and shows the log. But menu doesn't show.

The same code works in B4A and i cant reproduce the error in other projects. Your example also works in B4i.

this is the corresponding code:

B4X:

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1

    ' ''''''''''''''''''' Drawer '''''''''''''''''''''''''''''''''
    drManager.Initialize(Me, "Drawer", Root, 200dip)
    drManager.Drawer.CenterPanel.LoadLayout("frmSettings2")
    drManager.Drawer.LeftPanel.LoadLayout("drawerMenu")
    createMenu
    ' ''''''''''''''''''' Drawer '''''''''''''''''''''''''''''''''

    createFloatMenu
end sub

Private Sub createFloatMenu
    floatButtons.ButtonIconText.Font = xui.CreateMaterialIcons(24)'because the icon we want to display is an Material Icon
    floatButtons.ButtonIconText.Text = Chr(0xE145)
    floatButtons.ItemButtonProperties.IconText_Font = xui.CreateMaterialIcons(20)'because the next 2 item we want to add is a Material Icon
    floatButtons.AddItem(Null,Chr(0xE145),"Insert","")
 
    floatButtons.ItemButtonProperties.IconText_Font = xui.CreateFontAwesome(20)'because the next item we want to add is a FontAwesome Icon
'    floatButtons.ItemButtonProperties.BackgroundColor = xui.Color_ARGB(255, 255, 159, 71)'the next item should be a blue button
'    floatButtons.ItemTextProperties.BackgroundColor =  xui.Color_ARGB(255, 255, 159, 71)
    floatButtons.AddItem(Null,Chr(0xF029),"Scan","")
 
    floatButtons.ItemButtonProperties.BackgroundColor = xui.Color_ARGB(255,73, 98, 164)'the next item should be a blue button
    floatButtons.ItemButtonProperties.IconText_Font = xui.CreateFontAwesome(20)'because the next item we want to add is a FontAwesome Icon
'    floatButtons.ItemButtonProperties.BackgroundColor = xui.Color_ARGB(255, 29, 100, 59)'the next item should be a blue button
'    floatButtons.ItemTextProperties.BackgroundColor = xui.Color_ARGB(255, 29, 100, 59)
    floatButtons.AddItem(Null,Chr(0xF00C),"Set","")
 
    floatButtons.ItemButtonProperties.BackgroundColor = xui.Color_ARGB(255,228, 68, 68)'the next item should be a blue button
    floatButtons.ItemTextProperties.BackgroundColor = xui.Color_ARGB(255,228, 68, 68)
    floatButtons.ItemButtonProperties.IconText_Font = xui.CreateMaterialIcons(20)'because the next 2 item we want to add is a Material Icon
    floatButtons.AddItem(Null,Chr(0xE872),"Remove","")
#end if 

End Sub

Sub ASFloatingActionButton1_ItemClicked(index As Int,Value As Object)
    Log("ASFloatingActionButton1_ItemClicked: " & index)
    'ASFloatingActionButton1.CloseMenu
End Sub

Sub ASFloatingActionButton1_ButtonClicked(open As Boolean)
    Log("ASFloatingActionButton1_ButtonClicked: " & open)
    'works only if you set a image as icon
'    If open = True Then
'        ASFloatingActionButton1.Base.GetView(1).SetRotationAnimated(250,135)
'    Else
'        ASFloatingActionButton1.Base.GetView(1).SetRotationAnimated(250,0)
'    End If

    If open = True Then
        ASFloatingActionButton1.ButtonIconText.SetRotationAnimated(250,135)
    Else
        ASFloatingActionButton1.ButtonIconText.SetRotationAnimated(250,0)
    End If
End Sub

I forgot to say that this menu was working fine until July.

Alexander Stolte · Aug 29, 2022

pliroforikos said:
I forgot to say that this menu was working fine until July.

There was no update, so the error is probably yours.

pliroforikos said:
and i cant reproduce the error in other projects. Your example also works in B4i.

And how am I supposed to find a presumptive error if it cannot be reproduced?
Sorry.

pliroforikos · Aug 30, 2022

Sometimes it helps only to describe the problem and the solution comes out! But now nothing happens

But i managed to reproduce the problem in the bellow project. It runs in B4i. Not tested on B4A.

In this project i'm using a drawermenu, a b4xtable and an AS FloatingActionButton.

Alexander Stolte · Aug 30, 2022

And where is the problem?

B4A Library [B4X] [XUI] AS FloatingActionButton [Payware]

Attachments

B4X founder

Expert

Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Attachments

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency