Develop Reference

Expanding TextView with screen size up to maxWidth

This issue relates to expanding elements with screen width, but only up to a maxWidth.
My scenario involves a vertically oriented LinearLayout containing a fixed sequence of rows. Each of those rows is a horizontal LinearLayout containing some EditText elements, separated by TextView elements. The TextView elements' text contains a mathematical symbol (e.g. + or - or /) and are meant to indicate that the contents of second box will be added to (or subtracted from, etc) the first box, for display elsewhere in the UI.
The EditText elements must stay their current fixed width, but I want the TextView elements (acting like separators) to expand in width if the screen will allow it, but only up to a maxWidth of 30dp. Currently the layout for one example row looks like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="#dimen/row_side_padding"
android:paddingRight="#dimen/row_side_padding"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<EditText
android:id="#+id/editTextBoxOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/box_one_hint"
android:imeOptions="actionDone"
android:inputType="numberSigned"
android:maxLines="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/plus" />
<EditText
android:id="#+id/editTextBoxTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/box_two_hint"
android:imeOptions="actionDone"
android:inputType="numberSigned"
android:maxLines="1" />
</LinearLayout>
This current code wraps the width of the TextView to the width of the text (just a plus symbol in this example). This is exactly what I want on small screens!
However, on wider screens it would be nice if the TextView grew wider to space out the elements a bit. I am able to expand the TextView by setting it as:
<TextView
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/plus" />
But this makes the TextView too large. I want it to expand to a maximum of 30dp, if the screen width allows it. But from what I understand, android:maxWidth does not work with android:layout_width="match_parent" so any maxWidth is just ignored.
So how can I expand my TextView based on screen width, but only up to a maximum width, while leaving my EditText elements the same size?

Set android:layout_width to 0dip...it will help the TextView to take the space which are available after EditTexts size.
<TextView
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/plus" />

For those who are tackling the same problem...
It didn't seem as if there was a way to do this. Instead, the best route to go is to create some standalone layout files that are associated with certain screen widths (i.e. are in res/layout-w600dp as well as one in res/layout itself to catch the smallest screen widths). I specified a single TextView in my layout_plus.xml file:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:gravity="center"
android:text="#string/plus" >
</TextView>
For each of these screen-width dependent layouts I used a different amount of paddingLeft and paddingRight, to manually perform the expansion of space around the TextView. You could change the TextView's width if you wanted.
Then in your main layout, remove the TextView you were attempting to expand and use the tag. This will allow your screen width dependent files to be dragged in automatically - whichever one is appropriate. My include looked like this:
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/layout_plus"/>
The documentation states that you should override the layout_width and layout_height attributes.
I wanted to override other attributes too, such as override the text to contain a minus instead of a plus (allowing me even more re-use). Unfortunately, include does not let you override other attributes, so I had to create a set of layout_minus.xml layouts for this purpose.
As an alternative to using with modified layouts, there is the option of simply creating screen width dependent versions of the string resource displayed by the TextView, into which you can insert spaces for the larger width versions. This would require less changes, and probably less new files, but hardcoding spaces inside strings makes it harder to tweak and tune later on.

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.

Limit height of a view to the height of the parent view

I have a scroll layout with a relative layout in each line. Now is there an image and a text, and I want to limit the height of each line to the text.
So if my image is higher than the text, that the image will be resized to the height of the text (proportional). How can I do this in XML?
At the moment the line definition looks like (copied from the mumble android implementation):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout01"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/userRowState"
android:src="#drawable/icon" />
<TextView
android:layout_toLeftOf="#+id/userRowStatus"
android:layout_height="wrap_content"
android:text="[Name]"
android:id="#+id/userRowName"
android:ellipsize="end"
android:layout_width="wrap_content"
android:lines="1"
android:singleLine="true"
android:textSize="25sp"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/userRowState" />
<!--
singleLine is deprecated but it is the only way to get ellipsize work
it seems. 'inputType text, maxLines 1' didn't work. It's a known issue
that Google has been unable to reproduce in 1½ years
http://code.google.com/p/android/issues/detail?id=882 Will see what
happens first, they remove support for singleLine or they manage to
reproduce the error. :p
-->
</RelativeLayout>
Sincerely xZise

You could try aligning the top and bottom of the icon to the top and bottom of the userRowName:
<ImageView
android:id="#+id/userRowState"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_alignTop="#+id/userRowName"
android:layout_alignBottom="#+id/userRowName"/>
This should make it decrease in size when the text decreases. It will remain centered horizontally on its old position though and it won't grow as it's limited in horizontal direction.