Unexpected top and bottom padding on a TextView? - android

I have a TextView. I want to set its background color. But the color fills more top space than it does bottom space.
<!-- red background. -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:background="#f00"
android:text="10.0" />
This is how it renders (zoomed in to demonstrate, green lines added by me):
So the extra space up top makes it look like the text is not centered within its own container. Is this expected? I'd like the text to appear vertically centered within its own container (the red area).
This is on a galaxy nexus, stock version of jellybean.
Thanks

Add the following attribute:
android:includeFontPadding="false"

Related

Off-center alignment of text inside a TextView

I have a layout/alignment problem with a TextView which I haven't yet been able to find a solution for, that is, I want to align text off-center inside a TextView horizontally.
To give a little more context, I have an ImageView and a TextView side by side, the ImageView touching the left edge of the screen and the TextView filling the rest of the screen horizontally, like this:
[-img-|-----text-----]
The TextView is configured as singleLine="true" and maxLines="1", so that it will be truncated if its too long for its horizontal space. My aim is to align the text in the center of the screen, not the center of the TextView, because there are other elements on the screen that are aligned to the center and I need the text aligment to match that.
So, if I use gravity="center" on the TextView, I get the image above, but what I actually want is
[-img-|--text--------]
I tried putting image and text in a RelativeLayout, so that the TextView actually touches both edges of the screen, which does what I want with respect to the alignment, except that if the text is long enough, the first characters will be hidden by the image, since the TextView lies behind the image view.
I also experimented with margins, padding and a compound drawable to the left, but the text is always centered relative to the available space (which I would consider the expected behavior).
Does anybody have any clues on how to achieve this alignment, i.e. relative to the center of a different component than the TextView, maybe programmatically at runtime? Thanks in advance for any helpful advice.
Edit: user Budius suggested using padding to the right to achieve a centered alignment which works but leads to long texts being truncated before the right edge of the TextView is reached and I'm looking for a solution that avoids that, i.e. that uses the entire avilable space, if possible.
I believe that will center it and the move 20dp to the side.
gravity:centre padding:right=20dp
Try using
android:layout_weight="1"
if it helps you..
I know this is not the correct approach than too give it a try..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight=".33"
android:gravity="center"
android:text="text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:src="#drawable/ic_launcher"
android:visibility="invisible" />

Background of TextView with multiple lines not wrapping correctly

Background:
I've got a layout that consists of 6 items layed out as a grid (2x3). All items are as wide as half the screen (minus a little margin on each side). Each item is a RelativeLayout that contains an ImageView (the background) and a TextView (the label). The label is set to wrap the text, and it's allowed to grow almost as wide as the image it sits on top of. After that it will break into two lines.
Problem:
Everything looks good as long as the text fits on a single line (see top element in picture). The background wraps the text nicely. However, when the text is displayed on two lines the background gets too wide (see bottom item in picture). It fills up the maximum allowed width even though the text on the first line doesn't take up that much space. Is there a way to make the background wrap the text in the same way as it does when only one line is used?
Picture:
Layout XML:
<ImageView
android:id="#+id/item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<!-- some stuff I had to remove... -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:paddingBottom="11.33333dp">
<!-- some other stuff I had to remove... -->
<!-- the gray background color is set to the TextView below programmatically together with the text itself. -->
<TextView
android:id="#+id/item_text_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5.33333dp"
android:paddingLeft="7.33333dp"
android:paddingRight="20dp"
android:paddingTop="1dp"
android:paddingBottom="5.33333dp"
android:layout_alignParentRight="true"
android:gravity="right" />
</RelativeLayout>
</RelativeLayout>
One of the possibility of such problem is textSize.
It depends on how you are setting and which measuring unit you are using to set textSize of your TextView.
dp,sp,pt and in may cause to create such problems.
So try to go with mm or px specifically.
And as per my testing px will give you the best result.
EDITED :
Add following attribute to your TextView in layout file.
android:gravity="right|start"
Instead of :
android:gravity="right"
Thanks.

How can I make button text extend outside 9 patch content area?

I have a row of buttons with custom 9 patch images, and variable length text. I would like the buttons to be the same height. When the text is long enough to wrap, it expands the button size, making the button with wrapped text bigger than the others. I'm laying these buttons out in code in linear layouts. I can fix the size of the button, but then it just cuts off the bottom. How can I make the text take up more of the padding space of the button, so that the text butts up against the top line of the button?
9patch content area is just used to set a padding. If you change the button's padding you will override the one set by the 9patch.
edit
try something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:text="ButtonButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="0dp"
android:paddingBottom="10dp"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
<Button android:layout_width="wrap_content" android:text="Button"
android:layout_height="match_parent"/>
</LinearLayout>
this way the button will be as high as the others. Sadly, I don't know if it depends on the original button's 9patch that might have asymmetrical paddings, but I can't make the text align with that from other buttons (I think gravity is by default set to center). Maybe with your 9patch it works though. (EDIT: oh, but if you'll have two lines of text who cares about alignment)
Ultimately I was unable to find a nice way of doing this without creating a custom view class.

What controls the default padding between views?

When I put a view on a layout, it automatically has some padding/margin on it.
See this picture:
The red rectangle show the space that the button takes. Note the empty space between the button and the red lines. That's the space in question.
What controls that space and how to I change it ?
It's messing up my lisview's button alignments!
The code for that layout:
<Button
android:text="#+id/Button01"
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="#+id/Button02"
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
The button has a default background set by Android. If you look at Android source code, you can find that the button's background has a transparent area around it. This is done in order to make it into a nine-patch drawable. So you cannot remove that padding unless you specify your own background drawable for the button.

android button fine text alignment

I'm trying to create standard button in android with a background and some text in front but some fairly specific alignment. I want the text to be centered vertically and on the left with 20dp of padding. The alignment works but the padding doesn't. I know I could probably get the desired effect by putting a few spaces in the text but that seems like a hack and next I want to do a similar thing but with the text at the top so I would prefer a more elegant solution.
Here's what I have:
<Button
android:layout_width="312dp"
android:layout_height="95dp"
android:id="#+id/gv_music_button"
android:text="Music"
android:textSize="30sp"
android:paddingLeft="20dp"
android:gravity="left|center_vertical"
/>
My mistake, padding was working correctly. Just didn't appear to be.

Categories

Resources