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:

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

    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

 

[corwin42]

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 ScrollChanged Event is not forwarded to the Activity with the standard CustomListView. Add the following to the CustomListView to do so:

Sub sv_ScrollChanged(Position As Int)
    If SubExists(CallBack, EventName & "_ScrollChanged") Then
        CallSub2(CallBack, EventName & "_ScrollChanged", Position)
    End If
End Sub

Then your clvSchemes_ScrollChanged event in the Activity should be called.

 

[Erel]

Note that the SubExists line is not required. Nothing will happen if there is no such sub.

 

[Anser]

With the above suggested change, It is working fine now with CustomListView

 

[corwin42]

Note that the SubExists line is not required. Nothing will happen if there is no such sub.

I'm a careful person.

Maybe this hint could be added to the popup help of CallSub? It is not listed there.

 

[Erel]

After some further checks I think that it is a good measure to be careful and check whether the sub exists or not if it is an optional event.

Nothing will happen with a missing sub if the target module is an activity or service. If it is a class instance then an error will be thrown.

 

[Dave O]

Hi @corwin42 ,

I'm trying out your FAB library with a new app that also uses UltimateListView.

When I attached the FAB to the ULV, the auto-hide does not work as I expected:
- If the list is scrolled down, the FAB disappears properly, but does not reappear when the list stops scrolling.
- To get it to reappear, I must scroll up. It appears, but stays there while I scroll the list up.

I was expecting that it would hide while scrolling, but reappear once scrolling stopped (in either direction).

Is the FAB/ULV combo misbehaving, or am I misunderstanding the proper behaviour?

Thanks!

 

[corwin42]

This is the normal behavior. I haven't seen an app with a FAB that handles this differently or in the way you are expecting it.

 

[Dave O]

Checking with other apps, it looks like you're right. The FAB is supposed to disappear as you scroll down (presumably to get out of the way of someone skimming the list contents), and only reappears when they scroll back up (presumably looking for actions to do).

As a UX designer, I don't think this is good design (e.g. scroll down to look for something, find it's not there, then can't find the "add" button to add it), so I've disabled this feature (unattached the FAB from the list). Interesting that most apps I've tried (e.g. Gmail) also opt to detach it.

Thanks again!

 

[luke2012]

Hi @Dave O !
So you mean that is better to keep the FAB always visible in the same position also if the user scroll down ?
I say this for a usability reason ?

I see that the last version of GMAIL App keep the FAB button always visible and in the same position (fixed position) also when the user scroll down.

 

[Dave O]

I haven't done user testing to confirm this, but I think keeping the button visible at all times makes for an easier-to-use and predictable UI.

 

[johndb]

I haven't done user testing to confirm this, but I think keeping the button visible at all times makes for an easier-to-use and predictable UI.

I don't think that one can make a statement saying that a fixed FAB versus hiding the FAB when scrolling down is easier to use or not. It all depends upon the specific UI that actually works for an application. In my case, the auto-hide on scroll down is essential as I have a "more' action button on the right side in the list entries and the button would be obscured when you need to access the last visible entry of the list if the FAB wasn't hidden.

John

 

[trueboss323]

I am unfortunately having the Resources$NotFoundException: Resource ID #0x0 error at line Fab1.Icon = xml.GetDrawable("ic_add_white_24dp")

I followed exactly in your post and I even ran it from your ListView example but still the same error I have my additionalres set :

    #AdditionalRes: C:\Program Files (x86)\Anywhere Software\Basic4android\Libraries\b4a_floatingactionbutton, de.amberhome.objects.floatingactionbutton

 

[Computersmith64]

You need to put the drawable in the /res/drawables folder of your project.

- Colin.

 

[trueboss323]

I tried to copy to res/drawables and setting them to Read Only but same error. I also tried copying all the drawables and valves folder and pasted into my app's Object/res folder and it didn't help. I don't know what I'm doing wrong

 

[Claudio Oliveira]

Hi @trueboss323,
Looks like the file you're trying to get ("ic_add_white_24dp") is actually missing in the res/drawable/ folder.
Try putting it there and adding the following line to your code:

#AdditionalRes: ..\resource