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

Answer 1

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 2

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 3

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");

Answer 4

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 5

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 6

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>"));