如何为白色图标提供深色背景，使图标在浅色图像中脱颖而出？

Question

如何为白色图标添加深色透明背景，以便在将图标叠加在任何颜色的照片上时都能清晰可见？

我从 Material 设计图标 here 中获得了图标，所以它有多种尺寸。如果可能的话，我宁愿不必编辑图标。

这是内置相机应用程序的一个很好的示例，其中 2 个图标在浅色背景图像的映衬下显得格外醒目。在我的例子中，背景不必是一个圆圈。方形也可以，但最好不要方形。背景形状不必像下面那样有边框。

Answer 1

在这种情况下，图层列表是完美的，您不必编辑图标或添加任何透明图像。在 drawable 中创建 your_icon_with_transparent_bg.xml 两层（背景和您的图标）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="30dp" />
            <stroke
                android:width="1dp"
                android:color="#00000000" />
            <solid android:color="#10000000" />
        </shape>
    </item>

    <item
        android:bottom="5px"
        android:left="5px"
        android:right="5px"
        android:top="5px">
        <bitmap
            android:gravity="bottom"
            android:src="@drawable/your_icon" />
    </item>
</layer-list>

并在 xml 中用作 drawable 在 ImageView 或任何你喜欢的地方，白色背景的结果是：

在这里您可以设置边框（描边）、背景颜色，将其设置为圆弧形或圆圈或圆圈 - 就像在我的图片上一样...随心所欲地自定义

Answer 2

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#40000000"/>
            
            <!--corners allow us to make the rounded corners -->
            <corners android:radius="15dp" />
        </shape>
    </item>
    </selector>

将此 XML 文件添加到您的可绘制对象中。 8位色码#40000000为AARRGGBB，前两位(alpha)控制不透明度，可根据需要改成40。因此，您将此可绘制文件设置为图像的 background 并在 src 属性.

中设置图标

Answer 3

我接受了@SurajVaishnav 的回答，因为它很简单并且提供了有用的 selector 选项，这意味着图标背景的状态可以在按下或不按下时发生变化，例如。这是我最后的结果......

创建此 res/drawable/circle_white.xml 文件：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape android:shape="oval">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/white" />

            <solid android:color="#88000000" />

            <padding
                android:bottom="8dp"
                android:left="8dp"
                android:right="8dp"
                android:top="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/white" />

            <solid android:color="#88FFFFFF" />

            <padding
                android:bottom="8dp"
                android:left="8dp"
                android:right="8dp"
                android:top="8dp" />
        </shape>
    </item>
</selector>

然后在布局文件中我需要按钮图标的任何地方我都这样做：

    <ImageButton
        android:id="@+id/icon_delete_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle_white"
        android:contentDescription="@string/icon_delete_image_description"
        android:src="@drawable/ic_delete_white_24dp" />

ic_delete_white_24dp 恰好是我正在使用的图标。然后，我的删除图标看起来与我在问题中未按下时发布的屏幕截图中的图标非常相似；当它被按下时，它的背景会变成灰色。

如何为白色图标提供深色背景，使图标在浅色图像中脱颖而出？

how to give dark background to white icon so icon stands out against a light image?

icons

android

contrast

android-image

android-imageview