Placing text view over an image view using FrameLayout

Question

Below is how I have designed my xml. Now what I am trying to fit a textview inside the white box shown below. But am being restricted by FrameLayout (at least I think so) that I need to hard code values to make the text view fit in the middle or some where inside the white box. I cannot use Relative or other layouts for this purpose as I have understood by my trials as this whole is a single image.

Here is my layout,

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:visibility="visible" android:layout_marginTop="60dip"
    android:layout_gravity="center" android:id="@+id/xxx">

    <ImageView android:id="@+id/calloutquizImage" 
        android:background="@drawable/callout" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:scaleType="fitCenter" />

    <ImageView android:id="@+id/triviaImage"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_alignTop="@+id/calloutquizImage" android:layout_gravity="left"
        android:src="@drawable/trivia" android:background="@drawable/trivia"
        android:layout_marginTop="50dip" android:layout_marginLeft="85dip"></ImageView>

    <TextView android:text="TextView" android:id="@+id/triviAnswerText"
        android:layout_marginTop="125dip" android:layout_marginLeft="85dip"
        android:layout_gravity="left" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textColor="#000000"
        android:typeface="sans"></TextView>

    <ImageButton android:id="@+id/triviaanswercloseButton"
        android:src="@drawable/closebtn" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:background="@drawable/closebtn"
        android:layout_marginRight="8dip" android:layout_marginTop="43dip"
        android:layout_gravity="right" android:onClick="triviaanswerClose"></ImageButton>
    <ImageView android:id="@+id/buttontoclose"
        android:layout_gravity="left"
        android:visibility="visible" android:onClick="triviaanswerClose" 
        android:layout_marginTop="50dip" android:layout_marginLeft="75dip"
        android:layout_width="230dip" android:layout_height="170dip"></ImageView>
</FrameLayout>

Because of this the text view looks in different positions in various handsets.

Any guesses what can be done for this instead?

Below is my image :

Answer 1

I think you are not doing the right thing. If you want a text to appear inside a white box (or even resize it, if there is to many text to fit to it) - you can still avoid any layouts ad do it with only one TextView.

Please have a look what is NinePatch image in Android: http://developer.android.com/reference/android/graphics/NinePatch.html

http://developer.android.com/tools/help/draw9patch.html - drawing tools

So basically you will need only 1 textView and your image, properly converted to 9-patch with 2nd link. (Basically - just add a few black pixels on image border). No just set this 9-patch as a background of textView. It will place text right where you need, and will shrink white box if you'll define so in 9-patch.

UPD: Please find the resulting screenshot:

As you can see, textView not handles WhiteBox" itself, filling it with text and resizing the box if necessary.

Here is how to make it work:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <TextView
        android:id="@+id/first"
        android:background="@drawable/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text 
        Manymanymany text" />

    <TextView
        android:layout_below="@+id/first"
        android:background="@drawable/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Not so many text" />
</RelativeLayout>

And here is your image, converted to 9patch. Just place it to "drawable/" folder. Note: it MUST have "back.9.png" name.

For details of how 9patch works you can check links above. The main idea: by making black dots on left and top border - you specify which part of the image will be stretched when image must be upscaled. By making dots on right/bottom side you tell the View where to place the content. In our case content is a text of the TextView.

Hope it helps, good luck

Answer 2

I think you can use a RelativeLayout within the FrameLayout for the ImageView and the TextView, and by using the parameters, you can navigate the TextView to the white box. Refer to the LayoutParams documentation for details.

for eg. you can add the ImageView block first and then the TextView, so that the TextView will lay over the ImageView, and by using align bottom, and specifying top margin with a negative value, you can make the TextView go over the image. Or rather, if you are using eclipse, you can directly move the text view in the graphic layout.

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:id="@+id/xxx"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="0dp"
    android:visibility="visible" >

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margintop="0dp" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/user2" />
        <TextView
            android:id="@+id/Textviewtitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_world"
            android:layout_below="@+id/imageView1"
            android:layout_marginTop="-10dp"
            app:context=".TestActivity" />

    </RelativeLayout>
 </FrameLayout>

Similar to above, you can specify margin left and right to properly position your TextView as you want. Check with graphic layout for feedback to know the correct position. Please reply if this helped.

Use your images and values for the height and width. I just tried for testing.