背景可绘制不填充浮动操作按钮答案

【问题标题】：Background drawable does not fill floating action button背景可绘制不填充浮动操作按钮
【发布时间】：2018-11-20 04:39:44
【问题描述】：

我有 FAB 并试图将 drawable(round_drawable.xml) 填充到我的整个工厂，但 drawable 当前显示在左上角，如下所示，

我尝试了Setting src and background for FloatingActionButton 的解决方案，但它不起作用，添加了来自其他来源的大多数属性，但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>

【问题讨论】：

你的代码对我来说工作正常check screenshot
@NileshRathod 那么我的问题是什么？支持库？？还是别的什么？

标签： android android-drawable floating-action-button

【解决方案1】：

只需在 dimen.xml 文件中添加这一行

<dimen name="design_fab_image_size" tools:override="true">56dp</dimen>

注意： 56dp 是 FAB 按钮的默认大小

默认 - 56dp
迷你 - 40dp
custom - 您在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按钮的高度和宽度wrap_content并使用app:fabCustomSize="100dp"并将其用于您的dimens.xml <dimen name="design_fab_image_size" tools:override="true">100dp</dimen>。我相信它会起作用的
你创建了dimens文件吗？
是的，我已经创建了，但我必须设置 app:fabCustomSize="56dp" 才能让您的输出 100dp 看起来像这样 imgur.com/DWxqKyc
将其更改为 100dp，因为您的 fabCustomSize 为 100dp，请参阅我在回答中提供的示例。这正是您所需要的。

【解决方案2】：

您不必为 FAB 指定特定大小。而且它也不需要任何特定颜色的背景可绘制。它具有 fabSize 属性，您可以在其中传递预定义的尺寸，例如 mini(40dp)、normal(56dp)。而且，如果您想添加尺寸，请从可绘制的<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" />

它看起来像这样。希望对您有所帮助...

【讨论】：

@GeekDroid 那些我用来在相对布局的底部显示 FAB 的属性，所以如果你觉得没有帮助可以删除它们。它与您的可绘制位置有关。
是的，我知道我正在讨论并查看您的代码，但做得很快，无论如何我不得不讨论很多，最后我的问题解决了..您可以通过上面的 cmets 看看讨论如何帮助我..

【解决方案3】：

使用 androidX 更新了 2019 年的答案：

依赖：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>

输出：

【讨论】：

太棒了，如何更改浮动操作菜单的+和x的颜色？是否可以用任何图像/图标替换它？
创建时间很长，现在我没有这个代码，所以现在自己试试。我会检查并稍后通知您。
我试过了，但我做不到。无论如何，谢谢。

【解决方案4】：

我使用了这段代码，它成功了：

<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>

【讨论】：

【解决方案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>

FullImageFloatingButton 用于普通 FloatingButton，FullImageMiniFloatingButton 用于迷你 FloatingButton。

【讨论】：