Adjust icon size of Floating action button (fab)
Solution 1
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.
Solution 2
Try to use app:maxImageSize="56dp"
instead of the above answers after you update your support library to v28.0.0
Solution 3
Make this entry in dimens
<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>
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".
<!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need-->
app:fabSize="normal"
<!--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.-->
android:scaleType="center"
Solution 4
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.
Solution 5
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.:
<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" />
Related videos on Youtube
vovahost
If you ever need to edit a SQLite database on Android then use the app I built: SqlitePrime. You can use the built-in SQL Editor, view and edit fields, create Tables, view DDL for Tables, Views, Indices, Triggers. It also has support for editing the Blob data type. You can also edit app's databases (Root needed) https://forum.xda-developers.com/android/apps-games/app-sqliteprime-database-manager-root-t3684598 Apparently it was removed from Google Play Store because it uses the Play services and requires a Privacy policy. The app can be downloaded from here https://sqlite-prime.en.aptoide.com/ until I find time to make it GDPR compliant. TODO: Migrate Sqlite Prime app entirely to Kotlin with MVVM and Open source it (I'm planning to do this when I find a bit more free time).
Updated on October 01, 2021Comments
-
vovahost over 2 years
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.
<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" />
ripple_oval.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> </ripple>
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.1How 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
-
InsaneCat over 4 yearsPossible duplicate of : stackoverflow.com/a/59455009/3974530
-
-
vovahost over 9 yearsI set the padding but it does nothing. And the right padding would be 16 dp not 32dp
-
vovahost over 9 yearsCan you explain or drop a link to some site, why for example in drawable-hdpi folder there are _18dp.png, _24dp.png, _36dp.png, _48dp.png images.
-
Gaëtan Maisse over 9 yearsI don't understand your question, there are 18dp, 24dp, 36dp and 48dp for different size images.
-
vovahost over 9 yearsDo you remember the old Android_Design_Icons which had only one variant of the icon in hdpi folder which was 48px x 48px. Why now in hdpi folder there are 4 different resolution for the same icon i.e. 27px x 27 px, 36px x 36px, 54px x 54px, 72px x 72px ?
-
Gaëtan Maisse over 9 yearsyep I remember but I can't explain why these new icons are in multiple sizes... (to get them super clean when they are used ?). Hope someone has an answer to that
-
vovahost over 9 yearsIs android:scaleType applicable to an ImageButton because I don't get any suggestions when I use CTRL+SPACE. Without that tag it gives the same effect. Maybe for ImageButton android:scaleType is set by default to center
-
Gaëtan Maisse over 9 yearsImageButton is a subclass of ImageView so you have a scaleType attribut and default scaleType is ScaleType.FIT_CENTER
-
vovahost over 9 yearsThen I will not change it. I think the default value ScaleType.FIT_CENTER is safer to use for an ImageButton.
-
Abhishek over 7 yearsYes. It doesn't work with github.com/Clans/FloatingActionButton. It works when you are using androids FloatingActionButton
-
Lakhwinder Singh Dhillon about 7 yearsandroid:scaleType="center" android:scaleType="centerCrop" are settings work on almost all views
-
StarWind0 over 6 yearsYeaaaah but I don't Want to do it across the app!
-
Abhishek over 6 years@StarWind0 I you have to use fabSize and scaleType attributes if want to apply for single floating action button. I have updated my answer.
-
StarWind0 almost 6 yearsNo longer works with com.android.support:support-v4:28.0.0-rc01
-
Khemraj Sharma over 5 yearsAny ways, you don't get this in 28.0.0 version, you will get it in androidx.
-
Robin over 5 yearsI haven't switched to AndroidX, this is what I am using: api 'com.android.support:design:28.0.0'
-
Aloha over 5 yearsThis is exactly what I was looking for! You don't even need to set
layout_width
andlayout_height
. It just works. This is also available oncom.android.support:design:28.0.0
-
stramin almost 5 yearsThis worked for me but I would like more information to understand why defining a
maxIconSize
changes the icon size. -
Chitrang over 3 yearsCan you please tell me how to set maxImageSize programmatically? I couldn't find the answer.
-
Chitrang over 3 yearsCan you please tell me how to set maxImageSize programmatically? I couldn't find the answer.
-
varun over 3 years@Chitrang According to the API documentation, there are no public methods to set the FAB's "maxImageSize". However, there is a "setCustomSize" method... See if it works out for you. In the worst case, you need to create a new FAB view and append it into your layout... since there is no way to dynamically set attributes in XML without the view's setter method.
-
Akash Bisariya about 3 yearsmaxImageSize worked for me for showing full drawable in floating button.
-
Sertan over 2 yearsid and srcCompat I prefer that you adjust these parts according to yourself.
-
Admin over 2 yearsYour answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-
neo over 2 yearsit works for me. thanks