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

corwin42 · Jul 19, 2016

Anser said:
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.

Erel · Jul 19, 2016

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

Anser · Jul 19, 2016

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

corwin42 · Jul 19, 2016

Erel said:
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 · Jul 19, 2016

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 · Dec 21, 2016

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 · Dec 21, 2016

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 · Dec 21, 2016

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 · Dec 22, 2016

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 · Dec 22, 2016

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

Dave O said:
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 · Sep 14, 2017

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 · Sep 14, 2017

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

- Colin.

trueboss323 · Sep 14, 2017

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 · Sep 14, 2017

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

B4A Library Floating Action Button

Attachments

corwin42

Expert

Erel

B4X founder

Anser

Well-Known Member

corwin42

Expert

Erel

B4X founder

Dave O

Well-Known Member

corwin42

Expert

Dave O

Well-Known Member

luke2012

Well-Known Member

Dave O

Well-Known Member

johndb

Active Member

trueboss323

Active Member

Computersmith64

Well-Known Member

trueboss323

Active Member

Claudio Oliveira

Active Member

Similar Threads

B4A Library Floating Action Button

Attachments

Expert

B4X founder

Well-Known Member

Expert

B4X founder

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Active Member

Active Member

Well-Known Member

Active Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency