Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android: How to change size of app:fabSize="normal" for Floating Action Button

When using the new FloatingActionButton, the size is determined by app:fabSize="normal". How can I set what in dp is the size referenced by "normal"?

I tried to create values/attrs.xml:

<?xml version="1.0" encoding="utf-8"?> <resources>     <declare-styleable name="app">         <attr name="fabSize">             <enum name="mini" value="50dp" />             <enum name="normal" value="100dp" />         </attr>     </declare-styleable> </resources> 

But I get the error

"normal" in attribute "fabSize" is not a valid integer 
like image 488
michael Avatar asked Oct 01 '15 08:10

michael


People also ask

How do I fill the floating action button image?

The solution is app:maxImageSize = "56dp" property set to your FAB. Have an image or vector asset, preferably in perfect circle shape and perfectly fit to canvass (no empty margins). Know the actual size of Floating Action Bar (FAB) - Default (56 x 56dp) or Mini (40 x 40dp).


2 Answers

There are two different sizes of FAB available: normal or mini

  1. Normal (56dp) — This size should be used in most situations.

  2. Mini (40dp) — Should only be used when there is a need for visual continuity with other components displayed on the screen.

like image 120
Hoshouns Avatar answered Oct 08 '22 20:10

Hoshouns


You can override the normal and mini sizes by adding the following to values/dimens.xml:

<!-- Overriding sizes of the FAB -->   <dimen name="design_fab_size_normal">90dp</dimen>   <dimen name="design_fab_size_mini">30dp</dimen> 

The tricky thing would be if you need more than 2 fab sizes, in that case i guess you need to create a custom view extending the fab.

like image 27
Javier Mendonça Avatar answered Oct 08 '22 19:10

Javier Mendonça