Order List in Textview Android Kotlin

Question

Hey I want to show text in order list in textview in android Kotlin. I tried Ordered List inside an Android Textview . I tried heres code it works, but its miss match the height of number and text . I will share the code what i done so far.

NumberIndentSpan.kt

import android.graphics.Canvas
import android.graphics.Paint
import android.text.Layout
import android.text.style.LeadingMarginSpan

class NumberIndentSpan(
    private val leadWidth: Int,
    private val gapWidth: Int,
    private val index: Int
) : LeadingMarginSpan {

    override fun getLeadingMargin(first: Boolean): Int = leadWidth + gapWidth

    override fun drawLeadingMargin(
        c: Canvas?,
        p: Paint?,
        x: Int,
        dir: Int,
        top: Int,
        baseline: Int,
        bottom: Int,
        text: CharSequence?,
        start: Int,
        end: Int,
        first: Boolean,
        layout: Layout?
    ) {
        if (first) {
            val orgStyle = p!!.style
            p.style = Paint.Style.FILL
            val width = p.measureText("4.")
            c!!.drawText("$index.", (leadWidth + x - width / 2) * dir, bottom - p.descent(), p)
            p.style = orgStyle
        }
    }
}

MainActivity.kt

 val list = mutableListOf(
                "Log in Google account\n",
                "Scroll to the page\n",
                "Tap disconnect from account to logout"
            )
            var number = 1
            val builder = SpannableStringBuilder()
            for (text in list) {
                val contentStart: Int = builder.length
                builder.append(text)
                builder.setSpan(NumberIndentSpan(15, 15, number), contentStart, builder.length, 0)
                number++
            }
            textView.text = builder

I want to place number and text at equal height. As images show what i getting from this code. Also i am getting format issue like as 1st point and 2nd point text starting is different, i want in sequence. How can i fix all these things. Thanks in advance

Answer 1

I had the same issue. That's because you have applied a custom font and most likely a line spacing extra that you are not contemplating during the Y positioning.

This is my working solution: https://gist.github.com/marcelpallares/ae6285ee0dcb3f04493991dcb18d01bd

class NumberIndentSpan(
    private val number: Int,
    private val leadWidth: Int = 15,
    private val gapWidth: Int = 30,
) : LeadingMarginSpan {
    override fun getLeadingMargin(first: Boolean): Int {
        return leadWidth + gapWidth
    }

    override fun drawLeadingMargin(
        canvas: Canvas,
        paint: Paint,
        x: Int,
        dir: Int,
        top: Int,
        baseline: Int,
        bottom: Int,
        t: CharSequence?,
        start: Int,
        end: Int,
        first: Boolean,
        layout: Layout?
    ) {
        if (first) {
            val text = "$number."
            val width = paint.measureText(text)

            val yPosition = baseline.toFloat()
            val xPosition = (leadWidth + x - width / 2) * dir

            canvas.drawText(text, xPosition, yPosition, paint)
        }
    }
}