Search code examples
androidiconsandroid-imageviewandroid-imagecontrast

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


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.

enter image description here


Solution

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