Semi-transparent text box over photo

Question

I'm trying to overlay a semi-transparent text box over a photo for description. Tapping on the screen should make it slide up/down. It should also contain a rating bar in the bottom.

Much like in Google Goggles http://blogote.com/wp-content/uploads/2010/10/GoogleGoggles1.jpg

How would you do it? This is what I have so far:

<FrameLayout 
    android:id="@+id/mainlayout" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    android:foregroundGravity="bottom"
    xmlns:android="http://schemas.android.com/apk/res/android">

<ImageView
    android:id="@+id/imgview" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<TextView 

    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:text="@string/hello"/>
</FrameLayout>

Answer 1

This can be easily implemented with a RelativeLayout and a SlidingDrawer widget.

1. The RelativeLayout is required so that you can attach the drawer to the bottom of the layout and have it open over the photo.
2. The SlidingDrawer widget has 2 required properties: android:handle and android:content. For clean layouts, you'll probably want these as separate layout files. For simplicity in the below example, they're included in the same XML layout.
3. The opacity of the background is simple - just pass the android:background property as a ARGB (Alpha RGB) value. Below uses "#BF000000" which is black at roughly 75% opacity.
4. Your last step is to hide the handle and add an event handler to your ImageView and your SlidingDrawer.

Just for kicks, here's a full working example...

Your layout XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                >
<ImageView android:id="@+id/image" 
           android:src="@drawable/bunnywaffles"
           android:layout_width="fill_parent" 
           android:layout_height="fill_parent"
           android:layout_alignParentTop="true"
           />
<SlidingDrawer android:id="@+id/SlidingDrawer" 
               android:handle="@+id/slideHandleButton" 
               android:content="@+id/contentLayout"
               android:layout_width="fill_parent"
               android:layout_height="150dip"
               android:layout_alignParentBottom="true" >
    <Button android:id="@+id/slideHandleButton"
            android:layout_width="0dip" 
            android:layout_height="0dip"
            android:visibility="gone"
            />
    <LinearLayout android:id="@+id/contentLayout"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"  
                  android:orientation="vertical" 
                  android:gravity="center" 
                  android:background="#BF000000">
        <LinearLayout android:layout_width="fill_parent"
                      android:layout_height="wrap_content"
                      android:gravity="center">
            <Button android:id="@+id/Button01" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Button1" 
                    />
            <Button android:id="@+id/Button02" 
                    android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:text="Button2" 
                    />
        </LinearLayout>
        <RatingBar android:layout_width="wrap_content"
                   android:layout_height="wrap_content"
                   android:numStars="5" />
    </LinearLayout>
</SlidingDrawer>
</RelativeLayout>

And your activity Java:

ImageView _image;
SlidingDrawer _drawer;
Boolean _drawerOpen = false;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    _image = (ImageView) findViewById( R.id.image );
    _image.setOnClickListener(ToggleDrawer);

    _drawer = (SlidingDrawer) findViewById( R.id.SlidingDrawer );
    _drawer.setOnClickListener(ToggleDrawer);
}

private View.OnClickListener ToggleDrawer = new View.OnClickListener() {
    public void onClick(View view) {
        if ( _drawerOpen )
            _drawer.animateClose();
        else
            _drawer.animateOpen();
        _drawerOpen = !_drawerOpen;
    }
};

Answer 2

This link gives an idea about creating a transparent background color. Here it's #BF000000.