How to put multiple text views and view images in Android?

Question

I want to achieve the following effect in an Android application:

As a background, I use a nine-image 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 a result

Any ideas on something wrong? How can I achieve the effect of the first image?

Edit:

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

Why image with nine patches does not scale with text

Answer 1

In the first solution, try adding a RelativeLayout , which is set to fill_parent in width, and set the image with nine commas as background for it, and then add TextViews to it as follows:

 <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> 

Answer 3

The answers have already been posted, but here's how I do it:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:padding="1dp" android:background="@drawable/tile"> <TextView style="@style/textstyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello1"/> <View android:layout_width="0dp" android:layout_height="0dp" android:layout_weight="1"/> <TextView style="@style/textstyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello2"/> </LinearLayout> 

LinearLayout uses a nine-pack as a background, so it stretches with the content. The middle view extends to create a gap between text1 and text2.

Answer 4

  <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="50dp" android:background="@drawable/your background image"> <LinearLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" android:singleLine="true" android:text="Subject1"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" android:singleLine="true" android:text="Subject2"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" android:singleLine="true" android:text="Subject3"/> </LinearLayout> </LinearLayout> 

Answer 5

 <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" /> </Linear Layout >