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,724
  • FABListViewExample.zip
    9.6 KB · Views: 1,215
  • FABScrollViewExample.zip
    9.9 KB · Views: 1,160

corwin42

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

B4X:
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.
 

Anser

Well-Known Member
Licensed User
Longtime User
With the above suggested change, It is working fine now with CustomListView
 

corwin42

Expert
Licensed User
Longtime User
Note that the SubExists line is not required. Nothing will happen if there is no such sub.
I'm a careful person. :rolleyes:

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

Dave O

Well-Known Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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

Active Member
Licensed User
Longtime User
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 :
B4X:
    #AdditionalRes: C:\Program Files (x86)\Anywhere Software\Basic4android\Libraries\b4a_floatingactionbutton, de.amberhome.objects.floatingactionbutton
 

Computersmith64

Well-Known Member
Licensed User
Longtime User
You need to put the drawable in the /res/drawables folder of your project.

- Colin.
 

trueboss323

Active Member
Licensed User
Longtime User
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

Untitled.png
 

Claudio Oliveira

Active Member
Licensed User
Longtime User
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:
B4X:
#AdditionalRes: ..\resource
 
Top