How to make RelativeSizeSpan align to top

Question

I have the following String RM123.456. I would like to

Make RM relatively smaller
Make RM aligned to top exactly

I almost able to achieve it by using

spannableString.setSpan(new RelativeSizeSpan(0.50f), 0, index, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString, TextView.BufferType.SPANNABLE);

The outcome looks like

However, it is aligned to the bottom. It doesn't align to the top.

I try to use SuperscriptSpan. It looks like

It doesn't do what I want as

SuperscriptSpan doesn't make the text smaller. I'm not able to control its sizing.
SuperscriptSpan will make the text "over the top align"

May I know, how can I make RelativeSizeSpan align to top exactly?

This is what I wish to achieve.

Please note, we don't wish to go for 2 TextViews solution.

http://stackoverflow.com/questions/28830159/multiple-relativesizespan-on-same-line — USKMobility, May 01 '16 at 08:51

score 30 · Accepted Answer · edited May 08 '16 at 21:22

However I did in this way:

activity_main.xml:

<TextView
    android:id="@+id/txtView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:textSize="26sp" />

MainActivity.java:

TextView txtView = (TextView) findViewById(R.id.txtView);

SpannableString spannableString = new SpannableString("RM123.456");
spannableString.setSpan( new TopAlignSuperscriptSpan( (float)0.35 ), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE );
txtView.setText(spannableString);

TopAlignSuperscriptSpan.java:

private class TopAlignSuperscriptSpan extends SuperscriptSpan {
        //divide superscript by this number
        protected int fontScale = 2;

        //shift value, 0 to 1.0
        protected float shiftPercentage = 0;

        //doesn't shift
        TopAlignSuperscriptSpan() {}

        //sets the shift percentage
        TopAlignSuperscriptSpan( float shiftPercentage ) {
            if( shiftPercentage > 0.0 && shiftPercentage < 1.0 )
                this.shiftPercentage = shiftPercentage;
        }

        @Override
        public void updateDrawState( TextPaint tp ) {
            //original ascent
            float ascent = tp.ascent();

            //scale down the font
            tp.setTextSize( tp.getTextSize() / fontScale );

            //get the new font ascent
            float newAscent = tp.getFontMetrics().ascent;

            //move baseline to top of old font, then move down size of new font
            //adjust for errors with shift percentage
            tp.baselineShift += ( ascent - ascent * shiftPercentage )
                    - (newAscent - newAscent * shiftPercentage );
        }

        @Override
        public void updateMeasureState( TextPaint tp ) {
            updateDrawState( tp );
        }
    }

Hope this will help you.

But, that is not aligned still. You can see "RM" is position higher than "123.456" — Cheok Yan Cheng, May 04 '16 at 05:40
@CheokYanCheng, can you please post screen shot what you want ? — Hiren Patel, May 04 '16 at 05:41
Hi @HirenPatel, may I know how do you choose 0.35 as `shiftPercentage`? Is it via trial-n-error? — Cheok Yan Cheng, Jun 06 '16 at 21:33
@CheokYanCheng, first two characters will occupy 0.35 % size as compare to other character. — Hiren Patel, Jun 07 '16 at 03:59
Sorry. I am still don't understand. Can you show in details, on how u get 0.35% ? — Cheok Yan Cheng, Jun 07 '16 at 04:08
@CheokYanCheng, if you write 0.50 than first two character's size will be half than other characters and why first two characters because I have set span for it. — Hiren Patel, Jun 07 '16 at 04:18

score 14 · Answer 2 · edited May 23 '17 at 12:25

You could achieve top gravity by creating a custom MetricAffectingSpan class

here is the code of custom class:

public class CustomCharacterSpan extends MetricAffectingSpan {
    double ratio = 0.5;

    public CustomCharacterSpan() {
    }

    public CustomCharacterSpan(double ratio) {
        this.ratio = ratio;
    }

    @Override
    public void updateDrawState(TextPaint paint) {
        paint.baselineShift += (int) (paint.ascent() * ratio);
    }

    @Override
    public void updateMeasureState(TextPaint paint) {
        paint.baselineShift += (int) (paint.ascent() * ratio);
    }
}

Applying the span:

spannableString.setSpan(new RelativeSizeSpan(0.50f), 0, index, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
spannableString.setSpan(new CustomCharacterSpan(), 0, index,
                SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString, TextView.BufferType.SPANNABLE);

Output:

For more info on MetricAffectingSpan : http://developer.android.com/reference/android/text/style/MetricAffectingSpan.html

Custom MetricAffectingSpan logic referred from : Two different styles in a single textview with different gravity and hieght

score 14 · Answer 3 · answered May 07 '16 at 12:39

I had a look at the RelativeSizeSpan and found a rather simple implementation. So you could just implement your own RelativeSizeSpan for your purpose. The only difference here is that it doesn't implement ParcelableSpan, since this is only intended for framework code. AntiRelativeSizeSpan is just a fast hack without much testing of course, but it seems to work fine. It completely relies on Paint.getTextBounds() to find the best value for the baselineShift, but maybe there'd be a better approach.

public class AntiRelativeSizeSpan extends MetricAffectingSpan {
    private final float mProportion;

    public AntiRelativeSizeSpan(float proportion) {
        mProportion = proportion;
    }

    public float getSizeChange() {
        return mProportion;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        updateAnyState(ds);
    }

    @Override
    public void updateMeasureState(TextPaint ds) {
        updateAnyState(ds);
    }

    private void updateAnyState(TextPaint ds) {
        Rect bounds = new Rect();
        ds.getTextBounds("1A", 0, 2, bounds);
        int shift = bounds.top - bounds.bottom;
        ds.setTextSize(ds.getTextSize() * mProportion);
        ds.getTextBounds("1A", 0, 2, bounds);
        shift += bounds.bottom - bounds.top;
        ds.baselineShift += shift;
    }
}

Srinivasan · Answer 4 · 2016-05-10T12:38:45.207

I have implemented this in one of my application.

 <TextView
    android:id="@+id/txt_formatted_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textColor="#000000"       
    android:textSize="28dp" />

In Activity/Frgament.class

 myTextView = (TextView) view.findViewById(R.id.txt_formatted_value);

Hardcoded for testing purpose,

String numberValue = "123.456";    
myTextView.setText(UtilityClass.getFormattedSpannedString("RM"+numberValue,
     numberValue.length(),0));

Add this class in your package,

public class SuperscriptSpanAdjuster extends MetricAffectingSpan {
double ratio = 0.5;

public SuperscriptSpanAdjuster() {
}

public SuperscriptSpanAdjuster(double ratio) {
    this.ratio = ratio;
}

@Override
public void updateDrawState(TextPaint paint) {
    paint.baselineShift += (int) (paint.ascent() * ratio);
}

@Override
public void updateMeasureState(TextPaint paint) {
    paint.baselineShift += (int) (paint.ascent() * ratio);
}

}

Created the format method in UntilityClass.class

 public static SpannableString getFormattedSpannedString(String value, int mostSignificantLength, int leastSignificantLength){

    SpannableString  spanString = new SpannableString(value);
    /* To show the text in top aligned(Normal)*/
    spanString.setSpan(new SuperscriptSpanAdjuster(0.7), 0,spanString.length()-mostSignificantLength-leastSignificantLength, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
    /* Show the number of characters is normal size (Normal)*/
    spanString.setSpan(new RelativeSizeSpan(1.3f), 0,spanString.length()-mostSignificantLength-leastSignificantLength, 0);
    /*To set the text style as bold(MostSignificant)*/
    //spanString.setSpan(new StyleSpan(Typeface.BOLD), spanString.length()-mostSignificantLength-leastSignificantLength, spanString.length()-leastSignificantLength, 0);
    /*To set the text color as WHITE(MostSignificant)*/
    //spanString.setSpan(new ForegroundColorSpan(Color.WHITE), spanString.length()-mostSignificantLength-leastSignificantLength,  spanString.length()-leastSignificantLength, 0);
    /*Show the number of characters as most significant value(MostSignificant)*/
    spanString.setSpan(new RelativeSizeSpan(2.3f), spanString.length()-mostSignificantLength-leastSignificantLength, spanString.length()-leastSignificantLength, 0);

    /* To show the text in top aligned(LestSignificant)*/
    spanString.setSpan(new SuperscriptSpanAdjuster(1.2), spanString.length()-leastSignificantLength, spanString.length(), SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
    /*To set the text style as bold(LestSignificant)*/
    //spanString.setSpan(new StyleSpan(Typeface.BOLD), spanString.length()-leastSignificantLength, spanString.length(), 0);
    /*Show the number of characters as most significant value(LestSignificant)*/
    spanString.setSpan(new RelativeSizeSpan(0.8f), spanString.length()-leastSignificantLength, spanString.length(), 0);

    return spanString;
}

Using this method you can do more circus like changing text style, color separately for SuperScript. Also you can add superscript both right and left side.(Here I commented all the code, if you want can give a try...)

@Srivivasan I can't find last format (BLUE one) from getFormattedSpannedString , I Have tried all of them but none of them gives same result. — Ronak Mehta, Jan 20 '17 at 09:56
@RonakMehta I commented that code. You have to set the ForegroundColorSpan value(In sample added WHITE).You can change it to BLUE. — Srinivasan, Jan 23 '17 at 09:04
This is the only solution that works correctly to align to top with any font and any text size. — Greg Ennis, Jan 10 '19 at 21:58

score 8 · Answer 5 · answered May 06 '16 at 07:59

8

the best suitable solution is go with html.

i will prefer for this solutions,it supports in all android version as well devices.

here is example take it same as you want text

<p><sup>TM</sup> 123.456.</p>

i am getting result in android

^TM 123.456.

you can easily display text in Textview in android with

Html.fromText("YOUR_STRING_INHTML");

Hope it helps.

answered May 06 '16 at 07:59

Imtiyaz Khalani

2,037
18
32

1

Maybe you mean ```Html.fromHtml(...)``` instead of ```Html.fromText(...)``` – Mahmoud Apr 16 '19 at 03:34

score 6 · Answer 6 · edited May 08 '16 at 21:23

you have to used html tag like below for subscript and superscript.It works like charm.

 ((TextView) findViewById(R.id.text)).setText(Html.fromHtml("<sup><small>2</small></sup>X"));

or

You can also use below code:

String titleFirst = "Insert GoTechTM device into the vehicle\'s OBDII port.";
SpannableStringBuilder cs = new SpannableStringBuilder(titleFirst);
cs.setSpan(new SuperscriptSpan(), titleFirst.indexOf("TM"), titleFirst.indexOf("TM")+2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
cs.setSpan(new RelativeSizeSpan((float)0.50), titleFirst.indexOf("TM"), titleFirst.indexOf("TM")+2, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);        
txtPairInstructionFirst.setText(cs);

Oleksandr · Answer 7 · 2017-02-13T16:16:05.037

Class for top align which should be used instead of RelativeSizeSpan (not in additional to):

import android.text.TextPaint;
import android.text.style.MetricAffectingSpan;

public class TopRelativeSizeSpan extends MetricAffectingSpan {

    private final float mProportion;

    public TopRelativeSizeSpan(float proportion) {
        mProportion = proportion;
    }

    @Override
    public void updateDrawState(TextPaint ds) {
        ds.baselineShift += (mProportion - 1) * (ds.getTextSize() - ds.descent());
        ds.setTextSize(ds.getTextSize() * mProportion);
    }

    @Override
    public void updateMeasureState(TextPaint ds) {
        updateDrawState(ds);
    }
}

And usage:

spannableString.setSpan(new TopRelativeSizeSpan(0.50f), 0, index, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(spannableString, TextView.BufferType.SPANNABLE);

The best one so far – abhishek maharajpet Mar 09 '22 at 11:29 — abhishek maharajpet, Mar 09 '22 at 11:29

w3bshark · Answer 8 · 2019-01-31T14:13:24.453

Many of the provided answers here require you to set a text size scale percentage and guess an offset to account for their mistake in calculating the correct offset or they require you to set multiple spans.

So, to update this question, here's a solution which sets the correct baseline of the superscript and only asks that you provide a text scale percentage for only 1 required span:

class TopAlignSuperscriptSpan(private val textSizeScalePercentage: Float = 0.5f) : MetricAffectingSpan() {

    override fun updateDrawState(tp: TextPaint) {
        tp.baselineShift += (tp.ascent() * textSizeScalePercentage).toInt()
        tp.textSize = tp.textSize * textSizeScalePercentage
    }

    override fun updateMeasureState(tp: TextPaint) {
        updateDrawState(tp)
    }
}

You may use this without having to set other spans, like so:

val spannableString = SpannableString("RM123.456")
spannableString.setSpan(TopAlignSuperscriptSpan(0.6f), 0, 2, SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE)
myTextView.text = spannableString

"RM" will be 60% of the text size of "123.456" and it's top will be exactly aligned to the top of "123.456"

UPDATE: You shouldn't use this because it is inexact, like every other answer here. Instead, I would suggest calculating the height of each section of the text view and manually setting the y value of each section, like this library does: https://github.com/fabiomsr/MoneyTextView/tree/master/moneytextview/src/main/res/values

score 0 · Answer 9 · answered Feb 02 '19 at 05:32

I know this is an old thread, but I just came across this today, and I'm surprised no one answered with this... I'd recommend not hardcoding the 2, 4 but you can figure out how to

val span = SpannableStringBuilder.valueOf("$temp")
span.append("°F", SuperscriptSpan(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
span.setSpan(RelativeSizeSpan(0.5f), 2, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
tempTextView.setText(span, TextView.BufferType.SPANNABLE)

How to make RelativeSizeSpan align to top

9 Answers9

Linked