Italic TextView with wrap_contents seems to clip the text at right edge

Question

<TextView android:id="@+id/prodLbl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:textColor="#FFFFFF"
    android:textSize="30dip"
    android:textStyle="italic"
    android:text="Magnifico"
    />

Seems to clip few pixels from the rightmost character, at least on 480x800 emulator or Nexus One.

To me it looks like a bug, but I'm just an Android beginner. I tried to add margins to left and right, but it still kept on clipping. In the end my hack around it was to add a single space on both sides of the text. Any other solutions?

Fauve

Can you post an image of what you are seeing? – Bug

img576.imageshack.us/img576/2865/textclip.png see the rightmost 'o' – Fauve

You mentioned margins, did you mean padding? – Mineralogy

This problem is also bugging me – Foraminifer

it's insane, that this still happens in 2023 🤦‍♂️ – Jawbone

Answer 1

android:layout_width="wrap_content" , gives you a rectangle for wrapped content rendering. All will work well for normal text (non-italic).

Once you have italic text enabled, the wrapped text will try to fit into the rectangle and hence the rightmost character will be cut off unless its un-cut-able (such as ., ), 1, etc.)

Solution as suggested is to have a space at the end of the text (or anything better ??)

PS: This applies to android:gravity="right" too because the text will be pushed to the rightmost. If we have italic text, we face the same problem.

Live

This is unbelievable ... Why, mister Android ? Tell me it's a bug and it's going to be fixed.. – Soffit

It will never be fixed. The question is from 2010 and here I am looking for a solution in 2022... – Tem

if you add space or any other characters, the space will increase according to the textview text size. if anyone increases the textsize dynamically, the space will also get increased. – Careaga

Answer 2

You could also use the Unicode no-break space character (\u00A0).

Disforest

This doesn't work well with every language. – Remora

Answer 3

I added " \" to end of all strings in my strings.xml. \ is the escape character, so this way I could come over the issue, but this solution is nasty. Hope this helps.

Jessy

This is the only workaround that works reliably. If you use resource strings the trailing space will get removed (why does it do that?) so that has no effect, but the slash takes care of that. – Boloney

I don't think that's an escape character for XML, at least I didn't see it here: en.wikipedia.org/wiki/… But this definitely worked for me! I wonder why. – Tagalog

Answer 4

Just add an extra space to the end of the text. In XML, you will have to add \u0020 to the end as otherwise XML ignores whitespace at the beginning/end by default.

Pauli

Had the same issue using setTextSkewX (which is another way to italicize text). This fixed that issue as well. – Scrubland

Answer 5

Found another solution (tested on 4.1.2 and 4.3 while using wrap_content). If you extend TextView or EditText class you can override onMeasure method this way:

@Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    final int measuredWidth = getMeasuredWidth();
    final float tenPercentOfMeasuredWidth = measuredWidth * 0.1f;
    final int newWidth = measuredWidth + (int) tenPercentOfMeasuredWidth;

    setMeasuredDimension(newWidth, getMeasuredHeight());
}

Woadwaxen

in 2022 this answer still works like a charm.. Thanks for sharing. is there any chance of that this impacting app performance? – Mangonel

Answer 6

You can add a HAIR SPACE to your string

<string name="hair_space">&#x200A;</string>

String hairSpace = getContext().getString(R.string.hair_space);
textView.setText(hairSpace + originalString + hairSpace)

Leavy

this works well, thanks ! I hate these hacks that Google forces us to do ! – Cosmology

Answer 7

This applies to fixed-width TextViews also, not just "wrap_content". I'm not sure if the issue is version-specific as some commenters have alluded to. I see the issue on all Honeycomb versions. From what I've seen the issue does not go away by setting margin, padding, using a fixed-width, or a true-italic custom typeface.

Delegacy

It does go away by setting true-italic typeface in XML now. Thanks for the hint. Check my answer. – Jackelynjackeroo

Answer 8

Looking at the source I found out that setting a shadow extends the clip rectangle.

A trick is to set an invisible shadow just beyond the character.

For example:

android:shadowRadius="2"
android:shadowDx="2"
android:shadowColor="#00000000"

I think this solution is better as it will not extend the width of the TextView which may happen when adding an extra character (which is more apparent with a background).

Middleoftheroad

Edited: Remove the dips – Middleoftheroad

Answer 9

A proper and clean solution:

Use an italic custom font instead of setting textStyle='italic' For example:

<android.support.v7.widget.AppCompatTextView
            android:text="yolO"
            app:fontFamily="@font/roboto_italic"/>

I haven't tried it on regular TextView but from my observations, the problem is with textStyle='italic'.

Works without any hack!

Here's a proof of blaming textStyle attribute:

I made a custom fontFamily and defined typeface for normal, bold and italic

res/font/app_font_family.xml

<font-family xmlns:app="http://schemas.android.com/apk/res-auto">
    <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/roboto_regular"/>
    <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/roboto_italic" />
    <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/roboto_medium"/>
</font-family>

Now when I use this fontFamily and apply textStyle='italic', the rightmost character is still clipped.

<android.support.v7.widget.AppCompatTextView
            android:text="yolO"
            app:fontFamily="@font/app_font_family"
            android:textStyle='italic' />

This is on Api 23 with support library 28.0.0 and Android Studio 3.2

Jackelynjackeroo

The best solutions – Chart

Doesn't work for me, it's still cut off even with the roboto-italic font in my assets – Cruel

Answer 10

This is my solution: Format textview and measure. After that set width of textview with 1 pixel add to the width measured.

TextView textView = new TextView(this);
textView.setText("Text blah blah");
textView.setTypeface(typeface, Typeface.BOLD_ITALIC)
textView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
textView.setLayoutParams(new LayoutParams(textView.getMeasuredWidth() + 1, 
                                             LayoutParams.WRAP_CONTENT));

Working for me. Hope these help.

Undervest

This is a proper solution instead of a hack – Jackelynjackeroo

Answer 11

I also had the same issue and used a non-breaking space entity via HTML:

textView.setText("Magnifico" + Html.fromHtml(" ");

Sakmar

fromHtml(String) is deprecated in API 24 – Jackelynjackeroo

Answer 12

It seems to me that if you apply italic programatically, it does content wrapping correctly. So set the typeface of the TextView manually, e.g. in kotlin:

textView.typeface = Typeface.create(Typeface.DEFAULT, Typeface.ITALIC)

Hydrophone

Answer 13

Although I'd generally prefer sziraqui's answer that suggests using a true italic font, these are not always available.
As the problem at hand is caused by the mismeasurement of the text's boundaries, I just set android:layout_width="0dp", giving the TextView as much horizontal space as it needs. This might also not be ideal in all circumstances, but it's a simple and not too hackish solution for many situations.

Detestation

Answer 14

Add a 3dp padding to the right on your TextView. I tried with 1dp and 2dp, but 3dp seemed to do the trick fully.

android:paddingRight="3dp"

Avenue

Padding doesnt seem to affect the text clip rect, at least not on 2.3. – Boloney

Same for the title of an app (in my case ActionBarSherlock) which doesn't make it that simple to customize the title TextView. But thanks for trying. – Uphroe