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

Question

How can I add a dark, transparent background to a white icon so that the icon can be clearly seen when it's superimposed on a photo of any colour?

I got the icon from the Material design icons here so it comes in a variety of sizes. I'd rather not have to edit the icons if possible.

Here's a nice example from the built-in camera app of 2 icons standing out against a light background image. In my case the background doesn't have to be a circle. A squircle is fine too but preferably not a square. The background shape doesn't have to have a border like the ones below.

Answer 1

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

Add this XML file to your drawable. 8 digit color code #40000000 is AARRGGBB, the first two-digit(for alpha) controls opacity, you can change 40 to as per your need. So you to set this drawable file as background of image and set icon in src property.

Answer 2

I've accepted the answer from @SurajVaishnav because it's simple and offers the useful selector option which means the state of the icon's background can change when it's pressed, or not pressed, for example. Here's what I went with in the end...

Create this res/drawable/circle_white.xml file:

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

Then wherever I need the button icon in a layout file I just do this:

    <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 happens to be the icon I'm using. My delete icon then looks very similar to the one in the screenshot I posted in my question when it's not pressed; and its background changes to a grey shade when it's pressed.

Answer 3

In this case layer-list is perfect, you don't have to edit your icon or to add any transparent images. Create your_icon_with_transparent_bg.xml in drawable with two layers (background and your icon):

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

And use in xml as drawable in ImageView or wherever you like, the result on white background is:

Here you can set borders (stroke), background color, set it to be squircle or circle or circle -as it is on my image etc... customize as much as you like