SpannableStringBuilder setSpan doesn't work on Arabic text

Question

I am trying to build an Arabic string that contains spacial caracters with different color, text should be black and special catacters red, and different size between sentences. Like this:

This is my TexView definition:

<com.neopixl.pixlui.components.textview.TextView
    android:id="@+id/sura"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="@dimen/kuran_sure_text_size"
    android:textDirection="rtl"
    pixlui:typeface="fatih_araz_font.ttf"/>

And this is my code:

SpannableStringBuilder ssb = new SpannableStringBuilder();

for (int i = 0;  i < contentJsonArray.length(); ++i) {
    JSONObject suraJson = (JSONObject)contentJsonArray.get(i);
    Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - " +
            "Content " + i + " = " + suraJson.toString());
    ssb.append(suraJson.getString(KEY_VERSE));
    int start = ssb.length();

    if (i == contentJsonArray.length() - 1)
        break;

    // This has to be red and small but it doesn't
    ssb.append(" (#) ");
    ssb.setSpan(new ForegroundColorSpan(R.color.Red), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    ssb.setSpan(new AbsoluteSizeSpan(10, true), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}

Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - Sura = " + ssb.toString());
suraTextView.setText(ssb, TextView.BufferType.SPANNABLE);

I have tried solutions for following question but still can't make " (#) " red and small:

SpannableStringBuilder to create String with multiple fonts/text sizes etc Example?

Can anyone help me?

UPDATE:

None of these make text red:

ssb.setSpan(new ForegroundColorSpan(0xFF0000), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
ssb.setSpan(new ForegroundColorSpan(0xFF0000), start, ssb.length(), 0);
ssb.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.Red)), start, ssb.length(), 0);

This is also not working:

SpannableStringBuilder ssb = new SpannableStringBuilder();

for (int i = 0;  i < contentJsonArray.length(); ++i) {
    JSONObject suraJson = (JSONObject)contentJsonArray.get(i);
    Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - " +
            "Content " + i + " = " + suraJson.toString());
    Spannable spannable = new SpannableString(suraJson.getString(KEY_VERSE) + " (#) ");

    if (i == contentJsonArray.length() - 1)
        break;

    spannable.setSpan(
            new ForegroundColorSpan(
                    getResources().getColor(R.color.Red)),
            spannable.length() - 5,
            spannable.length(),
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    spannable.setSpan(
            new AbsoluteSizeSpan(10, true),
            spannable.length() - 5,
            spannable.length(),
            Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    ssb.append(spannable);
}

Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - Sura = " + ssb.toString());
suraTextView.setText(ssb);

SOLVED:

I have solved it. The problem was with PixUI library wich I used to load my custom Arabic font. When I removed it setSpan worked. I have swiched to Calligraphy library to load my custom font.

Following code and layout works fine:

<TextView
    android:id="@+id/sura"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="@dimen/kuran_sure_text_size"
    android:textDirection="rtl"/>

SpannableStringBuilder ssb = new SpannableStringBuilder();

for (int i = 0;  i < contentJsonArray.length(); ++i) {
    JSONObject suraJson = (JSONObject)contentJsonArray.get(i);
    Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - " +
            "Content " + i + " = " + suraJson.toString());
    ssb.append(suraJson.getString(KEY_VERSE));

    if (i == contentJsonArray.length() - 1)
        break;

    int start = ssb.length();
    ssb.append(" (#) ");
    ssb.setSpan(new ForegroundColorSpan(R.color.Red), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    ssb.setSpan(new AbsoluteSizeSpan(10, true), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}

Log.d(LOG_TAG, "QuranPageFragment - WebServiceClient.getVerse - success - Sura = " + ssb.toString());
CalligraphyTypefaceSpan typefaceSpan =
        new CalligraphyTypefaceSpan(
                TypefaceUtils.load(getActivity().getAssets(),
                        "fonts/fatih_araz_font.ttf"));
ssb.setSpan(typefaceSpan, 0, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
suraTextView.setText(ssb);

Result:

@pskink you were right about color code. It should be in form of 0xAARRGGBB

Answer 1

Use Calligraphy instead of PixUI. Here is the Gradle dependecy for it:

compile 'uk.co.chrisjenx:calligraphy:2.1.0'

Use TextView not some custom TextView like PixUI TextView.

<TextView
    android:id="@+id/sura"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="@dimen/kuran_sure_text_size"
    android:textDirection="rtl"/>

Apply custom font after building resulting text:

SpannableStringBuilder ssb = new SpannableStringBuilder();

for (int i = 0;  i < contentJsonArray.length(); ++i) {
    JSONObject json = (JSONObject)contentJsonArray.get(i);
    ssb.append(json.getString(KEY_SOME_KEY));

    if (i == contentJsonArray.length() - 1)
        break;

    int start = ssb.length();
    ssb.append("( # )");
    ssb.setSpan(new ForegroundColorSpan(R.color.Red), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    ssb.setSpan(new AbsoluteSizeSpan(10, true), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}

CalligraphyTypefaceSpan typefaceSpan =
        new CalligraphyTypefaceSpan(
                TypefaceUtils.load(getActivity().getAssets(),
                        "fonts/some_custom_font.ttf"));
ssb.setSpan(typefaceSpan, 0, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.setText(ssb);

Use color code for ForegroundColorSpan like 0xAARRGGBB as @pskink suggested:

ssb.setSpan(new ForegroundColorSpan(0xFFFF0000), start, ssb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);