not able to apply span to first letter in a word

Question

I am working on an animation that involves setting OutlineSpan to individual letter in a word . However when i apply the OutlineSpan to first letter its not reflecting

val string = "f"
val spannableString = SpannableString(string)
val outlineSpan = OutlineSpan(255, ContextCompat.getColor(this, R.color.white), 1f.dp)
//val outlineSpan = ForegroundColorSpan( ContextCompat.getColor(this, R.color.white))
spannableString.setSpan(outlineSpan, 0, 1, 0)
textViewHollow.setText(spannableString)

When i try applying another span it's working but not the outline span . Code to outline span https://gist.github.com/santaevpavel/61eb23092bdb8a926aeb8302ec95b4b6

Answer 1

I went through the actual lib of Outlined Text. Here: https://github.com/santaevpavel/OutlineSpan

I found a new updated version of OutlineSpan. You can replace your version with the following.

class OutlineSpan(
    @ColorInt private val strokeColor: Int,
    @Dimension private val strokeWidth: Float
): ReplacementSpan() {

    override fun getSize(
        paint: Paint,
        text: CharSequence,
        start: Int,
        end: Int,
        fontMetrics: Paint.FontMetricsInt?
    ): Int {
        if (fontMetrics != null && paint.fontMetricsInt != null) {
            fontMetrics.bottom = paint.fontMetricsInt.bottom
            fontMetrics.top = paint.fontMetricsInt.top
            fontMetrics.descent = paint.fontMetricsInt.descent
            fontMetrics.leading = paint.fontMetricsInt.leading
        }
        return paint.measureText(text.toString().substring(start until end)).toInt()
    }


    override fun draw(
        canvas: Canvas,
        text: CharSequence,
        start: Int,
        end: Int,
        x: Float,
        top: Int,
        y: Int,
        bottom: Int,
        paint: Paint
    ) {
        val originTextColor = paint.color

        paint.apply {
            color = strokeColor
            style = Paint.Style.STROKE
            this.strokeWidth = [email protected]
        }
        canvas.drawText(text, start, end, x, y.toFloat(), paint)

        paint.apply {
            color = originTextColor
            style = Paint.Style.FILL
        }
        canvas.drawText(text, start, end, x, y.toFloat(), paint)
    }

}

Then use it like:

val string = "f"
        val spannableString = SpannableString(string)
        val outlineSpan = OutlineSpan(ContextCompat.getColor(this, R.color.colorAccent), 3f)
        spannableString.setSpan(outlineSpan, 0, 1, 0)
        textViewHollow.text = spannableString

This resolves the issue.

Output: