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,822
  • FABListViewExample.zip
    9.6 KB · Views: 1,296
  • FABScrollViewExample.zip
    9.9 KB · Views: 1,253
Click to expand...
DonManfred

DonManfred

Expert
Licensed User
Longtime User
corwin42 said:
No other libraries are required (
Click to expand...
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

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

corwin42

Expert
Licensed User
Longtime User
DonManfred said:
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.
Click to expand...

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

corwin42

Expert
Licensed User
Longtime User
woniol said:
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)
Click to expand...

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

corwin42

Expert
Licensed User
Longtime User
woniol said:
I use 4.0
Click to expand...

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

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

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

luke2012

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

@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 ?
 
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
@luke2012 please add a screen shot of your issue. I've just tested this in Android 5.0.1 Lollipop and in Android 4.4.2 KitKat, it's working absolutely perfect for me.

Android 4.4
Screenshot_2015-01-18-11-30-51.png


Android 5.0
Screenshot_2015-01-18-11-39-20.png


No issues whatsoever...
 
luke2012

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

corwin42

Expert
Licensed User
Longtime User
luke2012 said:
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
Click to expand...

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

luke2012

Well-Known Member
Licensed User
Longtime User
corwin42 said:
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.
Click to expand...

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

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
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS FloatingActionMenu
Replies
6
Views
2K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS FloatingActionButton [Payware]
2 3
Replies
46
Views
14K
Alexander Stolte
Alexander Stolte
DonManfred
  • Article
B4A Library Floating Action Menu (FAM) and Floating Action Button (FAB)
2 3
Replies
51
Views
30K
DonManfred
DonManfred
Erel
  • Article
B4A Library StdActionBar - Another ActionBar library
14 15 16
Replies
308
Views
123K
Erel
Erel
Erel
  • Locked
  • Article
Android Tutorial Handle the soft keyboard with the IME library
8 9 10
Replies
181
Views
156K
Erel
Erel
Top