[Free] FAB Extension - Material UI Feature

material
fab
button
floating
action

#1

Hello Friends, we are here with the most-awaited and coolest extension for Thunkable and App Inventor.

Co-created by @Sander0542

Download Extension: FAB.aix (15.8 KB) Version: 2

Extension Information http://www.sanderjochems.nl/appinventor/extension/4/floatingactionbutton


Screenshots of Apps with FAB


Designer Properties


How to Use Blocks?

  • For Apps with one FAB

  • For Apps with multiple FAB
  1. Drag as many as FAB you want to the screen.

  2. Set every FAB’s Margin properties according to your needs.

  3. Set up block for FAB as shown below.

NOTE: If you set Visible property to false, the Click & Long Click events will stop trigerring.


How to Create Icons for FAB?

To create follow the steps:

  1. Go to Android Asset Studio
  2. Choose a Image/Clipart/Text
  3. Set Asset Size to 24dp
  4. Set Asset Padding to 8dp (You can adjust it according to your needs)
  5. Choose Color
  6. Right-click on the generated image and choose “Save image as…

OR

If you use Photoshop or such software to create your own images, set some padding to it, for eg, 25% and export it as PNG file of dimensions 96x96 pixels or less. (must be square)

Images high in resolution and with zero padding may go outside the FAB. Perhaps you don’t want that.


Floating Labels
FB Floating Button
Is There Any Limitation to the Amount of Files We Can Upload to Thunkable?
Thunkable Twitter Chat!
#2

Amazing work :clap::clap::clap:

It’s one of the best extensions for AppInventor :+1:
Lots of people wanted a FAB on his app, so now they will use this cool extension. Congrats :tada:


#3

FABolus Team Work!. Sanders and Pavi. You both have made it possible with your great technical skills. Congratulations to you as this is going to be part of Thunkable Dev System soon!. This is a Great achievement. Keep up the good work!


#4

Awesome work ! :clap: :ok_hand: Thanks for your efforts…
This would be very useful and included in almost all the apps !


#6

excelente trabajo Gracias

muchas gracias


#7

Please do share your apps here if you used this extension in your apps. We will be happy to see them.

OR if you post your app in #SuccessfullyTHUNKd section, please tag “fab” on that topic to show your support.


#8

Awesome extension @pavi2410 and @Sander0542 keep thunking


#9

We don’t need a refresh to change FAB color and icon, we can change it dynamically.


#10

The Create block automatically sets IsCreated & Visible properties to true. So, set Visible property only after the Create block.


#11

What type of unit, do you use for Margin right/bottom? dp/percent/px?


#12

Everything is done in dp (A unit of Screen Sizing used in Android). You can convert pixels to dp using ScreenTools, PhoneInfo, SpecialTools and Tools extensions to get density and then use the formula from here

https://pixplicity.com/dp-px-converter/


#13

pueden poner que no sea una imagen si no un carácter


#14

To center the FAB horizontally,
set FAB1.MarginRight to Screen1.Width * 0.4

I found this experimentally


#15

I know what is dp :slight_smile:. Good then! By the way: any progress on mine BatteryManager extension?


#16

I was actually writing that before you asked.

Not yet, will work after some bug fixes if we find them.


#17

I didn’t understand what exactly it is

Can put that it is not an image but a character


#18

insert font http://fontawesome.io/whats-new/


#19

@Andres_Cotes Si que puedes:

A la hora de crear la imagen, clica en Text y en vez de exportar un icono exportarás un texto
Pero se descargara en una imagen y lo tienes que importar a assets como imagen, la seleccionas y ya tienes tu texto como imagen en el FAB


#20

Sorry, but we don’t have any plans to put text on FAB. There will many complications.


#21

We have plans for huge FAB size for huge devices. What do you think?