如何在 ExtendedFloatingActionButton 中添加矢量颜色图标 [重复]

Posted 2023-04-19

【中文标题】如何在 ExtendedFloatingActionButton 中添加矢量颜色图标 [重复]

【英文标题】：How to add an vector color icon in ExtendedFloatingActionButton [duplicate]

【发布时间】：2020-10-01 04:20:49

【问题描述】：

我正在尝试在 google material 的 ExtendedFloatingActionButton 中添加 颜色矢量 图标 但它在图标中显示黑色背景。

在布局预览时，它看起来不错，但在移动设备上运行时，它在图标附近显示黑色背景。

 <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
     android:id="@+id/floating_btn_take_test"
     android:layout_
     android:layout_
     android:layout_gravity="bottom|center"
     android:layout_marginBottom="@dimen/dimen_20dp"
     android:text="@string/txt_take_test"
     android:textColor="@color/primaryColor"
     app:backgroundTint="@color/color_white"
     app:elevation="@dimen/dimen_10dp"
     app:icon="@drawable/ic_color_icon"
     app:iconTintMode="add"
     app:layout_anchorGravity="bottom|center"
     app:rippleColor="@color/secondaryColor"
     app:shapeAppearanceOverlay="@style/ShapeAppearance_Button" />

<style name="ShapeAppearance_Button" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/dimen_10dp</item>
    <item name="android:layout_marginBottom">@dimen/dimen_30dp</item>
</style>

如何去除图标周围的黑色背景？

【问题讨论】：

你用的是AndroidX吗？

是的，我正在使用 androidx @ShaluTD

【参考方案1】：

请尝试使用app:tint，如下：-

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    style="@style/Widget.MaterialComponents.FloatingActionButton"
    android:layout_
    android:layout_
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="16dp"
    app:backgroundTint="@color/color_white"
    app:tint="@null"
    app:icon="@drawable/ic_color_icon"
/>

或

更改app:backgroundTint="@null"

【讨论】：

通过更改app:tint或app:backgroundTint="@null"解决？

应用解决：tint="@null"

【参考方案2】：

如果我理解正确，您是在尝试向 FAB 添加具有不同颜色的图标？

这样做时，请确保添加app:tint="@null"。 在您的情况下，xml 应该如下所示。

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
    android:id="@+id/floating_btn_take_test"
    android:layout_
    android:layout_
    android:layout_gravity="bottom|center"
    android:layout_marginBottom="@dimen/dimen_20dp"
    android:text="@string/txt_take_test"
    android:textColor="@color/primaryColor"
    app:backgroundTint="@color/color_white"
    app:elevation="@dimen/dimen_10dp"
    app:icon="@drawable/ic_color_icon"
    app:layout_anchorGravity="bottom|center"
    app:rippleColor="@color/secondaryColor"
    app:shapeAppearanceOverlay="@style/ShapeAppearance_Button"
    app:tint="@null" />

<style name="ShapeAppearance_Button" parent="ShapeAppearance.MaterialComponents.SmallComponent">
   <item name="cornerFamily">rounded</item>
   <item name="cornerSize">@dimen/dimen_10dp</item>
   <item name="android:layout_marginBottom">@dimen/dimen_30dp</item>
</style>