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?

http://img576.imageshack.us/img576/2865/textclip.png see the rightmost 'o' — Grego, Dec 06 '10 at 08:32

danfelabs · Answer 1 · 2011-02-16T16:26:42.010

29

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.

edited Feb 16 '11 at 16:26

answered Jan 19 '11 at 21:10

danfelabs

1,873
1
18
23

3

This is unbelievable ... Why, mister Android ? Tell me it's a bug and it's going to be fixed.. – Jack' May 21 '20 at 15:52
7

It will never be fixed. The question is from 2010 and here I am looking for a solution in 2022... – jeff Apr 22 '22 at 09:02
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. – Jayakrishnan Feb 07 '23 at 07:37

score 28 · Answer 2 · answered Mar 03 '12 at 07:08

28

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

answered Mar 03 '12 at 07:08

Sam

391
8
10

This doesn't work well with every language. – doctorram Apr 02 '23 at 02:56

score 13 · Answer 3 · edited Aug 30 '11 at 00:29

13

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.

edited Aug 30 '11 at 00:29

nmr

16,625
10
53
67

answered Apr 14 '11 at 16:46

Xtera

131
1
2

1

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. – Reuben Scratton Aug 03 '11 at 13:10
I don't think that's an escape character for XML, at least I didn't see it here: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references But this definitely worked for me! I wonder why. – nmr Aug 29 '11 at 21:20

score 8 · Answer 4 · answered Jan 04 '13 at 21:52

8

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.

answered Jan 04 '13 at 21:52

Oleg Vaskevich

12,444
6
63
80

Had the same issue using setTextSkewX (which is another way to italicize text). This fixed that issue as well. – thecoolmacdude Aug 14 '14 at 15:39

score 8 · Answer 5 · answered Oct 10 '13 at 07:27

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());
}

in 2022 this answer still works like a charm.. Thanks for sharing. is there any chance of that this impacting app performance? — RAINA, Nov 29 '22 at 16:58

score 5 · Answer 6 · answered Jun 02 '16 at 08:08

5

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)

answered Jun 02 '16 at 08:08

Frank Nguyen

6,493
3
38
37

1

this works well, thanks ! I hate these hacks that Google forces us to do ! – Someone Somewhere Aug 07 '16 at 19:01

Che Jami · Answer 7 · 2014-08-18T14:52:39.690

2

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).

edited Aug 18 '14 at 14:52

answered Jul 17 '13 at 16:26

Che Jami

5,151
2
21
18

Edited: Remove the dips – Che Jami Aug 18 '14 at 14:52

score 2 · Answer 8 · answered Jan 04 '19 at 06:21

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

Doesn't work for me, it's still cut off even with the roboto-italic font in my assets — Michael P, Jan 13 '23 at 20:30

score 2 · Answer 9 · answered Feb 15 '12 at 23:50

2

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.

answered Feb 15 '12 at 23:50

Tenacious

594
4
6

It does go away by setting true-italic typeface in XML now. Thanks for the hint. Check my answer. – sziraqui Jan 04 '19 at 06:24

lee · Answer 10 · 2015-04-06T10:16:52.370

1

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.

edited Apr 06 '15 at 10:16

answered Apr 06 '15 at 09:58

lee

161
2
5

This is a proper solution instead of a hack – sziraqui Jan 04 '19 at 05:35

score 0 · Answer 11 · answered Jul 20 '18 at 10:10

0

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

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

answered Jul 20 '18 at 10:10

Oush

3,090
23
22

fromHtml(String) is deprecated in API 24 – sziraqui Jan 04 '19 at 05:35

score 0 · Answer 12 · answered Nov 14 '19 at 15:12

0

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)

answered Nov 14 '19 at 15:12

kalnar

686
7
9

score 0 · Answer 13 · answered Dec 27 '20 at 13:12

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.

score -3 · Answer 14 · answered May 17 '11 at 04:14

-3

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"

answered May 17 '11 at 04:14

user750023

13
1

10

Padding doesnt seem to affect the text clip rect, at least not on 2.3. – Reuben Scratton Aug 03 '11 at 13:11
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. – Tobias Reich Jan 07 '13 at 08:25

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

14 Answers14

Linked