Android: Overlay a picture (jpg) with transparency

Question

I have a picture (jpg) that I want to display on the screen. Additionally the picture should be covered partially by a transparent effect. The transparent cover should be dynamic. So e.g. each day more of the picture is shown. Here a picture to show what I mean:

I have the picture without the gray cover and want to add this cover but in different steps.

Can someone give me a hint how to do that.

Answer 1

You can do this simply with widgets:

FrameLayout is the general mechanism for overlaying a view on top of another:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView  
    android:id="@+id/image"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/my_image"/>
<View
    android:id="@+id/overlay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
</FrameLayout>

Then in your Java code you can dynamically set the transparency of your overlay:

View overlay = (View) findViewById(R.id.overlay);
int opacity = 200; // from 0 to 255
overlay.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha
FrameLayout.LayoutParams params =
    new FrameLayout.LayoutParams(FrameLayout.LayoutParams.FILL_PARENT, 100);
params.gravity = Gravity.BOTTOM;
overlay.setLayoutParams(params);
overlay.invalidate(); // update the view

Answer 2

You can do something like this where the canvas is coming from an onDraw() request:

Paint paint = new Paint();
Rect r = new Rect(); 
paint.setColor(0x80808080); // translucent gray 
r.right = iDisplayWidth-1; 
r.left = 0; 
r.top = iDisplayHeight/2; 
r.bottom = iDisplayHeight-1; 
canvas.drawRect(r, paint); // fill with gray