B4A Library Floating Action Menu (FAM) and Floating Action Button (FAB)

This is a wrap for this Github Project. Thanx to @ivan.tellez for pointing me into it :)
The library is a replacement for the Floating Action Button lib by @corwin42
They are not compatible as we are both using the same Objectname (FloatingActionbutton).

Requires B4A Version 5.8+

FloatingActionButton
Author:
DonManfred (wrapper)
Version: 1.02
  • FloatingActionButton
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • hasShadow As Boolean
    • hide (animate As Boolean)
      Makes the <b>FloatingActionButton</b> to disappear and sets its visibility to {@link #INVISIBLE}
      animate: if true - plays "hide animation"
    • hideButtonInMenu (animate As Boolean)
      <b>This will clear all AnimationListeners.</b>
    • hideProgress
    • isHidden As Boolean
      Checks whether <b>FloatingActionButton</b> is hidden
      Return type: @return:true if <b>FloatingActionButton</b> is hidden, false otherwise
    • isProgressBackgroundShown As Boolean
    • isProgressIndeterminate As Boolean

      Return type: @return:the mProgressIndeterminate
    • setProgress (progress As Int, animate As Boolean)
    • show (animate As Boolean)
      Makes the <b>FloatingActionButton</b> to appear and sets its visibility to {@link #VISIBLE}
      animate: if true - plays "show animation"
    • showButtonInMenu (animate As Boolean)
    • toggle (animate As Boolean)
    Properties:
    • Background As Drawable
    • ButtonSize As Int
      Sets the size of the <b>FloatingActionButton</b> and invalidates its layout.
    • Color As Int [write only]
    • ColorDisabled As Int
    • ColorNormal As Int
    • ColorPressed As Int
    • ColorRipple As Int
    • Elevation As Float [write only]
    • ElevationCompat As Float [write only]
      Sets the shadow color and radius to mimic the native elevation.

      <p><b>API 21+</b>: Sets the native elevation of this view, in pixels. Updates margins to
      make the view hold its position in layout across different platform versions.</p>
    • Enabled As Boolean
    • Height As Int
    • HideAnimation As Animation [write only]
    • IconDrawable As String [write only]
    • ImageDrawable As Drawable [write only]
    • Indeterminate As Boolean [write only]
      <p>Change the indeterminate mode for the progress bar. In indeterminate
      mode, the progress is ignored and the progress bar shows an infinite
      animation instead.</p>
    • LabelText As String
    • LabelVisibility As Int
    • Left As Int
    • Max As Int
    • Parent As Object [read only]
    • Progress As Int [read only]
    • ProgressBackgroundColor As Int
    • ProgressColor As Int
    • ProgressWidth As Int
    • ShadowColor As Int
    • ShadowRadius As Int
      Sets the shadow radius of the <b>FloatingActionButton</b> and invalidates its layout.
      <p>
      Must be specified in density-independent (dp) pixels, which are then converted into actual
      pixels (px).
    • ShadowXOffset As Int
      Sets the shadow x offset of the <b>FloatingActionButton</b> and invalidates its layout.
      <p>
      Must be specified in density-independent (dp) pixels, which are then converted into actual
      pixels (px).
    • ShadowYOffset As Int
      Sets the shadow y offset of the <b>FloatingActionButton</b> and invalidates its layout.
      <p>
      Must be specified in density-independent (dp) pixels, which are then converted into actual
      pixels (px).
    • ShowAnimation As Animation [write only]
    • ShowProgressBackground As Boolean [write only]
    • ShowShadow As Boolean [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
  • FloatingActionMenu
    Events:
    • onClick (obj As View)
    • onMenuToggle (opened As Boolean)
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • addMenuButton (fab As FloatingActionButton)
    • addMenuButton2 (fab As FloatingActionButton, index As Int)
    • close (animate As Boolean)
    • hideMenu (animate As Boolean)
      Makes the {@link #FloatingActionMenu} to disappear and sets its visibility to {@link #INVISIBLE}
      animate: if true - plays "hide animation"
    • hideMenuButton (animate As Boolean)
      Makes the {@link FloatingActionButton} to disappear inside the {@link #FloatingActionMenu} and
      sets its visibility to {@link #INVISIBLE}
      animate: if true - plays "hide animation"
    • isAnimated As Boolean
    • isIconAnimated As Boolean
    • isMenuButtonHidden As Boolean
    • isMenuHidden As Boolean
    • isOpened As Boolean
    • open (animate As Boolean)
    • removeAllMenuButtons
    • removeMenuButton (fab As FloatingActionButton)
    • showMenu (animate As Boolean)
      Makes the whole {@link #FloatingActionMenu} to appear and sets its visibility to {@link #VISIBLE}
      animate: if true - plays "show animation"
    • showMenuButton (animate As Boolean)
      Makes the {@link FloatingActionButton} to appear inside the {@link #FloatingActionMenu} and
      sets its visibility to {@link #VISIBLE}
      animate: if true - plays "show animation"
    • toggle (animate As Boolean)
    • toggleMenu (animate As Boolean)
    • toggleMenuButton (animate As Boolean)
    Properties:
    • ActivityHeight As Int [write only]
    • ActivityWidth As Int [write only]
    • Animated As Boolean [write only]
      Sets whether open and close actions should be animated
    • AnimationDelayPerItem As Int
    • Background As Drawable
    • ClosedOnTouchOutside As Boolean [write only]
    • Color As Int [write only]
    • Enabled As Boolean
    • Height As Int
    • IconAnimated As Boolean [write only]
    • IconAnimationCloseInterpolator As Interpolator [write only]
    • IconAnimationInterpolator As Interpolator [write only]
      Sets the {@link android.view.animation.Interpolator} for <b>FloatingActionButton's</b> icon animation.
    • IconAnimationOpenInterpolator As Interpolator [write only]
    • IconToggleAnimatorSet As AnimatorSet
    • LabelsCornerRadius As Int
    • LabelsMargin As Int
    • LabelsMaxLines As Int
    • LabelsPaddingBottom As Int
    • LabelsPaddingLeft As Int
    • LabelsPaddingRight As Int
    • LabelsPaddingTop As Int
    • LabelsPosition As Int
    • Left As Int
    • MenuButtonColorNormal As Int
    • MenuButtonColorPressed As Int
    • MenuButtonColorRipple As Int
    • MenuButtonHideAnimation As Animation [write only]
    • MenuButtonLabelText As String
    • MenuButtonShowAnimation As Animation [write only]
    • MenuIconView As ImageView [read only]
    • OpenDirection As Int
    • Parent As Object [read only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int

Known problems:
- I still don´t know what the problem is, but the first 2 FABs (FloatingActionButton) added to the FAM (FloatingActionMenu)will be ignored; they do not show in menu
But away from this it works fine here

Screenshot_20160325-080229.png


If you want to donate for my work building the wrapper you can do it here:
 

Attachments

  • FAMFABEx.zip
    18.3 KB · Views: 1,895
  • FloatingActionButtonV1.0.2.zip
    57 KB · Views: 1,941
Last edited:

panagiotisden2

Active Member
Licensed User
Longtime User
hello, ACbutton is always on top of the fam. i tryed to set the elevation to 4 and didnt work, even with elevation 10 its behind those buttons, what can i do to bring it to front?

pic1.png


Thanks in advance
 
Last edited:

MichalK73

Well-Known Member
Licensed User
Longtime User
Does anyone had run his program FloatingActionMenu in addition to acting demo ?? I am doing everything as in the demo and I do not have an icon. I do not have any errors in the log.

SUB
B4X:
    Private FABs As List
    Private ikona As FloatingActionMenu

Sub Create_FAB
    FABs.Initialize
    ikona.ActivityHeight = 100%y
    ikona.ActivityWidth = 100%x

    ikona.Animated = True
    ikona.hideMenuButton(False)
    ikona.IconAnimated = True
    ikona.ClosedOnTouchOutside = True
    ikona.AnimationDelayPerItem = 25
    ikona.MenuButtonLabelText = "Plywajace menu"
    ikona.MenuButtonColorNormal = Colors.Blue
    ikona.MenuButtonColorPressed = Colors.Green
    'ikona.Invalidate
    '1 -ignore
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 1
    btn1.ShowShadow = True
    btn1.showButtonInMenu(True)
    btn1.LabelText = "Mööp 1"
    ikona.addMenuButton(btn1)

    ' 2 -ignore
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 0
    btn1.ShowShadow = True
    btn1.showButtonInMenu(True)
    btn1.LabelText = "Mööp 2"
    ikona.addMenuButton(btn1)
   
    'teraz dodajemy potrzebne plywajce przyciski
    'nowy klient
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 0
    btn1.ShowShadow = False
    btn1.showButtonInMenu(True)
    'btn1.LabelVisibility = 1
    btn1.LabelText = "Dodaj nowego"
    ' 3 (First)
    ikona.addMenuButton(btn1)
    FABs.Add(btn1)
   
    'edycja klienta
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 0
    btn1.ShowShadow = False
    btn1.showButtonInMenu(True)
    'btn1.LabelVisibility = 1
    btn1.LabelText = "Edytuj dane"
    ' 3 (First)
    ikona.addMenuButton(btn1)
    FABs.Add(btn1)
   
    'wystaw fakture dla klienta
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 0
    btn1.ShowShadow = False
    btn1.showButtonInMenu(True)
    'btn1.LabelVisibility = 1
    btn1.LabelText = "Wystaw dokument"
    ' 3 (First)
    ikona.addMenuButton(btn1)
    FABs.Add(btn1)
   
    'wszystkie faktury klienta
    Dim btn1 As FloatingActionButton
    btn1.Initialize("fab")
    btn1.IconDrawable = "ic_accessibility"
    btn1.Color = Colors.Blue
    btn1.ColorDisabled = Colors.LightGray
    btn1.ColorNormal = Colors.Green
    btn1.ColorPressed = Colors.Magenta
    btn1.ColorRipple = Colors.White
    btn1.ButtonSize = 0
    btn1.ShowShadow = False
    btn1.showButtonInMenu(True)
    'btn1.LabelVisibility = 1
    btn1.LabelText = "Wystawione dokumenty"
    ' 3 (First)
    ikona.addMenuButton(btn1)
    FABs.Add(btn1)
   
    ikona.OpenDirection = 0
    ikona.LabelsPosition = 0

    ikona.Invalidate
   
    ikona.showMenuButton(True)
End Sub


The logs when creating
B4X:
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h140)
onMeasureAfter2(w132,h236)
onMeasureAfter3(w132,h1170)
onMeasureAfter4(w132,h1170)
W=720
H=1232
l=0
t=0
r=132
b=1170
W=720
H=1232
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h140)
onMeasureAfter2(w132,h236)
onMeasureAfter3(w132,h1170)
onMeasureAfter4(w132,h1170)
W=720
H=1232
l=0
t=0
r=132
b=1170
W=720
H=1232
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h252)
onMeasureAfter2(w362,h348)
onMeasureAfter3(w362,h1170)
onMeasureAfter4(w362,h1170)
W=720
H=1232
l=0
t=0
r=362
b=1170
W=720
H=1232
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h364)
onMeasureAfter2(w362,h460)
onMeasureAfter3(w362,h1170)
onMeasureAfter4(w362,h1170)
W=720
H=1232
l=0
t=0
r=362
b=1170
W=720
H=1232
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h476)
onMeasureAfter2(w375,h572)
onMeasureAfter3(w375,h1170)
onMeasureAfter4(w375,h1170)
W=720
H=1232
l=0
t=0
r=375
b=1170
W=720
H=1232
onMeasure(w1073742544,h1073743056)
W=720
H=1232
onMeasureAfter1(w0,h588)
onMeasureAfter2(w426,h684)
onMeasureAfter3(w426,h1170)
onMeasureAfter4(w426,h1170)
W=720
H=1232
l=0
t=0
r=426
b=1170
W=720
H=1232
 

MichalK73

Well-Known Member
Licensed User
Longtime User
Unless something here I'm starting to act.
On the form I CustomListView and FloatingActionMenu.
If they are both size (0,0,100% x 100% s) is not see FAM.
When I change my size CustomListView on, for example 70% y, then on the bottom I see the icon + FAM but as I press the menu comes from the CustomListView.

Is there a possibility to throw out the FAM on the front and was not entered in the bottom of the CLV ??
 

MichalK73

Well-Known Member
Licensed User
Longtime User
Ok I found the cause.
First I need to set up the Create_FAB and then start the functions for CustomListView.
At the end I have to add "FAM.BringToFront" and everything works beautifully. Only in that order, I managed to run the FAM.
The application that is not as FAM on the window, you need to check the order by FAM was first created and finally give the "FAM.BringToFront"
 

ZJP

Active Member
Licensed User
Longtime User
Hi,

Thanks for this lib. Works well.

a) Since the 2 first buttons are not drawed this is not necessary to add the full parameters.
B4X:
    ' 1 not drawing
   Dim btn1 As FloatingActionButton
   btn1.Initialize("fab")
   fam.addMenuButton(btn1)
   ' 2 not drawing
   Dim btn1 As FloatingActionButton
   btn1.Initialize("fab")
   fam.addMenuButton(btn1)

If you do not use the shadow, you can use its color (for example) for detecting a menu number (instead of the label).

B4X:
   btn1.ShowShadow = False
   btn1.ShadowColor = 1 ' menu 1

...
   btn1.ShowShadow = False
   btn1.ShadowColor = 2 ' menu 2 etc etc ...

B4X:
Sub fam_onClick(obj As Object)
   fam.toggle(True)
End Sub

Sub fab_onClick(obj As Object)
   If obj Is FloatingActionButton Then
       Dim btn As FloatingActionButton = obj
       ToastMessageShow("Menu number = " & btn.ShadowColor, False)
       btn.LabelText = "Now, i can change dynamicaly the label" ' because it's not used for a test....
   End If
   'fam.toggle(False) ' or not...
End Sub

edit :

Shadow and menu. ;)
B4X:
   Dim ShadowCol As Int = 123456

   btn1.ShowShadow = True
   btn1.ShadowColor = ShadowCol + 1 ' menu 1

...
   btn1.ShowShadow = True
   btn1.ShadowColor = ShadowCol + 2 ' menu 2 etc etc ...

B4X:
...
       ToastMessageShow("Menu number = " & (btn.ShadowColor - ShadowCol) , False)
...
End Sub
 
Last edited:

BarryW

Active Member
Licensed User
Longtime User
How to add spaces between buttons and also can we adjust the extended buttons width and height
 

desof

Well-Known Member
Licensed User
Longtime User
How to add spaces between buttons and also can we adjust the extended buttons width and height
 

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
I've been sticking for a while trying to automatically adjust the Left property so that it is set as far to the right of the screen as possible, regardless of the size of the screen as well as its orientation.

Finally I have managed to understand a bit how the thing "works".

If the OpenDirection property can be set to 0, by default the button appears to the left of the whole and we can change the Left property without problem. (The only problem with which we will find later, is that if the button we can right to the whole, then we will cut the texts of the different options)

The problem arises when we can open the OpenDirection property to 1. Since in this case, even if the value of Left remains at 0, the button is actually shifted to the right as much as necessary so that later the texts of the different options appear complete .

That's fine, except when you want to put the menu button aligned to the right. Since to do it in an automatic way you will need to know the space "reserved" by the own liberia to be able to do a fam.left = 100% x - Reserved Space.

B4X:
onMeasure(w1073742424,h1073742744)
W=600
H=920
onMeasureAfter1(w0,h350)
onMeasureAfter2(w223,h398)
onMeasureAfter3(w223,h898)
onMeasureAfter4(w223,h898)
W=600
H=920
l=375
t=0
r=598
b=898
W=600
H=920
onMeasure(w1073742848,h1073742320)
W=1024
H=496
onMeasureAfter1(w0,h350)
onMeasureAfter2(w223,h398)
onMeasureAfter3(w223,h461)
onMeasureAfter4(w223,h461)
W=1024
H=496
l=799
t=0
r=1022
b=461
W=1024
H=496


I have been observing the logs and I have found these values that are generated every time the screen changes orientation, and that I think are the values that we need to know when adjusting the value of the LEFT.

And I think the interesting thing is what appears in: onMeasureAfter4 (w223, h461)

Being 223 what I have to subtract in the example with which I'm doing 100% tests x.

But of course, I see that watching the logs, but I do not know how to get it in execution time.
 

DonManfred

Expert
Licensed User
Longtime User
Sorry for the late reply; i simple missed it...

I can´t really answer or help here as i did loose the Source of this lib with my HDDCrash in 2017.
Unfortunatly i can not do anything.

If the lib is not doing what you need then i´m sorry but you need to find another library then.
 
Top