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>

Answer 2

use this layout

<?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:src="@drawable/icon" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true"/>
    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true">
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Left Text" android:layout_weight="1.0" />
    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Right Text" android:layout_weight="1.0" />
    </LinearLayout>
</RelativeLayout>