How to programmatically displaying an image with a text (or button, or other) overlay?

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);
    } 
}

blessanm86 · Accepted Answer · 2011-09-21T08:12:32.563

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.

edited Sep 21 '11 at 08:12

answered Sep 20 '11 at 10:10

blessanm86

31,439
14
68
79

It's a thought, but this should be do-able using the standard ImageView and TextView classes... and far less complicated as well. Again, for the purpose of this it might be text, but it could as easily be a button or a menu or something else. I can make a ScrollView and I can put an ImageView and a TextView within it, but I've yet to get the alignment to work... and really that textview should be overlaying the Scrollview independently, when it's present. – MartyMacGyver Sep 20 '11 at 11:08
in that case use a framelayout for the most simple solutions. It will draw its child views on top of each other based on its order. – blessanm86 Sep 20 '11 at 11:42
FrameLayout is doing the same thing RelativeLayout is: the text is stuck in the corner instead of being in the middle of the screen, and it moves with the scroll. I need the overlaid text to appear and stay *in the center*, independent of the scroll state of what's below. In a way it's like a toast but again, that may be a button or some other object more complex than text overlaying the image below. – MartyMacGyver Sep 20 '11 at 16:49
Note: I'd upvote but I don't have enough reputation yet... I'm doing some tests with FrameLayout via XML but I'd really like to see a programmatic way to accomplish this. – MartyMacGyver Sep 20 '11 at 18:19
It seems to work better now... Thanks again for the helpful suggestions! Please upvote me if you could. – MartyMacGyver Sep 21 '11 at 07:37

How to programmatically displaying an image with a text (or button, or other) overlay?

1 Answers1