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.
Related
Let's start with the fun part, here's the graphic of the trouble. Horizontally, everything is beautiful.
The middle button, I'd like to to be aligned with the other three. Here are the basics:
overall, it's a relativelayout
inside this relativelayout, it's a horizontal linear layout, containing the three buttons
the "sinking" of the middle button is 100% correlated with it being a dual line of text, if I change it to a single line, it aligns properly
the specified height of the buttons has nothing to do with the sinking, even at more than double their current size (from current 70 to 170) the exact same behavior (and size of behavior) is displayed
The "custom_button" background has no effect, if I change them all to no background, stock looking buttons, the same positioning occurs
And here's the XML (of just the linearlayout within the relativelayout):
<LinearLayout
android:id="#+id/wideButtons"
android:layout_below="#+id/buttonClockFinish"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:orientation="horizontal">
<Button
android:id="#+id/buttonLog"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="View Log" />
<Button
android:id="#+id/buttonLocation"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Location\nD1-RS" />
<Button
android:id="#+id/buttonHelp"
android:layout_weight="1"
android:layout_height="70dp"
android:padding="0dp"
android:layout_marginLeft="3dp"
android:layout_width="fill_parent"
android:background="#drawable/custom_button"
android:text="Help" />
</LinearLayout>
So why on earth is it not aligning?
I was just about to post this question, and did one final experiment. I added a THIRD line of text to the button. This pushed it down even further. But what I realized it had in common was that the text of the top line of the middle button remained perfectly aligned with the text of the two buttons to either side of it.
So it wasn't that it was having trouble with an interior margin, unable to squish the text against the top border. The alignment was of the TEXT, not the button graphic. All along I had thought that there was some mystery :padding that I was not nulling out, but with three lines of button text it was quite happy to have just about 1dp or so of padding.
The solution was to add
android:layout_gravity="center_vertical"
to that button. I added it to the rest of them too, just for consistency.
Lesson: When you think things aren't aligning, perhaps they actually are, but maybe you're looking at the wrong thing.
I have a TextView which has a height of 30px and a textsize of 40px. Since the text is taller than the View, I only want to display the middle part of the text.Like this:
But with android:gravity="center_vertical", I only can display the upper part of the text with some bottom part cut off.
And this is my code:
<TextView
android:layout_width="wrap_content"
android:layout_height="30px"
android:textSize="40px"
android:text="ABCDEFG"
android:gravity="center_vertical"
/>
Anyone knows of any way to do that? Thanks!
Can't you simply wrap it in a LinearView set to the appropriate size and adjust the margin within the textview to about half (depending on padding) the font size?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#android:color/white">
<TextView
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:text="Sliced in half"
android:textSize="60dp"
android:layout_marginTop="-30dp"/>
</LinearLayout>
Resulting in:
http://i.stack.imgur.com/jEdxx.png
I highly doubt whether you can do that. All the options that I have come across while dealing with TextView are for when the Text is smaller than the View. This is the first question that I have come across which has the requirement otherwise.
One option which I had used before was android:scrollHorizontally="true" where in you specify whether the text is allowed to be wider than the View.
Interesting question. It would be great if you could add some code though.
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.
I'm working an a layout which I will have a bitmap centered, and I'd like the left & right margin bitmaps to scale (horizontally) to fill the screen, such that my center item can be a decorated titlebar, and the left & right are filler bitmaps that match the center bitmaps background, and thus stretching horizontally.
But what I'm seeing is there is a space between the bitmaps. The left & right scale, but there is a space between them.
Eg what I'm getting is:
http://www.58seconds.com/getting.png
What I want is:
http://www.58seconds.com/want.png
Any ideas?
Here is a snippet of the Layout code I use:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageView
android:layout_width="1dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjleftfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/command_selection_topImage"
android:layout_width="wrap_content"
android:layout_height="45sp"
android:src="#drawable/top_image"
android:layout_gravity="top"
android:gravity="top"
android:layout_weight="0"
/>
<ImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="45sp"
android:src="#drawable/mdjrightfiller"
android:layout_gravity="top"
android:gravity="top"
android:scaleType="fitXY"
/>
</LinearLayout>
Have you thought about creating a 9-patch with your single title bar image? If you have your "stretched" parts on either side of the actual title it will stretch to fit whatever you want without resorting to layout trickery.
Try creating two images, one as a background and scaleType to FIT_CENTER, then set the other one to lay on top and just move to the center.
Here's a nice clean way of doing this, that is pretty much exactly what Lucas was talking about, but in xml:
<FrameLayout android:id="#+id/navbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#drawable/titlebar_repeat">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="#drawable/titlebar_logo" android:layout_gravity="center" />
</FrameLayout>
In this case titlebar_repeat is just a single pixel wide, and titlebar_logo is just the text with a transparent background. In your case, since you don't seem to want highly stylized text, you could probably just make the ImageView a TextView instead if you like.
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.