背景可绘制不填充浮动操作按钮
Background drawable does not fill floating action button
我有 FAB 并尝试向我的整个 fab 填充可绘制对象 (round_drawable.xml),但可绘制对象当前显示在左上角,如此处所示,
我尝试了 的解决方案,但它没有用,添加了其他来源的大多数属性,但 scaleType, src, background
都没有用。
如何使用 round_drawable 填充 FAB?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="100dp"
android:layout_height="95dp"
android:scaleType="fitXY"
app:backgroundTint="@color/white"
android:src="@drawable/round_drawable"
android:backgroundTintMode="src_atop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
round_drawable.xml
@drawable/right
是右箭头的png图片。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="50dp"
android:shape="oval">
<corners android:radius="10dp" />
<gradient
android:angle="45"
android:endColor="#D425B5"
android:startColor="#EBF928" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<bitmap
android:gravity="center"
android:src="@drawable/right" />
</item>
</layer-list>
只需在你的dimen.xml
文件中添加这一行
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
注意: 56dp
是 FAB 按钮的默认大小
- 默认 - 56dp
- 迷你 - 40dp
- 自定义 - 您在
fabCustomSize
中指定的任何内容
提示: 使用 app:fabCustomSize
而不是为 FAB 按钮提供自定义高度宽度。
例子
在你的布局中
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/white"
<!--inmprtent-->
app:fabCustomSize="100dp"
android:src="@drawable/round_drawable"
android:backgroundTintMode="src_atop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
现在创建dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_image_size" tools:override="true">100dp</dimen>
</resources>
保持你的 round_drawable.xml
原样,你就可以开始了
结果
干杯..
您不必为 FAB.And 指定特定大小,它也不需要为任何特定颜色绘制背景。它具有属性 fabSize,您可以在其中传递预定义的尺寸,例如 mini(40dp)、normal(56dp)。而且,如果您想添加尺寸,请从 drawable <item>
标签中删除尺寸。该标签实际上使您的可绘制对象变小了。
检查此示例代码以创建图像居中的 Fab
<android.support.design.widget.FloatingActionButton
android:id="@+id/fbtn_addNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="@dimen/margin_16"
android:layout_marginRight="@dimen/margin_16"
app:srcCompat="@drawable/ic_add_white_28dp"
app:backgroundTint="@color/colorPrimary"
app:borderWidth="@dimen/margin_0"
app:elevation="@dimen/margin_8"
app:fabSize="normal"
android:visibility="visible"
app:pressedTranslationZ="@dimen/margin_5" />
它看起来像这样。希望对你有帮助...
只需在你的style.xml文件中添加这一行
<style name="FullImageFloatingButton" parent="Widget.Design.FloatingActionButton">
<item name="fabSize">normal</item>
<item name="maxImageSize">56dp</item>
</style>
<style name="FullImageMiniFloatingButton" parent="Widget.Design.FloatingActionButton">
<item name="fabSize">mini</item>
<item name="maxImageSize">40dp</item>
</style>
对普通 FloatingButton 使用 FullImageFloatingButton,对迷你 FloatingButton 使用 FullImageMiniFloatingButton。
2019 年使用 androidX 的更新答案:
依赖性:implementation 'com.getbase:floatingactionbutton:1.10.1'
XML:
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="@dimen/fab_margin"
android:layout_marginBottom="20dp"
app:fab_addButtonColorNormal="@color/colorPrimaryDark"
app:fab_addButtonColorPressed="@color/colorPrimaryDark"
app:fab_colorPressed="@color/colorPrimaryDark"
app:fab_labelStyle="@style/menu_labels_style">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_langauge_translation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_language_icon"
app:fab_size="normal"
android:paddingBottom="15dp"
app:fab_colorNormal="@color/colorPrimaryDark"
app:fab_colorPressed="@color/colorPrimaryDark"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_facebook_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_fb_icon"
app:fab_size="normal"
android:paddingBottom="15dp"
app:fab_colorNormal="#0184FF"
app:fab_colorPressed="#0184FF"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_whats_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_whatsapp_icon"
app:fab_colorNormal="#4EC248"
android:paddingBottom="15dp"
app:fab_size="normal"
app:fab_colorPressed="#4EC248"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_email_icon"
app:fab_colorNormal="#848484"
android:paddingBottom="15dp"
app:fab_colorPressed="#848484"
app:fab_size="normal"
app:fab_title="" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
输出:
我使用了这段代码并且有效:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_add"
android:scaleType="center"
android:backgroundTint="@android:color/transparent"
android:outlineAmbientShadowColor="@android:color/transparent"
android:outlineSpotShadowColor="@android:color/transparent"
/>
并在 dimens.xml 文件中:
<dimen name="design_fab_image_size" tools:override="true">40dp</dimen>
我有 FAB 并尝试向我的整个 fab 填充可绘制对象 (round_drawable.xml),但可绘制对象当前显示在左上角,如此处所示,
我尝试了 scaleType, src, background
都没有用。
如何使用 round_drawable 填充 FAB?
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="100dp"
android:layout_height="95dp"
android:scaleType="fitXY"
app:backgroundTint="@color/white"
android:src="@drawable/round_drawable"
android:backgroundTintMode="src_atop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
round_drawable.xml
@drawable/right
是右箭头的png图片。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="50dp"
android:shape="oval">
<corners android:radius="10dp" />
<gradient
android:angle="45"
android:endColor="#D425B5"
android:startColor="#EBF928" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp">
<bitmap
android:gravity="center"
android:src="@drawable/right" />
</item>
</layer-list>
只需在你的dimen.xml
文件中添加这一行
<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>
注意: 56dp
是 FAB 按钮的默认大小
- 默认 - 56dp
- 迷你 - 40dp
- 自定义 - 您在
fabCustomSize
中指定的任何内容
提示: 使用 app:fabCustomSize
而不是为 FAB 按钮提供自定义高度宽度。
例子
在你的布局中
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/white"
<!--inmprtent-->
app:fabCustomSize="100dp"
android:src="@drawable/round_drawable"
android:backgroundTintMode="src_atop"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
现在创建dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen name="design_fab_image_size" tools:override="true">100dp</dimen>
</resources>
保持你的 round_drawable.xml
原样,你就可以开始了
结果
干杯..
您不必为 FAB.And 指定特定大小,它也不需要为任何特定颜色绘制背景。它具有属性 fabSize,您可以在其中传递预定义的尺寸,例如 mini(40dp)、normal(56dp)。而且,如果您想添加尺寸,请从 drawable <item>
标签中删除尺寸。该标签实际上使您的可绘制对象变小了。
检查此示例代码以创建图像居中的 Fab
<android.support.design.widget.FloatingActionButton
android:id="@+id/fbtn_addNotification"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="@dimen/margin_16"
android:layout_marginRight="@dimen/margin_16"
app:srcCompat="@drawable/ic_add_white_28dp"
app:backgroundTint="@color/colorPrimary"
app:borderWidth="@dimen/margin_0"
app:elevation="@dimen/margin_8"
app:fabSize="normal"
android:visibility="visible"
app:pressedTranslationZ="@dimen/margin_5" />
它看起来像这样。希望对你有帮助...
只需在你的style.xml文件中添加这一行
<style name="FullImageFloatingButton" parent="Widget.Design.FloatingActionButton">
<item name="fabSize">normal</item>
<item name="maxImageSize">56dp</item>
</style>
<style name="FullImageMiniFloatingButton" parent="Widget.Design.FloatingActionButton">
<item name="fabSize">mini</item>
<item name="maxImageSize">40dp</item>
</style>
对普通 FloatingButton 使用 FullImageFloatingButton,对迷你 FloatingButton 使用 FullImageMiniFloatingButton。
2019 年使用 androidX 的更新答案:
依赖性:implementation 'com.getbase:floatingactionbutton:1.10.1'
XML:
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="@dimen/fab_margin"
android:layout_marginBottom="20dp"
app:fab_addButtonColorNormal="@color/colorPrimaryDark"
app:fab_addButtonColorPressed="@color/colorPrimaryDark"
app:fab_colorPressed="@color/colorPrimaryDark"
app:fab_labelStyle="@style/menu_labels_style">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_langauge_translation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_language_icon"
app:fab_size="normal"
android:paddingBottom="15dp"
app:fab_colorNormal="@color/colorPrimaryDark"
app:fab_colorPressed="@color/colorPrimaryDark"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_facebook_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_fb_icon"
app:fab_size="normal"
android:paddingBottom="15dp"
app:fab_colorNormal="#0184FF"
app:fab_colorPressed="#0184FF"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_whats_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_whatsapp_icon"
app:fab_colorNormal="#4EC248"
android:paddingBottom="15dp"
app:fab_size="normal"
app:fab_colorPressed="#4EC248"
app:fab_title="" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/btn_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_email_icon"
app:fab_colorNormal="#848484"
android:paddingBottom="15dp"
app:fab_colorPressed="#848484"
app:fab_size="normal"
app:fab_title="" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
输出:
我使用了这段代码并且有效:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/add"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_add"
android:scaleType="center"
android:backgroundTint="@android:color/transparent"
android:outlineAmbientShadowColor="@android:color/transparent"
android:outlineSpotShadowColor="@android:color/transparent"
/>
并在 dimens.xml 文件中:
<dimen name="design_fab_image_size" tools:override="true">40dp</dimen>