How to put several text views over and image view in android?

Question

I want to achieve following effect in my android app:

As background I use a nine-patch png image. I tried it like this with just one text view

<ImageView
    android:id="@+id/myImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/rowimage" />

<TextView
    android:id="@+id/myImageViewText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/myImageView"
    android:layout_alignTop="@+id/myImageView"
    android:layout_alignRight="@+id/myImageView"
    android:layout_alignBottom="@+id/myImageView"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#000000" />

But this is what I get as result

Any ideas whats wrong? How can I achieve the effect from the first image?

Edit:

I updated my xml to relative layout, now I get following result

Why does the nine-patch image not scale with the text??

Answer 1

The first Solution try to add a RelativeLayout which is setted to fill_parent in width , and set your ninePatch image as a background for it , and then add your TextViews into it like this :

<RelativeLayout 
  android:id="@+id/layoutTextViews"  
  android:layout_width="fill_parent"
  android:layout_height = "wrap_content"
  android:background="@drawable/rowimage" 
>

<TextView
    android:id="@+id/txtView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Hello"
    android:textColor="#000000" />

<TextView
    android:id="@+id/txtView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_margin="1dp"
    android:gravity="center"
    android:text="Right"
    android:textColor="#000000" />

</RelativeLayout>