Different font size of strings in the same TextView

Question

I have a textView inside with a number (variable) and a string, how can I give the number one size larger than the string? the code:

TextView size = (TextView)convertView.findViewById(R.id.privarea_list_size);
if (ls.numProducts != null) {
    size.setText(ls.numProducts + " " + mContext.getString(R.string.products));
}

I want ls.numproducts has a size different from the rest of the text. How to do?

score 419 · Accepted Answer · edited Dec 11 '18 at 11:32

419

Use a Spannable String

 String s= "Hello Everyone";
 SpannableString ss1=  new SpannableString(s);
 ss1.setSpan(new RelativeSizeSpan(2f), 0,5, 0); // set size
 ss1.setSpan(new ForegroundColorSpan(Color.RED), 0, 5, 0);// set color
 TextView tv= (TextView) findViewById(R.id.textview);
 tv.setText(ss1);

Snap shot

enter image description here

You can split string using space and add span to the string you require.

 String s= "Hello Everyone";  
 String[] each = s.split(" ");

Now apply span to the string and add the same to textview.

edited Dec 11 '18 at 11:32

AskNilesh

67,701
16
123
163

answered May 02 '13 at 10:10

Raghunandan

132,755
26
225
256

setSpan() return: java.lang.IndexOutOfBoundsException: setSpan (0 ... 5) ends beyond length 1. What does that mean? – Ortensia C. May 02 '13 at 11:10
check the length of the string. IndexOutOfBoundsException: indicating wrong index position for start and end of span. in the above Hello length is 5 so i applied span from index 0 to 5 – Raghunandan May 02 '13 at 11:12
Worked on Google Glass perfectly! – Mohammad Arman Nov 05 '15 at 07:22
3

is there a way to move the characters which are small to the center in the vertical direction? Basically all the characters should be vertically centered regardless of the size. – 500865 Sep 23 '16 at 22:16
You probably need two text views in that case or else you need to make your own text view – Raghunandan Sep 24 '16 at 05:17
How can I use dip for `RelativeSizeSpan`? – quangkid Jan 22 '18 at 07:06

score 151 · Answer 2 · edited Feb 15 '18 at 14:08

Just in case you're wondering how you can set multiple different sizes in the same textview, but using an absolute size and not a relative one, you can achieve that using AbsoluteSizeSpan instead of a RelativeSizeSpan.

Just get the dimension in pixels of the desired text size

int textSize1 = getResources().getDimensionPixelSize(R.dimen.text_size_1);
int textSize2 = getResources().getDimensionPixelSize(R.dimen.text_size_2);

and then create a new AbsoluteSpan based on the text

String text1 = "Hi";
String text2 = "there";

SpannableString span1 = new SpannableString(text1);
span1.setSpan(new AbsoluteSizeSpan(textSize1), 0, text1.length(), SPAN_INCLUSIVE_INCLUSIVE);

SpannableString span2 = new SpannableString(text2);
span2.setSpan(new AbsoluteSizeSpan(textSize2), 0, text2.length(), SPAN_INCLUSIVE_INCLUSIVE);

// let's put both spans together with a separator and all
CharSequence finalText = TextUtils.concat(span1, " ", span2);

You can also use `AbsoluteSizeSpan(sizeInDip, true)` to specify size directly in dp — Ilia Grabko, Apr 11 '19 at 14:30

score 10 · Answer 3 · edited May 04 '13 at 08:16

10

You can get this done using html string and setting the html to Textview using
txtView.setText(Html.fromHtml("Your html string here"));

For example :

txtView.setText(Html.fromHtml("<html><body><font size=5 color=red>Hello </font> World </body><html>"));`

edited May 04 '13 at 08:16

Raghunandan

132,755
26
225
256

answered May 02 '13 at 10:01

Remmyabhavan

1,689
5
36
65

1

Nice contribution! But fromHtml from now on (API >= N) is deprecated. For this to work do this to allow compatibility mode: **if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) { txtView.setText(Html.fromHtml("your html string")), Html.FROM_HTML_MODE_LEGACY)); } else { txtView.setText(Html.fromHtml("your html string")); }** – statosdotcom Jul 01 '16 at 04:24
1

What is the unit of "5" ? Is it dp? Is it sp ? How can I change it to any of those? – android developer Apr 23 '20 at 11:28
2

colors and family works however, size doesn't work. – c-an Jul 29 '20 at 04:12

score 9 · Answer 4 · edited Dec 22 '18 at 12:49

private SpannableStringBuilder SpannableStringBuilder(final String text, final char afterChar, final float reduceBy) {
        RelativeSizeSpan smallSizeText = new RelativeSizeSpan(reduceBy);
        SpannableStringBuilder ssBuilder = new SpannableStringBuilder(text);
        ssBuilder.setSpan(
                smallSizeText,
                text.indexOf(afterChar),
                text.length(),
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        );

        return ssBuilder;
    }
------------------------
TextView textView =view.findViewById(R.id.textview);
String s= "123456.24";
textView.setText(SpannableStringBuilder(s, '.', 0.7f));

---------------- Result ---------------

Result :

12345.₂₄

score 8 · Answer 5 · answered Nov 17 '17 at 02:09

Method 1

public static void increaseFontSizeForPath(Spannable spannable, String path, float increaseTime) {
    int startIndexOfPath = spannable.toString().indexOf(path);
    spannable.setSpan(new RelativeSizeSpan(increaseTime), startIndexOfPath,
            startIndexOfPath + path.length(), 0);
}

using

Utils.increaseFontSizeForPath(spannable, "big", 3); // make "big" text bigger 3 time than normal text

Method 2

public static void setFontSizeForPath(Spannable spannable, String path, int fontSizeInPixel) {
    int startIndexOfPath = spannable.toString().indexOf(path);
    spannable.setSpan(new AbsoluteSizeSpan(fontSizeInPixel), startIndexOfPath,
            startIndexOfPath + path.length(), 0);
}

using

Utils.setFontSizeForPath(spannable, "big", (int) textView.getTextSize() + 20); // make "big" text bigger 20px than normal text

score 4 · Answer 6 · answered Feb 14 '19 at 14:50

The best way to do that is Html without substring your text and fully dynamique For example :

  public static String getTextSize(String text,int size) {
         return "<span style=\"size:"+size+"\" >"+text+"</span>";

    }

and you can use color attribut etc... if the other hand :

size.setText(Html.fromHtml(getTextSize(ls.numProducts,100) + " " + mContext.getString(R.string.products));

score 3 · Answer 7 · answered May 02 '13 at 10:04

3

Try spannableStringbuilder. Using this we can create string with multiple font sizes.

answered May 02 '13 at 10:04

PgmFreek

6,374
3
36
47

score 2 · Answer 8 · answered Feb 13 '18 at 12:25

I have written my own function which takes 2 strings and 1 int (text size)

The full text and the part of the text you want to change the size of it.

It returns a SpannableStringBuilder which you can use it in text view.

  public static SpannableStringBuilder setSectionOfTextSize(String text, String textToChangeSize, int size){

        SpannableStringBuilder builder=new SpannableStringBuilder();

        if(textToChangeSize.length() > 0 && !textToChangeSize.trim().equals("")){

            //for counting start/end indexes
            String testText = text.toLowerCase(Locale.US);
            String testTextToBold = textToChangeSize.toLowerCase(Locale.US);
            int startingIndex = testText.indexOf(testTextToBold);
            int endingIndex = startingIndex + testTextToBold.length();
            //for counting start/end indexes

            if(startingIndex < 0 || endingIndex <0){
                return builder.append(text);
            }
            else if(startingIndex >= 0 && endingIndex >=0){

                builder.append(text);
                builder.setSpan(new AbsoluteSizeSpan(size, true), startingIndex, endingIndex, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
            }
        }else{
            return builder.append(text);
        }

        return builder;
    }

score 2 · Answer 9 · answered Aug 03 '21 at 08:02

Utils method for kotlin lover

fun String.setFontSizeForPath(path: String, fontSizeInPixel: Int, colorCode: String = "#FF0000"): SpannableString {
    val spannable = SpannableString(this)
    val startIndexOfPath = spannable.toString().indexOf(path)
    spannable.setSpan(
        AbsoluteSizeSpan(fontSizeInPixel),
        startIndexOfPath,
        startIndexOfPath + path.length,
        0
    )
    spannable.setSpan(
        ForegroundColorSpan(Color.parseColor(colorCode)),
        startIndexOfPath,
        startIndexOfPath + path.length,
        0
    )

    return spannable
}

Use

text_view.text = "A B C D".setFontSizeForPath("B",30)

score 1 · Answer 10 · answered Jan 23 '22 at 01:34

private SpannableString getFormattedText(String textToBold, String normalText, boolean boldTextFirst) {
    String result = boldTextFirst ? textToBold + normalText : normalText + textToBold;
    SpannableString str = new SpannableString(result);

    Typeface typeface = ResourcesCompat.getFont(requireContext(), R.font.product_sans_bold);
    int style = typeface != null ? typeface.getStyle() : Typeface.BOLD;

    int textToBoldStartIndex = str.toString().indexOf(textToBold);
    str.setSpan(new StyleSpan(style), textToBoldStartIndex, textToBoldStartIndex + textToBold.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

    int normalTextStartIndex = str.toString().indexOf(normalText);
    str.setSpan(new AbsoluteSizeSpan(13, true), normalTextStartIndex, normalTextStartIndex + normalText.length(), 0);
    return str;
}

score 1 · Answer 11 · answered Dec 21 '22 at 17:16

Kotlin version on @Anandharaj R answer.

class SpannableStringBuilderHelper {

companion object {

    fun reduceTextSizeAfterChar(text: String, afterChar: Char, reduceBy: Float): SpannableStringBuilder? {
        val smallSizeText = RelativeSizeSpan(reduceBy)
        val ssBuilder = SpannableStringBuilder(text)
        ssBuilder.setSpan(
            smallSizeText,
            text.indexOf(afterChar),
            text.length,
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
        )
        return ssBuilder
    }
}

}

Usage:

SpannableStringBuilderHelper.reduceTextSizeAfterChar("70/100", '/', 0.7f)

score 0 · Answer 12 · answered Apr 23 '20 at 11:56

In case you want to avoid too much confusion for your translators, I've come up with a way to have just a placeholder in the strings, which will be handled in code.

So, supposed you have this in the strings:

    <string name="test">
        <![CDATA[
        We found %1$s items]]>
    </string>

And you want the placeholder text to have a different size and color, you can use this:

        val textToPutAsPlaceHolder = "123"
        val formattedStr = getString(R.string.test, "$textToPutAsPlaceHolder<bc/>")
        val placeHolderTextSize = resources.getDimensionPixelSize(R.dimen.some_text_size)
        val placeHolderTextColor = ContextCompat.getColor(this, R.color.design_default_color_primary_dark)
        val textToShow = HtmlCompat.fromHtml(formattedStr, HtmlCompat.FROM_HTML_MODE_LEGACY, null, object : Html.TagHandler {
            var start = 0
            override fun handleTag(opening: Boolean, tag: String, output: Editable, xmlReader: XMLReader) {
                when (tag) {
                    "bc" -> if (!opening) start = output.length - textToPutAsPlaceHolder.length
                    "html" -> if (!opening) {
                        output.setSpan(AbsoluteSizeSpan(placeHolderTextSize), start, start + textToPutAsPlaceHolder.length, 0)
                        output.setSpan(ForegroundColorSpan(placeHolderTextColor), start, start + textToPutAsPlaceHolder.length, 0)
                    }
                }
            }
        })
        textView.text = textToShow

And the result:

Shashank Pandey · Answer 13 · 2020-08-17T08:13:20.510

-3

in kotlin do it as below by using html

HtmlCompat.fromHtml("<html><body><h1>This is Large Heading :-</h1><br>This is normal size<body></html>",HtmlCompat.FROM_HTML_MODE_LEGACY)

edited Aug 17 '20 at 08:13

answered Aug 09 '20 at 17:59

Shashank Pandey

683
6
14

Usage of `fromHtml()` method can lead to performance issue and it is not a best practice. – ilbose Nov 25 '20 at 16:40

Different font size of strings in the same TextView

13 Answers13

Result :

Linked