Adjust icon size of Floating action button fab

Question

The new floating action button should be 56dp x 56dp and the icon inside it should be 24dp x 24dp  So the space between icon and button should be 16dp    lt ImageButton     android id    id fab add      android layout width  56dp      android layout height  56dp      android layout gravity  bottom right      android layout marginBottom  16dp      android layout marginRight  16dp      android background   drawable ripple oval      android elevation  8dp      android src   drawable ic add black 48dp    gt    ripple oval xml        lt ripple xmlns android  http   schemas android com apk res android      android color   android colorControlHighlight  gt       lt item gt           lt shape android shape  oval  gt               lt solid android color   android colorAccent    gt           lt  shape gt       lt  item gt   lt  ripple gt    And this is the result I get     I used the icon from  material-design-icons-1 0 0 content drawable-hdpi ic add black 48dp png  https   github com google material-design-icons releases tag 1 0 1  How to make the size of the icon inside the button be exactly as described in guidelines    http   www google com design spec components buttons html buttons-floating-action-button

User · Answer

If you are using androidx 1 0 0 and are using a custom fab size  you will have to specify the custom size using   app fabCustomSize  your custom size in dp    By deafult the size is 56dp and there is another variation that is the small sized fab which is 40dp  if you are using anything you will have to specify it for the padding to be calculated correctly

User · Answer

lt ImageButton         android background   drawable action button bg          android layout width  56dp          android layout height  56dp          android padding  16dp          android src   drawable ic add black 48dp          android scaleType  fitXY          android elevation  8dp   gt    With the background you provided it results in below button on my device  Nexus 7 2012      Looks good to me

User · Answer

You can play with the following settings of FloatingActionButton   android scaleType and app maxImageSize  As for me  I ve got a desirable result if android scaleType  centerInside  and app maxImageSize  56dp

User · Answer

There are three key XML attributes for custom FABs    app fabSize  Either  mini   40dp    normal  56dp  default   or  auto  app fabCustomSize  This will decide the overall FAB size  app maxImageSize  This will decide the icon size      Example   app fabCustomSize  64dp   app maxImageSize  32dp    The FAB padding  the space between the icon and the background circle  aka ripple  is calculated implicitly by   4-edge padding    fabCustomSize - maxImageSize    2 0   16     Note that the margins of the fab can be set by the usual android margin xml tag properties

User · Answer

off of  IRadha s answer in vector drawable setting android height   dp  and setting the scale type to android scaleType  center  sets the drawable to whatever size was set

User · Answer

You can use iconSize like this      floatingActionButton  FloatingActionButton        onPressed                  Add your onPressed code here                child  IconButton          icon  isPlaying               Icon                  Icons pause circle outline                                Icon                  Icons play circle outline                                 iconSize  40                         onPressed                 setState                  isPlaying    isPlaying

User · Answer

The design guidelines defines two sizes and unless there is a strong reason to deviate from using either  the size can be controlled with the fabSize XML attribute of the FloatingActionButton component   Consider specifying using either app fabSize  normal  or app fabSize  mini   e g     lt android support design widget FloatingActionButton    android layout width  wrap content     android layout height  wrap content     android src   drawable ic done white 24px     app fabSize  mini    gt

User · Answer

As FAB is like ImageView so You can use scaleType attribute to change the icon size likewise ImageView  Default scaleType for a FAB is fitCenter  You can use center and centerInside to make icon small and large respectively    All values for scaleType attribute are - center  centerCrop  centerInside  fitCenter  fitEnd  fitStart  fitXY and matrix    See https   developer android com reference android widget ImageView ScaleType html for more details

User · Answer

What s your goal   If set icon image size to bigger one    Make sure to have a bigger image size than your target size  so you can set max image size for your icon  My target icon image size is 84dp  amp  fab size is 112dp    lt android support design widget FloatingActionButton     android layout width  wrap content      android layout height  wrap content      android layout gravity  center      android src   lt image here gt      app fabCustomSize  112dp      app fabSize  auto      app maxImageSize  84dp    gt

User · Answer

Try to use app maxImageSize  56dp  instead of the above answers after you update your support library to v28 0 0

User · Answer

Make this entry in dimens   lt  --Floating action button-- gt   lt dimen name  design fab image size  tools override  true  gt 36dp lt  dimen gt    Here 36dp is icon size on floating point button  This will set 36dp size for all icons for floating action button   Updates As Per Comments  If you want to set icon size to particular Floating Action Button just go with Floating action button attributes like app fabSize  normal  and android scaleType  center       lt  --app fabSize decides size of floating action button You can use normal  auto or mini as per need-- gt    app fabSize  normal       lt  --android scaleType decides how the icon drawable will be scaled on Floating action button  You can use center to show scr image as original   fitXY  centerCrop  fitCenter  fitEnd  fitStart  centerInside -- gt    android scaleType  center

User · Answer

As your content is 24dp x 24dp you should use 24dp icon  And then set android scaleType  center  in your ImageButton to avoid auto resize

[android] Adjust icon size of Floating action button (fab)

Examples related to android

Examples related to material-design

Examples related to floating-action-button

Examples related to material-components-android

Examples related to android-icons