B4A Library Floating Action Button

This library is a B4A wrapper of this Floating Action Button library. The original library is released under the MIT license. The wrapper library contains parts of the NineOldAndroids project for the show/hide animations.

See the Floating Action Button description in the Material Design Guide how to use Floting Action Buttons in your app.

Installation
  1. Copy the jar and the xml files to your custom libraries folder.
  2. Copy the b4a_floatingactionbutton folder to the folder where you keep your resource files for custom libraries.
The library should be compatible with Android API 7 and up. No other libraries are required (it does not depend on AppCompat).

Usage

Because the library uses resources we have to tell B4A where to find them with the #AdditionalRes attribute:
B4X:
#AdditionalRes: <Path to your Customlib resource files>\CustomLibsRes\b4a_floatingactionbutton, de.amberhome.objects.floatingactionbutton

The Floating Action Button is implemented as a CustomView for the B4A designer or you can add it by code like all other internal B4A views. Depending on the type of the Floating Action Button (TYPE_NORMAL, TYPE_MINI, see Type property) the view has a size of 56x56dip or 40x40dip.

There are several properties you can set like the color of the button or which icon to use. See the examples for better understanding.
B4X:
    Fab1.Icon = xml.GetDrawable("ic_add_white_24dp")
    Fab1.Color = Colors.RGB(30,50,190)
    Fab1.ColorPressed = Colors.RGB(50,70,210)
    Fab1.ColorRipple = Colors.RGB(90,110,250)
    Fab1.Type = Fab1.TYPE_NORMAL

    'Set the offset of hide position. This is the amount the FAB moves on hide.
    Fab1.HideOffset = 100%y - Fab1.Top
    Fab1.Hide(False)

Versions

V1.00
  • initial version
FabScrollView.png
FabListView.png
 

Attachments

  • FloatingActionButton_1_00.zip
    130.5 KB · Views: 1,717
  • FABListViewExample.zip
    9.6 KB · Views: 1,206
  • FABScrollViewExample.zip
    9.9 KB · Views: 1,148

yiankos1

Well-Known Member
Licensed User
Longtime User
Good morning @corwin42, your library is simply perfect. Because I need more than one button at different shapes, the only available method is to use two different type of FAB. Type_mini and typr_normal. Can you edit library so we can manually add as many types as we want?
Thank you in advance for your time.

P.s. I edit dimens.xml in order to change FAB dimensions, but we need a little bit more flexibility to add more buttons at different shapes, not only two types.
 
Last edited:

ArminKH

Well-Known Member
@corwin42
hi corwin can u any plane to change the animation of FAB to original ?
for example if u have telegram then scroll quickly at first page to up and down
and as you can see then fab.hide and fab.show accured with a faster reaction
but by using this lib the reaction has a bit delay
thank u
 

paragkini

Member
Licensed User
Longtime User
I found the problem. In your examples Material Theme is set in Manifest:
B4X:
SetApplicationAttribute(android:theme, "@android:style/Theme.Material.Light")

Setting it to Holo helped on my android 4.1 devices:
B4X:
SetApplicationAttribute(android:theme, "@android:style/Theme.Holo")

Thanks again for this great lib.

Thanks.
 

Computersmith64

Well-Known Member
Licensed User
Longtime User
This is a fantastic library & I use it extensively in one of my apps (actually I wrapped it into a class so that I can add some functionality), however the addition of a Touch event handler would make it even more awesome. In my case, there are circumstances where the FAB actually gets in the way of parts of the UI & it would be great to be able to allow the user to drag it to another position on the screen - a-la the Facebook Messenger floating chathead. Any possibility you could add the Touch handler to the library?

Thanks - Colin.
 

phukol

Active Member
Licensed User
Longtime User
Hello guys im encountering this

B4X:
Error occurred on line: 152 (Movie_Info)
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:166)
    at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:132)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:697)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:339)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:246)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
    at manila.fun.movie_info.afterFirstLayout(movie_info.java:102)
    at manila.fun.movie_info.access$000(movie_info.java:17)
    at manila.fun.movie_info$WaitForLayout.run(movie_info.java:80)
    at android.os.Handler.handleCallback(Handler.java:725)
    at android.os.Handler.dispatchMessage(Handler.java:92)
    at android.os.Looper.loop(Looper.java:137)
    at android.app.ActivityThread.main(ActivityThread.java:5041)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
    at dalvik.system.NativeStart.main(Native Method)
Caused by: java.lang.reflect.InvocationTargetException
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:54)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:158)
    ... 21 more
Caused by: java.lang.NoClassDefFoundError: de.amberhome.objects.floatingactionbutton.R$color
    at de.amberhome.objects.floatingactionbutton.internal.FloatingActionButton.init(FloatingActionButton.java:89)
    at de.amberhome.objects.floatingactionbutton.internal.FloatingActionButton.<init>(FloatingActionButton.java:67)
    at de.amberhome.objects.floatingactionbutton.internal.FloatingActionButton.<init>(FloatingActionButton.java:62)
    at de.amberhome.objects.floatingactionbutton.FloatingActionButtonWrapper.innerInitialize(FloatingActionButtonWrapper.java:43)
    at anywheresoftware.b4a.objects.ViewWrapper.Initialize(ViewWrapper.java:65)
    at de.amberhome.objects.floatingactionbutton.FloatingActionButtonWrapper.Initialize(FloatingActionButtonWrapper.java:36)
    at de.amberhome.objects.floatingactionbutton.FloatingActionButtonWrapper._initialize(FloatingActionButtonWrapper.java:76)
    ... 25 more

whenever i try to load my layout.
 

corwin42

Expert
Licensed User
Longtime User
Hello guys im encountering this [...] whenever i try to load my layout.

You haven't included the #AdditionalRes: line.
 

phukol

Active Member
Licensed User
Longtime User
Thanks corwin. I already included that, what i did to resolve the issue was to use FloatingActionButton at runtime, there is some issue with using it in design time (layout builder). I was using appcompat theme.
 

johndb

Active Member
Licensed User
Longtime User

DonManfred

Expert
Licensed User
Longtime User
It would seem to be a very useful library.
If it works; yes :)

But sadly the wrapper i wrote yesterday did not work. It does show the Button but it does not show any "menu" when clicking on the button. Still investigating what´s wrong :mad:

Screenshot_20160317-111207.png
 

johndb

Active Member
Licensed User
Longtime User
Go on @johndb, thank @DonManfred by pressing the 'Donate' button, buy him a Pizza ;)

This is a great library from @corwin42...
I have previously donated to both @corwin42 and @DonManfred several times in the past in appreciation for their contributions. I currently use corwin42's great "FloatingActionButton" library in my applications but the work being done by DonManfred is for an enhanced FAB. In hind-site, the posts regarding the work for the enhanced FAB should have been posted in a new thread so as not to ruffle people's feathers ;)
 

Anser

Well-Known Member
Licensed User
Longtime User
Can anybody tell me why the hiding of FAB does not work while scrolling when used along with a CustomListView. Please note that FAB is working fine for me, only the hiding of FAB while scrolling the CustomListView is not working.

The samples provided in the first post (FABScrollViewExample and FABListViewExample) demonstrates hiding the FAB while scrolling when FAB used along with a Scrollview OR a ListView. It looks like there is an inbuilt function ie FAB.AttachtoListView to handle a Listview scrolling.

I tried to adapt the Scrollview sample, unfortunately I could not get it working. Can anybody point me where I am wrong ?

I have a CustomListView in the Activity named as clvSchemes. Here is the code that I have used
B4X:
Sub Globals
  Private mLastScrollY As Int = 0
  Private FabMenu As FloatingActionButton
  Private clvSchemes As CustomListView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   Activity.LoadLayout("HomePage")
   FabSetup
End Sub

Sub FabSetup
    Dim p1 As MSIconicDrawable : p1.Initialize("gmd_menu")  : p1.Color = 0xffffffff : p1.sizeDp(20)
 
    FabMenu.Icon = p1.Drawable
    FabMenu.Color = Colors.RGB(2,124,213)
    FabMenu.ColorPressed = Colors.RGB(219,68,55)
    FabMenu.ColorRipple = Colors.RGB(90,110,250) 
 
    'Set the offset of hide position. This is the amount the FAB moves on hide.
    FabMenu.HideOffset = 100%y - FabMenu.Top
    FabMenu.Hide(False) 
    'FabMenu.Show(True)     
End Sub

'I understand that the following sub is not executed at all
'I am not sure that whether this Sub exists for CustomListView
Sub clvSchemes_ScrollChanged(Position As Int)
    If Abs(Position - mLastScrollY) > 3dip Then
        If Position > mLastScrollY Then
            FabMenu.Hide(True)
        Else
            FabMenu.Show(True)
        End If
    End If
    mLastScrollY = Position
    Dim cText As String
    cText =  mLastScrollY
    ActionBar.SubTitle = cText
    ToastMessageShow("Yes",False)
End Sub

Any help will be appreciated.

Regards
Anser
 
Top