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,705
  • FABListViewExample.zip
    9.6 KB · Views: 1,197
  • FABScrollViewExample.zip
    9.9 KB · Views: 1,140

DonManfred

Expert
Licensed User
Longtime User
No other libraries are required (
i just loaded FABListView.b4a and got the message i´m missing xmllayoutbuilder

I got the xmllayoutbuilder and install the lib and now the example is working great.

REALLY NICE! I like it

Thank you for sharing! :)
 
Last edited:

woniol

Active Member
Licensed User
Longtime User
Ups, I get this:
B4X:
Code:
java.lang.RuntimeException: Unable to start activity ComponentInfo{de.amberhome.fabscrollview/de.amberhome.fabscrollview.main}: android.view.InflateException: Binary XML file line #30: Error inflating class com.android.internal.widget.ActionBarView


at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2059)
at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2084)
at android.app.ActivityThread.access$600(ActivityThread.java:130)
at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1195)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:4745)
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:786)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
at dalvik.system.NativeStart.main(Native Method)
Caused by: android.view.InflateException: Binary XML file line #30: Error inflating class com.android.internal.widget.ActionBarView
at android.view.LayoutInflater.createView(LayoutInflater.java:613)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:687)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
at android.view.LayoutInflater.inflate(LayoutInflater.java:352)
at com.android.internal.policy.impl.PhoneWindow.generateLayout(PhoneWindow.java:2784)
at com.android.internal.policy.impl.PhoneWindow.installDecor(PhoneWindow.java:2844)
at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:271)
at com.android.internal.policy.impl.PhoneWindow.setContentView(PhoneWindow.java:265)
at android.app.Activity.setContentView(Activity.java:1887)
at de.amberhome.fabscrollview.main.onCreate(main.java:57)
at android.app.Activity.performCreate(Activity.java:5008)
at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1079)
at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2023)
... 11 more
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Constructor.constructNative(Native Method)
at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
at android.view.LayoutInflater.createView(LayoutInflater.java:587)
... 26 more
Caused by: android.view.InflateException: Binary XML file line #36: Error inflating class android.widget.TextView
at android.view.LayoutInflater.createView(LayoutInflater.java:613)
at com.android.internal.policy.impl.PhoneLayoutInflater.onCreateView(PhoneLayoutInflater.java:56)
at android.view.LayoutInflater.onCreateView(LayoutInflater.java:660)
at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:685)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:746)
at android.view.LayoutInflater.rInflate(LayoutInflater.java:749)
at android.view.LayoutInflater.inflate(LayoutInflater.java:489)
at android.view.LayoutInflater.inflate(LayoutInflater.java:396)
at com.android.internal.widget.ActionBarView.initTitle(ActionBarView.java:763)
at com.android.internal.widget.ActionBarView.setDisplayOptions(ActionBarView.java:596)
at com.android.internal.widget.ActionBarView.<init>(ActionBarView.java:238)
... 29 more
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Constructor.constructNative(Native Method)
at java.lang.reflect.Constructor.newInstance(Constructor.java:417)
at android.view.LayoutInflater.createView(LayoutInflater.java:587)
... 39 more
Caused by: java.lang.UnsupportedOperationException: Can't convert to color: type=0x2 at android.content.res.TypedArray.getColor(TypedArray.java:326)
at android.widget.TextView.<init>(TextView.java:499)
at android.widget.TextView.<init>(TextView.java:442)


... 42 more
Message longer than Log limit (4000). Message was truncated.


while trying to run the example on the phone as well as emulator (both Android 4.1)
Do you have any idea what am i doing wrong?

EDIT:
It works fine when I add it in code:
B4X:
Dim fab As FloatingActionButton
fab.Initialize("")
Activity.AddView(fab,50dip,50dip,55dip,55dip)
 
Last edited:

corwin42

Expert
Licensed User
Longtime User
i just loaded FABListView.b4a and got the message i´m missing xmllayoutbuilder

I got the xmllayoutbuilder and install the lib and now the example is working great.

The FloatingActionButton library does not require any other libraries. The examples use xmllayoutbuilder for loading a drawable.
 

corwin42

Expert
Licensed User
Longtime User
Ups, I get this:

...

while trying to run the example on the phone as well as emulator (both Android 4.1)
Do you have any idea what am i doing wrong?

EDIT:
It works fine when I add it in code:
B4X:
Dim fab As FloatingActionButton
fab.Initialize("")
Activity.AddView(fab,50dip,50dip,55dip,55dip)

Which version of B4A do you use? You will need 4.0 or higher.
 

corwin42

Expert
Licensed User
Longtime User
I use 4.0

Is the error stack from one of the examples or did you add the FAB to your own project?

From the error stack I can't see that the error is really related to the FAB library.
 

woniol

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

luke2012

Well-Known Member
Licensed User
Longtime User
Hi @corwin42.
First of all my compliments for this well done tutorial! :)

How I can make the FAB compatible on Android JellyBean and KitKat Devices ?
 

luke2012

Well-Known Member
Licensed User
Longtime User
@luke2012 just add the following code into your Manifest file.
B4X:
SetApplicationAttribute(android:theme, "@android:style/Theme.Holo.Light")

@Peter Simpson thanks for the info. Now I solved the theme issue on old Android versions (4.x)
The problem now is the FAB button. On the 4.x isn't rendered correctly as on 5.x Android version.

@corwin42, So I'm asking me how to solve the FAB render problem on older android version :)
The solution could be the AppCompat library ?
 

luke2012

Well-Known Member
Licensed User
Longtime User
fab_issue.jpg


The list is build using ClsCheckList by informatix and the FAB button is a child view of the container panel of ActionDrawer Class by edgeryder1000.

So on Android 4.3 I got a position issue and a graphic issue as you can see :-(
Running the same code on Android 5.01 it works perfect.

*** Note that I integrated the FAB within my custom implementation based on ClsCheckList class and ActionDrawer Class whitin my library
 
Last edited:

corwin42

Expert
Licensed User
Longtime User
The list is build using ClsCheckList by informatix and the FAB button is a child view of the container panel of ActionDrawer Class by edgeryder1000.

So on Android 4.3 I got a position issue and a graphic issue as you can see :-(
Running the same code on Android 5.01 it works perfect.

*** Note that I integrated the FAB within my custom implementation based on ClsCheckList class and ActionDrawer Class whitin my library

I tested the examples down to Android 2.3.7 and never had any graphical issues like in your screenshot.
I even tested with the FAB as a child of a Panel and it works.

Without an example project I can't tell you what you are doing wrong or what is not working correctly.
 

luke2012

Well-Known Member
Licensed User
Longtime User
I tested the examples down to Android 2.3.7 and never had any graphical issues like in your screenshot.
I even tested with the FAB as a child of a Panel and it works.

Without an example project I can't tell you what you are doing wrong or what is not working correctly.

Thanks @corwin42. I provide you a sample project as soon as possible.
 

shashkiranr

Active Member
Licensed User
Longtime User
Hi Corwin,

How do you add these floating action buttons like in the inbox application.
patterns_actions_fab_actions14.png


Regards,
SK
 
Top