自定义 Android 按钮图像周围的红色圆圈答案

【问题标题】：Red Circle Around Custom Android Button Image自定义 Android 按钮图像周围的红色圆圈
【发布时间】：2018-04-27 06:01:34
【问题描述】：

我创建了一个浮动操作按钮，并制作了自己的图像（每种 dpi 尺寸），但它周围有一个红色圆圈（下图）。这是我定义按钮的 xml

<android.support.design.widget.FloatingActionButton
android:id="@+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:src="@mipmap/add_plant"/>

这是我的源图像 (@192x192)，以及我在 android studio 中看到的屏幕截图。

【问题讨论】：

标签： android xml image android-layout android-studio

【解决方案1】：

你可以试试下面的-

   <android.support.design.widget.FloatingActionButton
    ...
    ...
    android:src="@drawable/icon" // change backgroung icon
    app:backgroundTint="@android:color/transparent" // change background color
    />

将色调设置为透明将覆盖您在样式中指定的粉红色原色。

【讨论】：

【解决方案2】：

尝试使用 XML 属性 app:backgroundTint

<android.support.design.widget.FloatingActionButton
        android:id="@+id/addplant"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        app:backgroundTint="@color/orange" // -----> your background color
        android:src="@mipmap/add_plant" />

【讨论】：

【解决方案3】：

编辑 2

无需使用app:backgroundTint，只需在您的FloatingActionButton 中使用 android:scaleType="center" 即可

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addplant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:scaleType="center"
    android:src="@mipmap/add_plant" />

输出

试试这个

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addplant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/add_plant"/>

android:src="@drawable/add_plant"

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

输出

编辑

要支持 vector drawablea，请将其添加到您的 build.gradle 文件中

defaultConfig {
        vectorDrawables.useSupportLibrary = true
 }

【讨论】：

你建议使用矢量图而不是drawable？
谢谢，你的第二次编辑修复了它。看起来很棒！ :)

【解决方案4】：

使用这个

app:useCompatPadding="true"

【讨论】：

这不起作用，它只是扩大了按钮的边框。

【解决方案5】：

只需单独使用 + 符号作为来源。您无需通过绿色背景的整个图像。要设置绿色背景颜色，请使用app:backgroundTint="@color/green"

像这样更改您的代码并使用绿色作为 backgroundTint 和加号图标作为源：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:backgroundTint="@color/green"
    android:src="@drawable/ic_plus" />

【讨论】：

【解决方案6】：

你可以使用背景颜色

app:backgroundTint="@color/green"

去除图片背景色，使用无背景图片https://cdn.pixabay.com/photo/2016/10/10/01/49/plus-1727487__340.png

<android.support.design.widget.FloatingActionButton
    android:id="@+id/addplant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    app:backgroundTint="@color/green"
    android:src="@mipmap/add_plant"/>

【讨论】：

【解决方案7】：

因为浮动操作按钮由theme 中的 colorAccent 属性着色。您可以将背景色调设置为绿色。我已经更新了你的代码。

<android.support.design.widget.FloatingActionButton
android:id="@+id/addplant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:backgroundTint="#4CAF50"
android:src="@mipmap/add_plant"/>

【讨论】：