Android TextView's subscript being clipped off

Question

The Android TextView clips off my text subscripts (see image below) even when I use android:layout_height="wrap_content" for the TextView. Is there a fix/work-around for this?

P/S: Superscripts work fine

Note: padding doesn't work.

• I tried even adding a padding of 50dip but it did not help.
• I can use an absolute height such as 50dip but that messes everything up when I need text to wrap around.

Sample Code:

mtTextView.setText(Html.fromHtml("HC0<sub>3</sub>"));

Answer 1

Most answers suggest to add paddings or to use smaller sub/superscripts. These might be serviceable workarounds, but they don't really solve the problem. Ideally, we want Android to take the sub/superscript into account when calculating line height. I think I found how to do it, and I'm sharing it for people googling this issue.

    SpannableStringBuilder sb = new SpannableStringBuilder("X2");
    sb.setSpan(new SuperscriptSpan(), 1, 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    textView.setText(sb, BufferType.SPANNABLE);

The trick is in BufferType.SPANNABLE. Apparently it makes TextView pay more attention to the markup and calculate line heights properly.

Answer 2

This solution worked for me.

Superscripted text is usually made smaller when the browser renders it, that doesn't seem to happen here so you can replicate that (and solve this problem) by doing this:

someTextView.setText(Html.fromHtml("Some text<sup><small>1</small></sup>"));

Answer 3

android:lineSpacingExtra="4dp" should solve it this will add extra line spacing below your text, and keep subscript from getting cutoff. I haven't tried it with superscript so it might now fix that.

Answer 4

For subscript a slight variation to the above suggestion is needed, two small tags:

    textView.setText(Html.fromHtml(
        "HCO<sub><small><small>3</small></small></sub>));

Answer 5

I had the same issue, so after reading the posts, I found this to be working.

Example : H ₂ O
simply use :

textView.setText(Html.fromHtml("H<sub>2</sub>O"),BufferType.SPANNABLE);

BufferType.SPANNABLE is important as it will tell textview to consider the superscript span.

If you are using custom tag handler for HTML you can also use it like this:

 textView.setText(Html.fromHtml(data, null, new CustomHtmlTagHandler(),BufferType.SPANNABLE);

Hope it helps someone looking for same problem.

Answer 6

I have faced the same issue in ICS and below android versions. I fixed the issue by a simple step

Give a minimum height to the Text View . It will fix the problem.

You can set minimum height through xml .

        android:minHeight="30dp"

Or dynamically

 if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {

            tv.setMinHeight(52);
    }

Answer 7

This worked for me along with the Small tag.

1. Inside the TextView add

android:paddingBottom="1dp"

2. Use the small Tag after the subscript

yourTextView.setText(Html.fromHtml("" +" Hey< sub >< small >2< /small > < /sub >"));

Note Please note , step 1 is important , My text was still cutting down in some case,using paddingBottom resolved it. Don't forget to remove the spaces in sub and small tags that are present in my answer :)

Answer 8

I'm displaying fractions and mixed numbers so I'm using both super and subscripting together. The Html.fromHtml didn't work for me, it either clipped the top or the bottom.

Oddly, mixed numbers worked correctly, but fractions by themselves did not.

I ended up using a SpannableString with a SubscriptSpan or a SuperscriptSpan, then setting the font size in a TextAppearanceSpan.

Once I had done that I had to expand the height of the TextView as well.

TextView number = (TextView)findViewById(R.id.number);
String temp = "1 1/2";
SpannableString s = new SpannableString(temp);
// if the string has a fraction in it, superscript the numerator and subscript the denominator
if (temp.indexOf('/') != -1)
{
    int len = temp.length();
    s.setSpan(new SuperscriptSpan(), len - 3, len - 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    s.setSpan(new TextAppearanceSpan(null, 0, fractionFontSize, null, null), len - 3, len - 2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    s.setSpan(new TextAppearanceSpan(null, 0, fractionFontSize, null, null), len - 2, len - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    s.setSpan(new SubscriptSpan(), len - 1, len, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    s.setSpan(new TextAppearanceSpan(null, 0, fractionFontSize, null, null), len - 1, len, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
number.setText(s);

Then I had to expand the height:

RelativeLayout.LayoutParams parms = (RelativeLayout.LayoutParams)number.getLayoutParams();
Rect frame = CalcSize(number.getTextSize(), quantityMaxString);
parms.height = frame.height() + fractionAdjustment;
number.setLayoutParams(parms);

CalcSize returns a bounding rectangle of the largest string in the array of display elements.

fractionAdjustment is an emperically selected value that works for the selected font size adjusted for screen geometry.

Note: This is TextView is inside a ListView, so that might have some impact as well.

// calculate the field dimensions, given the font size and longest string
private static Rect CalcSize(float fontSize, String maxString)
{
    Rect bounds = new Rect();
    paint.setTypeface(Typeface.DEFAULT);
    paint.setTextSize(fontSize);

    paint.getTextBounds(maxString, 0, maxString.length(), bounds);

    return bounds;
}

Empirical values:

fractionAdjustment = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 14, resources.getDisplayMetrics());
fractionFontSize = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 11, resources.getDisplayMetrics());

Answer 9

The More number of <small> </small> tags in there, the smaller the subscript will get and you should be able to see it without being clipped.

Eg: H ₂ O

Html.fromHtml("H<sub><small><small><small>2</small></small></small></sub>O");