Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android.support.design.widget.FloatingActionButton implenetation of FAB reduces image size

So I have started migrating to the official support design library for an Android app of mine, replacing elements as I go. I just replaced an FAB (implemented as ImageButton) with official android.support.design.widget.FloatingActionButton. But the icon inside the button is smaller as compared to the one it was in ImageButton. What may have been a reason?

FloatingActionButton's implementation:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icon" />

Tried adding app:fabSize="normal but that didn't work, either.

This is how it looks after using FloatingActionButton:

enter image description here

And this is how it looked like while using it as a ImageButton:

enter image description here

like image 221
Basit Avatar asked Jul 07 '15 19:07

Basit


People also ask

How do you reduce the size of a floating action button?

By default, the floating action button in flutter is 56 logical pixels height and width. This is the normal size or non-mini size. If you add this property mini with a value true, it will create a smaller floating action button.

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). Save this answer.

Which library can you use to implement a FloatingActionButton?

Floating Action Button using Fab Option Library in Android.


2 Answers

Set scale type to android:scaleType="center"

like image 59
Maciek Avatar answered Sep 18 '22 16:09

Maciek


Just a guess since you haven't provided any details at all. The design library's FloatingActionButton has padding calculations which will shrink the icon if it is too large, whereas your ImageButton probably just centers the icon with no scaling at all. I'm guessing that you would not observe this behavior if you were using a correctly sized 24dp icon, like the ones you get from: https://www.google.com/design/icons/.

like image 23
tachyonflux Avatar answered Sep 21 '22 16:09

tachyonflux