Aligning text to baseline of image as an overlay in custom view

Question

I'm trying to align an ImageView to the top of the screen with a TextView at the bottom left of that image. I am stumped, does anyone know what is going on? I want it to look like this (looks fine in the graphical designer)

Here is what it looks like in the app. Notice that there is a big space between the image and the top of the screen.

Here is the xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <com.package.blah.ImageWithOverlay
        android:id="@+id/imageWithOverlay1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.package.blah.ImageWithOverlay>

</RelativeLayout>

Here is the code to produce it.

public class ImageWithOverlay extends RelativeLayout {
    ImageView image;
    TextView text;
    int imageHeight;

    public ImageWithOverlay(Context context) {
        super(context);
        setupDisplay(context);
    }

    public ImageWithOverlay(Context context, AttributeSet attrs) {
        super(context, attrs);
        setupDisplay(context);
    }

    public ImageWithOverlay(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setupDisplay(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {     
        //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, imageHeight);
    }

    private void setupDisplay(Context context) {
        BitmapDrawable bd = (BitmapDrawable)this.getResources().getDrawable(R.drawable.flowers480);
        imageHeight = bd.getBitmap().getHeight();

        image = new ImageView(context);
        image.setImageDrawable(bd);
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        lp.addRule(ALIGN_PARENT_TOP);
        image.setLayoutParams(lp);
        this.addView(image);

        text = new TextView(context);
        text.setText("testing");
        lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        lp.addRule(ALIGN_PARENT_BOTTOM);
        text.setLayoutParams(lp);
        this.addView(text);
    }
}

Any help is appreciated and feel free to ask me for added details if needed.

Answer 1

I think you'll find the ImageView is the correct size, but the image is scaling and centering inside the view.

To fix, add:

image.setAdjustViewBounds(true);

To check for problems like this, you can try:

image.setBackgroundColor(0x6600ffff);

That will let you see the bounds of the image.