Question

I am a newbie to graphics in Android (although I am pretty well-versed with Android programming itself). I am trying to display a “lightbulb” in my app. Based on some values, I would like to change the “brightness” of the lightbulb.

I used a PNG image for this.

<View
    android:id="@+id/view2"
    android:layout_width="59dp"
    android:layout_height="65dp"
    android:background="@drawable/lightbulb" />

And, the code is this:

final View normalView = findViewById(R.id.view2);

//Where I need to set the alpha
int alphaValue = /*Some calculation*/
normalView.getBackground().setAlpha(alphaValue);
normalView.invalidate();

The png file is a transparent graphic with only the outline of the bulb in black. Now, what happens is when I set the alpha to a lower value (closer to 0), the entire graphic becomes transparent. I want only the content of the bulb to become transparent. I wish the outline of the bulb to stay visible.

I did try creating my custom View as follows, but now I don’t see the graphic at all.

class LightbulbView extends View {

    private BitmapDrawable mLightbulbDrawable;
    private Paint mPaint;

    /*All constructors which call through to super*/ 

    private void initialize(){
        mLightbulbDrawable = new BitmapDrawable(getResources(), BitmapFactory.decodeResource(getResources(), R.drawable.lightbulb));
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mLightbulbDrawable.draw(canvas);
    }

    /*Without this, I get an NPE when I do a getBackground on this view*/
    @Override
    public Drawable getBackground() {
        return mLightbulbDrawable;
        //return super.getBackground();
    }
}

And, of course, using an ImageView does no good either. The result is exactly the same.

<ImageView
    android:layout_width="wrap_content"
    android:id="@+id/imageView1"
    android:layout_height="wrap_content"
    android:src="@drawable/lightbulb"
></ImageView>

And here’s the code

final ImageView imageView = (ImageView) findViewById(R.id.imageView1);
imageView.setAlpha(alphaValue);

So, what is the best way to do this in Android?

---

SOLUTION

This is how I did it. Please see the accepted answer (by @Petrus) for more details:

<FrameLayout
        android:id="@+id/frameLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
        <ImageView
            android:layout_height="wrap_content"
            android:src="@drawable/lightbulb_content"
            android:layout_width="wrap_content"
            android:id="@+id/bulbContent"
        ></ImageView>
        <ImageView
            android:layout_height="wrap_content"
            android:src="@drawable/lightbulb"
            android:layout_width="wrap_content"
            android:id="@+id/bulb"
        ></ImageView>

    </FrameLayout>

And in code:

final ImageView bulbContent = (ImageView) findViewById(R.id.bulbContent);
//Where I need to set the alpha
int alphaValue = /*Some calculation*/
normalView.getBackground().setAlpha(alphaValue);
bulbContent.setAlpha(alphaValue);

Here, lightbulb.png is an image with just the outline of the bulb; lightbulb_content.png is an image with the “contents” of the bulb.

Answer 1

I would use two images, one with the lightbulb outline and one with the content you want to adjust the alpha on.
Then add the two images using ImageViews in a FrameLayout. First add the image to be adjusted, then the outline image. Make sure both images have the exact same pixel dimensions.

This way you can adjust the alpha on the bottom image (lightbulb) and keep the outline (top image) unchanged.

Good luck.