vovahost vovahost - 5 months ago 726
Android Question

Adjust icon size of Floating action button (fab)

Floating button
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:

Floating button result

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

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.

Comments