B4A Library Floating Action Button

corwin42 · Jan 9, 2015

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

Copy the jar and the xml files to your custom libraries folder.
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

yiankos1 · Jul 31, 2015

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.

DonManfred · Jul 31, 2015

These two types are what google suggests for FAB-Buttons in Material design.
All FAB-Libraries i saw so far does have the same sizes for the FAB-Buttons.

ArminKH · Aug 1, 2015

@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 · Aug 17, 2015

woniol said:
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 · Dec 15, 2015

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 · Jan 25, 2016

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 · Jan 26, 2016

phukol said:
Hello guys im encountering this [...] whenever i try to load my layout.

You haven't included the #AdditionalRes: line.

phukol · Jan 26, 2016

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.

ivan.tellez · Mar 14, 2016

Hi, @corwin42, this is a great lib. What do you think about this one: https://github.com/Clans/FloatingActionButton

It has more features. If you have the time, maybe you could update the lib with this.

Thanks for sharing.

johndb · Mar 16, 2016

ivan.tellez said:
Hi, @corwin42, this is a great lib. What do you think about this one: https://github.com/Clans/FloatingActionButton

It has more features. If you have the time, maybe you could update the lib with this.

Thanks for sharing.

Would one of our wrapper wizards @Johan Schoeman or @DonManfred take this project on? It would seem to be a very useful library.

DonManfred · Mar 17, 2016

johndb said:
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

johndb · Mar 17, 2016

DonManfred said:
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

View attachment 42501

Thank you very much @DonManfred for working at building the wrapper. Your efforts are very much appreciated

John

Peter Simpson · Mar 17, 2016

johndb said:
Thank you very much @DonManfred for working at building the wrapper. Your efforts are very much appreciated

John

Go on @johndb, thank @DonManfred by pressing the 'Donate' button, buy him a Pizza

This is a great library from @corwin42...

johndb · Mar 17, 2016

Peter Simpson said:
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

DonManfred · Mar 17, 2016

johndb said:
and @DonManfred several times in the past in appreciation for their contributions

Confirmed

DonManfred · Mar 17, 2016

DonManfred said:
Still investigating what´s wrong

I´m a step further

PD: Sorry, @corwin42 for capturing your thread

DonManfred · Mar 20, 2016

johndb · Mar 21, 2016

DonManfred said:
View attachment 42581

Looks good @DonManfred. When do you think that the library will be ready for publication? Thank you for your work on this!

John

DonManfred · Mar 21, 2016

I think this week... Still needs some small additions. But i´m positive to get this done this week

Anser · Jul 19, 2016

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

B4A Library Floating Action Button

Attachments

Well-Known Member

Expert

Well-Known Member

Member

Well-Known Member

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Expert

Expert

Attachments

Expert

Active Member

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency