Problems with Floating Action Buttons (FAB) and content interference

android
button
bugs
fab
extension

#1

Hi there Thunkers,

I am just creating an app with thunkable and for the user navigation I wanted to use Floating Action Buttons (FAB) since it is an easy 3-step app.

So far I had no problems to implement them but after compiling the first versions of the app and a few tests I realized that there are problems with the floating buttons… They often do not immediately react when pressed and in my app, one is located above a google map which is set to react to touch with adding a marker at the touch position.

When a user tries to tap the “continue” FAB, often the map will respond instead of the button… This problem appears in the live preview as well as in the compiled app… I also tried the FAB extension from Sander Jochens (https://www.sanderjochems.com/appinventor/extension/4/floatingactionbutton) and they would always react as expected (no interference with the content underneath as well)but I don’t want to use this extension because it only supports png and it’s hard to get the right size, not easy to replace and the icons end up pixelated on High-Res Devices…

Is there a solution or is this a bug which can / will be fixed by thunkable? Oh before I forget: I tested the compiled app on Android 7 and 8 - same problem on both devices.


Floating Action Button error
Extreme placement errors in thunkable
Current Bugs / Problems with Thunkable
#2

Can’t help you with your problem, but nice looking app you are making. Can you tell me what it’s for?


#3

Hey,

in Vienna there’s a charitable hotline to report homeless people sleeping outdoors in winter time to prevent death from cold. You can call them or email them and streetworkers will visit the homeless people, offer to sleep in emergency shelters or handout sleeping bags / warm clothing so they don’t become hypothermic.

When I once called them myself, I realized that it was hard to describe the exact location on the phone… Also I thought to myself that having to personally call them or using your own email address may be a inhibition threshold for some people.

That’s why I decided to create an easy to use app that shows your position on the map, lets you easily mark the position of the homeless person and asks the relevant information for the street workers. All the information is packed into a web request that triggers IFTTT to send an email with the information provided and also contains a link to show the exact position on Google Maps.

best regards,
Chris


#4

Wow that is such a great idea for an app. I am a healthworker in the Netherlands where i work with people with a heroin and/or methadon addiction. Some of my clients are living on the streets. I was thinking maybe this could be helpfull in the city where i work or maybe my organization would be interested. Would you be willing to share your aia? Maybe by sending it privatly?


#5

How can I give you 1000 likes???

Seriously though, this is a great idea!
This app could really make a change for some people :smiley:

Im afraid I can’t help you either, but props to you for making this app :smiley:


#6

I can share it but first I’d like to eliminate the problems concerning the FAB behaviour and optimize some parts. I think I should add some comments as well :wink: I hope somebody from Thunkable is able to fix the problems or help me sorting it out…


#7

Servus nach Wien! Wir könnten die App hier in Berlin auch gut gebrauchen! Looks nice too


#8

That’s great. i think you are on to something special here. Great work :+1:


#9

does seriously NOBODY at thunkable care about a serious bug like this in their software?! I mean not even a “hey, we’re investigating this, please be patient…” within 5 days in the #androidbugs section? Does not seem that they care very much…

I’d love to publish and share my app but as long as it’s not even working proper due to thunkable fails I can’t… :frowning: :roll_eyes:


#10

Hi @gre4t_wh1te,

Apologies for the poor resolution of the GIF below, but I can’t seem to reproduce the error you are reporting. In my example app the map responds quickly to map clicks (green title bar) and FAB clicks (blue title bar). I can’t really detect any delay in the responsiveness of the FAB either to be honest, and hopefully you can see from the dots I have tried to click as close to the edges of the FAB as possible and there doesn’t seem to be any difficulty in distinguishing between the two. Tested on Android 7.1 and also in the Live Testing app v.3.28

Here are the blocks I went for (i.e. I’m using the built in FAB)

Looking forward to finding a resolution to this - your app sounds like an amazing idea and would definitely benefit people all over the world.


#11

Ok, here’s v2, with blocks, source code and animated GIF, in my tests it’s really responsive and it can even detect if the small space in between the FABs is being pressed. I’d like to hear feedback from other users on their experience too though.

Here are the blocks I used for the toggle FAB:

Here’s the .aia
my_fab_map.aia (3.5 KB)

And here’s my dimensioned (but not to scale :joy:) layout


#12

Hey,

first of all thank you very much for your reply.

I tried your demo app and it worked fine in the companion app… But when I compiled the APK I experienced the same issues as I did with my app. Find the gif attached below:

I also had FAB reaction problems without map in the background in my app but it seems to happen even more often if you click the map and the FAB afterwards… I had the issue on my Android 8.0.0 (Android One stock version) and also on a friends Huawei P10 Lite with Android 7.1

First I did not even realize the issue because I was mainly testing the app on my device via companion app… My friend who I asked to test the APK told me he had issues touching the FAB and when I investigated the issue I could reproduce it on my device…

cheers, Chris


#13

Very strange…In your video I can see 1 or maybe 2 clicks where it says map when you were clicking on the edge of the FAB, but not the other way around, is that correct?

I’ve installed it on two different One+ devices and an old Samsung and have no problems, perhaps some more community members can test to see how it works for them?

Just out of curiosity, did you try my example without the pointer location setting enabled?


#14

Yes there are 2-3 clickt on the button where it says the map was clicked. I just made another test and it seems that it doesn’t matter if you tap the map first and it also happens if you tap the button in the center… It just seems that - for whatever reason - the FAB is sometimes unresponsive…

and yes - the problem also appeared without the touch overlay.


#15

@Domhnall any updates on this? I also realized that it does not matter how fast you tap the FAB even if you will slowly continue to tap it there will be a few times it won’t respond to the touch but the touch is recognized on what’s behind (like the map in your example).

I’d really like to release my app as long as it is still relevant (this winter) so I’d really appreciate if we could solve the issue soon…


#16

I modified @Domhnall’s aia and added a button to check if it has the same problems. Unfortunately I could not reproduce the issue in Live development and after installing the app. Tested with 1st Gen Moto E running on Android 5.1
my_fab_map.apk (3,0 MB)


#17

That’s interesting… I could reproduce the issue also on Android Emulator with different settings (Android OS, API, Screen resolution / density)… Same problem occurred as on the real devices I’ve tested… Though it did not seem to happen that often on 5.1 as it did on versions 7.0 and 8.0

shared Google Photo Album with the recordings

I also tried @Red_Panda s version and the same error appears… It does not seem to correlate with the map or the speed you tap the fab… but for whatever reason the FAB seems to be unresponsive at certain times… I also experienced the problem in my APK when no item was placed unterneath the FAB – sometimes you would have to tap it twice to make it work…


#18

Any progress on getting your app working correct with the FAB? I am still very interested in the aia.


#19

hey,

no unfortunately it does not seem like Thunkable fixed the problems. Did not hear back from them for some time…

I think I’ll finish the app with a paid extension but that means I cannot share :roll_eyes:


#20

I would really like if i can transform it to a version that works in the Netherlands. Would it be a problem if i got your aia and try to get it working on my side? You could send it privatly. I don’t mind that the fab doesn’t work. Maybe i can change the ui a bit to make it work everywhere.