spannable string gives different result on different devices

Question

I am using SpannableStringBuilder to set a text on a textview but it is giving me different results on different devices.

Here is the code of spannableString builder

 SpannableStringBuilder builder = new SpannableStringBuilder();
        SpannableString first = new SpannableString("Directions to Send or Clear Alert:\n\n" +
                "Option 1 of 2: To Send Alert, click the \"");
        first.setSpan(new ForegroundColorSpan(Color.BLACK), 0, first.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        first.setSpan( new StyleSpan(Typeface.BOLD), 0,  first.length()-27, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        SpannableString second = new SpannableString("Match / STOP!");
        second.setSpan(new ForegroundColorSpan(Color.RED), 0, second.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);

        SpannableString third = new SpannableString("\" button next to the matching person.\n" +
                "Option 2 of 2: To Clear Alert, you can choose either of these 2 options:\n");
        third.setSpan(new ForegroundColorSpan(Color.BLACK), 0, third.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        third.setSpan( new StyleSpan(Typeface.BOLD), 38,  53, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        SpannableString third1 = new SpannableString("A) Click any of the \"");
        third1.setSpan(new ForegroundColorSpan(Color.BLACK), 0, third1.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        third1.setSpan( new StyleSpan(Typeface.BOLD), 0,  1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        SpannableString four = new SpannableString("No Match / CONTINUE");
        four.setSpan(new ForegroundColorSpan(Color.parseColor("#008000")), 0, four.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);

        SpannableString five = new SpannableString("\" buttons.\n" +
                "B) Click on the \"X\" (clear) button at the top right of this message screen.");
        five.setSpan(new ForegroundColorSpan(Color.BLACK), 0, five.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        five.setSpan( new StyleSpan(Typeface.BOLD), 11,  12, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

        builder.append(first);
        builder.append(second);
        builder.append(third);
        builder.append(third1);
        builder.append(four);
        builder.append(five);

        headingTv.setText(builder);

On some devices text appears like this which is correct,

but in some devices like google pixel2 it appears like this which is horrible.

Can anyone help me with this that why it is happening?

Answer 1

I tried to read the starting and ending postion of string from complete statement and then set Color or font style to it.

    String completeStatement = "A) Click any of the No Match / CONTINUE";//complete statement /line
                String search = "No Match / CONTINUE";
    
   
    
                Pattern word = Pattern.compile(search);
    
                Matcher match = word.matcher(completeStatement);
                int start = -1;
                int end = -1;
    
                while (match.find()) {
                    start = match.start();
                    end = match.end();
                }
    
    
                SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder(offerExpiredStatement);
                spannableStringBuilder.setSpan(new android.text.style.StyleSpan(android.graphics.Typeface.BOLD),
                        start, end,
                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
  spannableStringBuilder.setSpan(new ForegroundColorSpan(color), start, end, 0);
                textView.setText(spannableStringBuilder);

Kotlin

  val additionalAmountRequiredLabel: SpannedString = buildSpannedString {

            append("Additional ")

            bold {
                append("Rs.${mpiModel.additionalAmountRequired}")
            }
            append(" required")
        }

Answer 2

Give this a shot

String first = "Directions to Send or Clear Alert:\n\n" + "Option 1 of 2: To Send Alert, click the \"";
String second = "Match / STOP!";
String third = "\" button next to the matching person.\n" + "Option 2 of 2: To Clear Alert, you can choose either of these 2 options:\n";
String third1 = "A) Click any of the \"";
String four = "No Match / CONTINUE";
String five = "\" buttons.\n" + "B) Click on the \"X\" (clear) button at the top right of this message screen.";


int blackColor = ContextCompat.getColor(mContext,R.color.black);
Spanned third1Spanned = setSpanColor(third1, blackColor);
headingTv.setText(TextUtils.concat(
        first,
        " " ,
        second,
        " " ,
        third,
        " " ,
        third1Spanned,
        " " ,
        four,
        " " ,
        five));


public static Spanned setSpanColor(String s, int color) {
    SpannableString ss = new SpannableString(s);
    ss.setSpan(new ForegroundColorSpan(color), 0, s.length(), 0);
    ss.setSpan(new StyleSpan(android.graphics.Typeface.BOLD),0,s.length(),SPAN_EXCLUSIVE_EXCLUSIVE);
    return ss;
}