调整浮动操作button(fab)的图标大小
新的浮动button应该是56dp x 56dp ,其中的图标应该是24dp x 24dp 。 所以图标和button之间的空间应该是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>
这是我得到的结果:
我使用了\ 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
如何使button内的图标大小 完全按照指导原则进行描述?
http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button
由于您的内容是24dp x 24dp,您应该使用24dp图标 。 然后在你的ImageButton中设置android:scaleType="center"
来避免自动resize。
在维度中进行此项input
<!--Floating action button--> <dimen name="design_fab_image_size" tools:override="true">36dp</dimen>
这里36dp是浮点button上的图标大小
devise准则定义了两种尺寸,除非有强烈的理由偏离使用,可以使用FloatingActionButton
组件的fabSize
XML属性来控制尺寸。
考虑指定使用app:fabSize="normal"
或app:fabSize="mini"
,例如:
<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" />
<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"/>
有了您的背景,我的设备上提供了下面的button结果(Nexus 7 2012)
在我看来很好。
由于FAB
与ImageView
类似,所以您可以使用scaleType
属性来更改图标大小,就像ImageView
一样。 FAB
默认scaleType
是fitCenter
。 您可以使用center
和centerInside
分别制作小图标和大图标。
scaleType
属性的所有值是 – center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY
和matrix
。
有关更多详细信息,请参阅https://developer.android.com/reference/android/widget/ImageView.ScaleType.html 。
如果你在晶圆厂的图标看起来很小,那么就制作fab width
和height
wrap_content
然后使用app:fabSize="mini|normal"
就好了。