Floating Action Buttons

FABs (short for Floating Action Button) are very important to understand and can be a very useful tool to use in our apps. I will be talking about the basics of how they work and a couple of tips on when you should add a FAB into your app.

Types of FAB

Mini FAB - This FAB has a size of 40dp x 40dp and is used on smaller screens. You can change the FAB to mini by going to your attributes and looking for fabSize. There should be three options: normal, auto, and mini. The mini option always sets the FAB to the mini size, regardless of the screen size.

Normal FAB - This FAB has a size of 56dp x 56dp and is the default size of the FAB. To change the size to normal, go to fabSize and change it to normal. You can also choose the auto option which determines the screen size and whether the FAB size should be mini or normal.

Extended FAB- This FAB contains an icon, which is optional and it also includes a text label. To change the FAB size to extended, you need to go to the XML file. Go to the code section and change the FloatingActionButton to ExtendedFloatingActionButton.

Tips About FABs

Only include a FAB on your screen if it will perform an important action on the screen. You can also use FAB to convert into another full screen when pressed. If you do choose to include a FAB, try not to add more than one FABs on the same screen. If you are using a mini FAB or a normal FAB, use basic icons that are easy to understand what they mean, and do not use text. If you want to include text, you should use the extended FAB. Just make sure the text in the extended FAB is short and easy to understand. However, do not use an extended FAB if you are only planning to display an icon. The extended FAB should be placed either in the bottom right or the bottom center. You can also have the extended FAB width to match the parent if it is in the bottom center.