Develop Reference

Placing text view over an image view using FrameLayout

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 :

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

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.

Android TextView offset downwards

I have an activity with two Buttons and a TextView in a LinearLayout. My TextView is offset downwards and the text doesn't fit inside the box. Can you explain what is happening? I think it is related to padding, and I've read several discussions about the perils of TextView padding, but that doesn't explain why the text is cut off at the bottom.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#800080">
<Button
android:text="This"
android:background="#drawable/button_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="That"
android:background="#drawable/button_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
/>
</LinearLayout>
This code produces this display:
The purple is the LinearLayout, the blue is the TextView. As you can see, the TextView's top is below those of the buttons and its bottom is below the bottom of the LinearLayout. As I add text to the TextView, the LinearLayout increases its height appropriately, but because the TextView is offset, I always lose the bottom of the last line.
I ran Hierarchy Viewer and it gave me this wireframe:
Which shows the vertical offset at the top, but misses the bottom of the TextView. The same wireframe with the LinearLayout selected looks like this:
According to Hierarchy Viewer, the top of the buttons is at 0, but the top of the TextView is at 7. I've tried various fixes, mostly culled from this site:
android:paddingTop="0dp"
android:background="#null"
android:includeFontPadding="false"
None of these fixed my issue.

Set android:baselineAligned property of your LinearLayout to false.
From documentation:
When set to false, prevents the layout from aligning its children's
baselines. This attribute is particularly useful when the children use
different values for gravity. The default value is true.

give the layout_gravity of the Textview to be center_vertical
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#800080">
<Button
android:text="This"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:text="That"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
android:layout_gravity="center_vertical"/>
</LinearLayout>

Try setting the layout_gravity for the TextView like this:
<TextView
android:text="Copious amounts of text that overflows onto several lines on a small screen, causing the TextView to dangle below the buttons. Why it does this I can't imagine. I only hope someone can help me with this."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#533f93"
android:layout_gravity="top"
/>

If you have this problem with several TextViews you can add android:gravity="center_vertical" to LinearLayout

Text in Scrollview won't match parent height

For some reason, my scrollview, which only contains two TextViews for now, refuses to fill it's parent. The XML for the scrollview is below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/Article"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/article_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="32sp" />
<TextView
android:id="#+id/article_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:text="TextView"
android:textSize="16sp"
android:onClick="onClick"
android:clickable="true" />
</LinearLayout>
</ScrollView>
I've noticed the text in the scrollview will not cover parts of the .9.png #drawable/background. I've tested several backgrounds, and wherever I put a patch, the text will only go in the stretched part. I uploaded a picture here.
In this case, the horizontal patch is nearly on the bottom of the 150x150 image. It's one pixel off. As you can see, the textview cuts off sometime well before the top, and there is a 1 pixel cutoff on the bottom.
If I were to make the patch in the middle of the .png, the cutoff would be split evenly top and bottom. It is doing the same thing horizontally, but that is much more difficult to see since the text does not scroll horizontally.
How do I get rid of this behavior? I want the text to be able to flow from the very top to the very bottom, over the .9.png. Is this possible? If not, the only option I see here is make it a very short narrow 9patch so it doesn't take up much space. I'd like a better solution though.
Edit: the background image (the 9patch, not sure if the patches will come through though)
If they don't, it's got a 1 pixel wide horizontal patch at the bottom, and a a pixel wide vertical patch at the top. See screenshot.

I ended up just using a smaller .9.png. It seems that the textview is only filling the expanded portion of the 9patch. At least on ICS.

Having issues with centering text in TextView within a region

I'm having issues with TextViews and centering the text within the text region. Specifically, I have a TextView, but when I have text inside that contains letters that straddle down the bottom margin (i.e. p, g, q, y, etc), those letters are getting cut off. I'm trying to center the text within the region but haven't had much luck.
[Updated] I now resolved the letters getting cut-off at the bottom using wrap_content as my height, but found another problem. It now appears that the text is positioned low in the region, leaving this gap at the top. I modified my layout to reflect the latest (see below). Basically, those characters that were getting cut off before (g, y, j, etc) are touching the region right below which is fine, but it appears to leave padding at the top. I tried to change the gravity to center_vertical or center, but don't have much luck:
Note, I have to work with the specs given the textSizes (i.e. I can't change the values for these)
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="43.3dip"
android:background="#drawable/custom_bg"
android:orientation="horizontal">
<ImageButton
android:id="#+id/headshot"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn"
android:layout_gravity="center" />
<RelativeLayout
android:id="#+id/name_and_email"
android:layout_width="230.7dip"
android:layout_height="43.3dip"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="18.6sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#c5ff15"
android:lineSpacingExtra="0sp"
android:text="AaBbCcDdGgJjTtYy" />
<TextView
android:id="#+id/email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="13.3sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_centerInParent="true"
android:layout_below="#id/name"
android:gravity="center_vertical"
android:visibility="gone"
android:text="qypgj#gmail.com" />
</RelativeLayout>
<ImageButton
android:id="#+id/headshot2"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn2"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
Can anyone help?
MB

Why are you trying to set the heights manually? You will have much better luck using layout_height="wrap_content". I'd imagine that the problem is that your text size of 14.3sp is too big for the area you are allowing it.
Also, a good resource for debugging complex layouts is the HeirarchyViewer, found under the tools folder.

How do I vertically align an item within a list using relative layout?

I am using a list view in Android 1.5 to show a list of images and text next to the image. I am trying to vertically center the text but the text is at the top of the row instead of centered. Below is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<ImageView android:id="#+id/item_image" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:paddingRight="10dip"
android:src="#drawable/default_image" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_toRightOf="#id/item_image"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:gravity="center_vertical"
/>
</RelativeLayout>
It seems strange that I need to set alignParentTop="true" when I'm trying to vertically center the text, but if I don't the text does not even show up. What am I doing wrong?

EDIT following the comments:
It turns out making this work with RelativeLayout isn't easy. At the bottom of the answer I've included a RelativeLayout that gives the effect wanted, but only until it's included in a ListView. After that, the same problems as described in the question occurred. This was fixed by instead using LinearLayout(s).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:orientation="horizontal">
<ImageView android:id="#+id/pickImageImage"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#drawable/icon"
android:scaleType="fitXY"
android:layout_marginRight="10dp"/>
<TextView android:id="#+id/pickImageText"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="left|center_vertical"
android:text="I'm the text"/>
</LinearLayout>
If you want to have two text boxes, you can nest a second orientation="vertical" and LinearLayout after the ImageView and then put the text boxes in there.
This works, but I have to admit I don't know why the RelativeLayouts didn't. For example, this blog post by Romain Guy specifically says that the RelativeLayout should. When I tried it, I never got it to quite work; admittedly I didn't do it exactly as he did, but my only changes were with some attributes of the TextViews, which shouldn't have made that much of a difference.
Here's the original answer:
I think you're confusing Android with all those somewhat contradictory instructions in RelativeLayout. I reformatted your thing to this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/row"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<ImageView android:id="#+id/item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dip"
android:src="#drawable/icon"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>
<TextView android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/item_image"
android:layout_centerVertical="true"
android:text="Blah!"/>
</RelativeLayout>
And that works fine. I removed many of your redundant android:layout_alignParentxxx because they weren't necessary. This view now comes up with the picture in the top left corner and the text vertically centered next to it. If you want the picture vertically centered as well, then you can't have the RelativeLayout be on android:layout_height="wrap_content" because it's trying to make itself no taller than the height of the picture. You'd have to specify a height, e.g. 80dp, and then set the ImageView to a fixed height like 60dp with android:scaleType="fitXY" to make it scale down to fit properly.

Was stuck on a similar issue for a while, but found this from CommonsWare:
"When you inflate the layout, use inflate(R.layout.whatever, parent, false), where parent is the ListView."
Works but only when you set the height of the row to a specific value (ie you can't use wrap_content).

Baseline directive would do it, but ImageView simply does not support baseline alignment as of today. You can work around this by creating a subclass of ImageView, override the getBaseline() method and return the height of the image.