Question

I have an image to display via an ImageView element. Based on user input (say, a long press) I will want to overlay something on that image, such that the overlay is in the middle of the screen (or somewhere other than the upper-left corner at least… but the key is that it overlays the image and that I can choose that location in code. It might be an informative TextView item (not a Toast though), or some ephemeral zoom buttons).

This will all eventually be a child of a ScrollView of some kind (likely TwoDScrollView, but if you have a better suggestion let me know), so whatever text or button gets put up should not exclude that possibility. WebView is not an option though. I’d probably use a RelativeLayout unless you have a better suggestion.

I want to do this programmatically – not in XML. I don’t expect a full program from anyone (unless one already exists… I haven’t found one yet though). I just need a solid outline of how to make this happen properly for some text over an image.

Edit: I’ve been looking all day and I’ve found many ideas but they are either XML-only or completely different than what I’m trying to do here. If, however, you have a pointer to something appropriate please let me know!

Edit 2: Here’s a working example I created that does what I set out to accomplish. Hopefully this will be useful to others! animage1 is a 1000x1000px image… the point is it’s larger than the screen you’re using. animage2 is relatively small (100x100px). “Menu” is overloaded to toggle the visibility of that second image as a proof of concept.

package com.myname.testoverlay2;

//import android.widget.HorizontalScrollView; // Works with this as well

import com.myname.testoverlay2.TwoDScrollView;
// From - http://blog.gorges.us/2010/06/android-two-dimensional-scrollview/
//     with fix added from comments there

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.ViewGroup.LayoutParams;
import android.widget.FrameLayout;
import android.widget.ImageView;

public class Testoverlay2Activity extends Activity {
    private static final String TAG = "MyApp";

    ImageView iv2;

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

        FrameLayout fl1 = new FrameLayout(this);
        FrameLayout.LayoutParams flp1 = new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        fl1.setId(9001);
        fl1.setLayoutParams(flp1);

        TwoDScrollView sv1 = new TwoDScrollView(this);
        sv1.setId(9002);

        FrameLayout fl2 = new FrameLayout(this);
        FrameLayout.LayoutParams flp2 = new FrameLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
        fl2.setId(9003);
        fl2.setLayoutParams(flp2);

        ImageView iv1 = new ImageView(this);
        FrameLayout.LayoutParams ivp1 = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        iv1.setId(9004);
        iv1.setLayoutParams(ivp1);
        Bitmap bm1 = BitmapFactory.decodeResource(getResources(),
            getResources().getIdentifier("animage1" , "drawable", getPackageName()));
        iv1.setImageBitmap(bm1);
        //Log.d(TAG, "Bitmap1 = (" + bm1.getWidth() + ", " + bm1.getHeight() + ")");

        iv2 = new ImageView(this);
        FrameLayout.LayoutParams ivp2 = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, Gravity.CENTER);
        iv2.setId(9005);
        iv2.setLayoutParams(ivp2);
        Bitmap bm2 = BitmapFactory.decodeResource(getResources(),
            getResources().getIdentifier("animage2" , "drawable", getPackageName()));
        iv2.setImageBitmap(bm2);
        //Log.d(TAG, "Bitmap2 = (" + bm2.getWidth() + ", " + bm2.getHeight() + ")");

        // Lay everything out
        fl1.addView(sv1);
        fl1.addView(iv2);
        sv1.addView(fl2);
        fl2.addView(iv1);
        setContentView(fl1);

        // The following is based on a StackOverflow comment that scrollTo won't work immediately, in general...
        // http://stackoverflow.com/questions/4720469/horizontalscrollview-auto-scroll-to-end-when-new-views-are-added
        Handler mHandler = new Handler();
        mHandler.postDelayed(new Runnable() {
            public void run() {
                TwoDScrollView container=(TwoDScrollView)findViewById(9002);
                if (container != null) {
                    Log.d(TAG, "executing scrollTo()");
                    //container.setOverScrollMode(TwoDScrollView.OVER_SCROLL_IF_CONTENT_SCROLLS); // Needed?
                    container.scrollTo(500,500);
                }
                else {
                    Log.d("MyApp", "Container is null");
                }
            }
        }, 100L);  
    }

    // Keyboard wedge for testing convenience
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        Log.d(TAG, "Keypress = (" + keyCode + ")");
        switch (keyCode) {
        case KeyEvent.KEYCODE_MENU:
            /* Sample for handling the Menu button globally */
            if (iv2.getVisibility() == ImageView.VISIBLE) {
                iv2.setVisibility(ImageView.INVISIBLE);             
            }
            else {
                iv2.setVisibility(ImageView.VISIBLE);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    } 
}

Answer 1

You can extend the view class and override the ondraw method. Using the canvas, you can draw a bitmap and also text on top of it.

From what i understood you need to have text appear in the middle and independent of the scrollview. This is the structure of the UI I would make

<FrameLayout>
    <ScrollView>
        <Imageview/>
    </ScrollView>
    <TextView/>
</FrameLayout>

To create this layout programatically, this is roughly how you do it.

    ViewGroup.LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, 
            LayoutParams.FILL_PARENT);

    ScrollView sv = new ScrollView(this);
    sv.setLayoutParams(lp);

    TextView tx = new TextView(this);
    tx.setLayoutParams(lp);
    tx.setGravity(Gravity.CENTER);
    tx.setText("Test");

    FrameLayout fr = new FrameLayout(this);        
    fr.setLayoutParams(lp);
    fr.addView(sv);
    fr.addView(tx);
    setContentView(fr);

The above code should go in the onCreate method. This is just how you do it roughly. You will need to make some modifications or additions to make it work for you.