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,725
  • FABListViewExample.zip
    9.6 KB · Views: 1,216
  • FABScrollViewExample.zip
    9.9 KB · Views: 1,163

luke2012

Well-Known Member
Licensed User
Longtime User
Ok, I can now reproduce it.

As a workaround for now you need to disable the shadow for KitKat devices.

Thanks for your workaround corwin42! It's in plan for a library update in order to fix the issue ?
 

corwin42

Expert
Licensed User
Longtime User
Hi @corwin42
i tested FAB library with appcompact and ClsCheckList by informatix
the problem same like @luke2012

View attachment 32450

and this example project.. i use appcompactmenu example project.
FAB+APPCOMP+CHKLIST.zip

Ok, this took me 4 hours of my life and I was going mad while searching for this issue.

I found the problem but I didn't understand it completely.
The problem is that in your project folder under Objects/res/drawable-xxx you have a shadow.png which is write protected. The FAB uses a drawable named shadow.png which is located in the FAB resource folder. My understanding was that if I add the resources with #AdditionalRes and a package name the library will always use the resource from the resource folder with the package name. Seems I was wrong.

Maybe Erel can clarify things here how #AdditionalRes works exactly. I will ask him.
 

luke2012

Well-Known Member
Licensed User
Longtime User
Ok, this took me 4 hours of my life and I was going mad while searching for this issue.

I found the problem but I didn't understand it completely.
The problem is that in your project folder under Objects/res/drawable-xxx you have a shadow.png which is write protected. The FAB uses a drawable named shadow.png which is located in the FAB resource folder. My understanding was that if I add the resources with #AdditionalRes and a package name the library will always use the resource from the resource folder with the package name. Seems I was wrong.

Maybe Erel can clarify things here how #AdditionalRes works exactly. I will ask him.

Probably also @Informatix that implemented clsChecklist class could help :)

In my projects I'm using also UltraListView class by @Informatix! I'll test FAB also on this class.
 

corwin42

Expert
Licensed User
Longtime User
@corwin42 where I can do this within the code of FAB ?
Thanks in advance!

There is no need for the workaround (though there is a shadow property in the fab object to disable the shadow).
The problem was a conflict with resources in the project.
 

luke2012

Well-Known Member
Licensed User
Longtime User
Ok, this took me 4 hours of my life and I was going mad while searching for this issue.

I found the problem but I didn't understand it completely.
The problem is that in your project folder under Objects/res/drawable-xxx you have a shadow.png which is write protected. The FAB uses a drawable named shadow.png which is located in the FAB resource folder. My understanding was that if I add the resources with #AdditionalRes and a package name the library will always use the resource from the resource folder with the package name. Seems I was wrong.

Maybe Erel can clarify things here how #AdditionalRes works exactly. I will ask him.

Yes @corwin42. I agree with you that the right person for this clarification is @Erel.
 

corwin42

Expert
Licensed User
Longtime User
Yes @corwin42. I agree with you that the right person for this clarification is @Erel.

We already have the solution and the answer is here.
In short words. It is expected behavior that library resources get overwritten by local resources. Maybe I will add a prefix to the libraries resources in a future version.
 

omidaghakhani1368

Well-Known Member
Licensed User
Longtime User
Hi.
Thank you for your library it is good but i cannot test it :)
it get error android.content.res.Resources$NotFoundException: Resource ID #0x0
What's problem?
 

Claudio Oliveira

Active Member
Licensed User
Longtime User
Hi @corwin42,

I'm trying to compile and test your FABListView sample project.

I've followed all the directions from post#1.
Lib files and res folder have been copied to the right places.
My "#AdditionalRes" statement is as follows:
B4X:
#AdditionalRes: D:\Documents and Settings\Claudio\Downloads\B4X\Basic4Android\AdditionalResources\b4a_floatingactionbutton, de.amberhome.objects.floatingactionbutton

Everything seems to be ok, but I always get this error:
B4X:
B4A version: 5.02 (1)
Parsing code.    (0.00s)
Compiling code.    (0.03s)
Compiling layouts code.    (0.00s)
Generating R file.    Error
invalid resource directory name: D:\Documents and Settings\Claudio\Downloads\B4X\Basic4Android\Samples\FABListView\resource\b4a_floatingactionbutton/drawable-xxxhdpi

My device is a Samsung Galaxy S4, with Android 5.0.1, and my desktop is a Windows 7 SP1.

Any ideas? :)

Thank you!
 

ArminKH

Well-Known Member
Hi @corwin42,

I'm trying to compile and test your FABListView sample project.

I've followed all the directions from post#1.
Lib files and res folder have been copied to the right places.
My "#AdditionalRes" statement is as follows:
B4X:
#AdditionalRes: D:\Documents and Settings\Claudio\Downloads\B4X\Basic4Android\AdditionalResources\b4a_floatingactionbutton, de.amberhome.objects.floatingactionbutton

Everything seems to be ok, but I always get this error:
B4X:
B4A version: 5.02 (1)
Parsing code.    (0.00s)
Compiling code.    (0.03s)
Compiling layouts code.    (0.00s)
Generating R file.    Error
invalid resource directory name: D:\Documents and Settings\Claudio\Downloads\B4X\Basic4Android\Samples\FABListView\resource\b4a_floatingactionbutton/drawable-xxxhdpi

My device is a Samsung Galaxy S4, with Android 5.0.1, and my desktop is a Windows 7 SP1.

Any ideas? :)

Thank you!
download attached zip file then unzip and move that inside your project like this
upload_2015-7-21_0-26-32.png

then add this code for use additional res(exactly this code)
B4X:
    #AdditionalRes: ..\CustomLibsRes\floatingactionbutton\res , de.amberhome.objects.floatingactionbutton
then compile your project
if still any error appared then you should update your build-tools to latest version from SDK Manager
upload_2015-7-21_0-30-41.png
 

Attachments

  • CustomLibsRes.zip
    53.4 KB · Views: 283
Last edited:

Claudio Oliveira

Active Member
Licensed User
Longtime User
Hi @arminkh
Thanks for your help!
I did exactly what you suggested. Libs in the right place, all Android SDK tools are up to date, everything looks fine but the error's still there.

B4X:
#Region  Activity Attributes 
    #FullScreen: False
    #IncludeTitle: True
    #AdditionalRes: ..\CustomLibsRes\floatingactionbutton\res, de.amberhome.objects.floatingactionbutton
#End Region

Something captured my attention, though. On the R file generating step, the compilation process inserts a forward slash ("/") in the directory name, and I just can't figure out why. This obviously raises a directory name error. It should be a backslash ("\") instead.

B4X:
B4A version: 5.02 (1)

Parsing code.    (0.00s)
Compiling code.    (0.05s)
Compiling layouts code.    (0.01s)
Generating R file.    Error
invalid resource directory name: ..\CustomLibsRes\floatingactionbutton\res/drawable-xxxhdpi

Maybe @Erel can shed some light on this...

Thanks again, mate!
 

Claudio Oliveira

Active Member
Licensed User
Longtime User
Solved!
Searching the forum, I've read some posts on the same subject. One of these says that only the last version of Android Build Tools should be installed.
As I had all Android Build Tools, I've deleted all but the latest version (22.0.1), and that's it.
Everything's up'n'running now.
 
Top