How can I implement the custom view similar to this image?

Question

I want to implement this seek bar in my app. I have created a custom view for the same. The only problem I am facing is how to change the color of the text from black to white when the circular view goes over the text. The image showing the custom view

My onDraw method()

override fun onDraw(canvas: Canvas?) {
    canvas?.save()
    canvas?.drawCircle(thumbX + 20F, thumbY, thumbRadius, mThumbPaint)
    canvas?.drawBitmap(drawTextBitmap(), 0F, 0F, Paint().apply {
        isAntiAlias = true
    })
}

drawTextBitmap method which draws the track of 1 2 3 4 5 .....

private fun drawTextBitmap(): Bitmap {
    val h = height
    val w = width

    val conf = Bitmap.Config.ARGB_8888
    val bmp = Bitmap.createBitmap(w, h, conf)
    val newCanvas: Canvas? = Canvas(bmp)
    //newCanvas?.drawColor(Color.GREEN)

    val initialOffsetX = paddingLeftCustom + thumbRadius
    //newCanvas.drawColor(Color.BLACK)
    for (i in 1..10) {
        val textPaint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
        textPaint.color = Color.BLACK
        textPaint.textSize = TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_SP,
            20f,
            resources.displayMetrics
        )
            .toInt().toFloat()
        textPaint.textAlign = Paint.Align.LEFT
        val metric: Paint.FontMetrics = textPaint.fontMetrics
        val textHeight = Math.ceil((metric.descent - metric.ascent).toDouble()).toInt()
        textPaint.colorFilter = PorterDuffColorFilter(Color.WHITE, PorterDuff.Mode.DST)
        val y = (textHeight - metric.descent) as Float
        newCanvas?.drawText(i.toString(), initialOffsetX + (i - 1) * spaceBetweenTexts, y, textPaint)
    }

    return bmp
}

I am using Porter's Duff Concept. The issue I am facing is I want to blend the text color and the thumb color (Circular View) but on whichever view I apply my color filter to it takes the canvas color into consideration.

You gotta share some code to this custom view. – Vucko May 11 '21 at 13:32 — Vucko, May 11 '21 at 13:32

score 0 · Answer 1 · answered May 11 '21 at 13:46

0

You will need to use a for that text color. Something like: seat_item_text_color_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="@color/black">
    </item>
    <item
        android:state_selected="false"
        android:color="@color/white">
    </item>
</selector>

You will set this selector as text color for that TextView.

answered May 11 '21 at 13:46

Ionut Negru

6,186
4
48
78

I cant use it I think. Because what I am doing here is 1. Creating a custom view 2. In the custom view canvas I am creating a bitmap in this bitmap using the drawTextBitmap function that I have above mentioned I have drawn text using canvas.drawText function. 3. Then I have created a thumb or a circular view. So how can I use a selector on a custom drawn Text – Nikhil Jain May 11 '21 at 13:48
In that case you will need to add a state in your custom view (pressed & default) and based on that state to set the color of the TextPaint. Do not forget to force the redraw when the state changes. – Ionut Negru May 12 '21 at 06:42
I have found the way the only problem now I have is this https://stackoverflow.com/questions/18387814/drawing-on-canvas-porterduff-mode-clear-draws-black-why But nothing seems to work in my case. – Nikhil Jain May 12 '21 at 07:25

How can I implement the custom view similar to this image?

1 Answers1