Using a bitmap with android:alpha="x" does the opposite effect when used as activity background

Issue

A bit new to android design. I'm trying to add an image as the background to an activity. I want this image to be partly transparent and have a black gradient at the bottom.

For this, I created a drawable resource (openscreenbgg.xml) and created a <layer-list> as follows:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
     <item>
        <bitmap
            android:src="@drawable/bgnew"
            android:gravity="fill"
            android:alpha="0.4">
        </bitmap>
    </item>
    <item>
        <shape android:shape = "rectangle" >
            <gradient
                android:startColor="#000000"
                android:type="linear"
                android:angle="90"/>
        </shape>
    </item>

bgnew is the image name

I set android:alpha for the desired transparency effect and a added <shape> item for the gradient

The preview of this xml is perfect and exactly what i want:

expected

But when I use this drawable as a background for my activity, like so:

android:background="@drawable/openscreenbgg"

The preview is much brighter:

Actual

Am I misinterpreting the use of android:alpha here? Does making it more transparent mean more "light" passes through it and so it is brighter?

Solution

I suspect the problem is that your theme gives you a default white background for all windows, and so your semi-transparent image is overlaying a light color rather than a dark one.

One way to solve this is to change how you build your background image. Instead of using alpha on the bitmap, you could mask the entire image with semi-transparent black. The end result should be approximately the same, but you wouldn't have to worry about the window background "bleeding through" the image.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <bitmap
            android:src="@drawable/bgnew"
            android:gravity="fill">
        </bitmap>
    </item>
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#FF000000"
                android:endColor="#99000000"
                android:type="linear"
                android:angle="90"/>
        </shape>
    </item>
</layer-list>

Alternatively, you could set the window background to be dark instead of light, and then you'd get what you expect. But this may be difficult to achieve without affecting other activities in your app.

Answered By - Ben P.