How to use seek bar thumb override view on Android kotlin

29 Views Asked by At

I want to create a verticalSeekbar and a custom view to overlap the searchbar thumb. Because in my customview there will be many things, but in the code below I have omitted some items and I have VerticelSeekBar as below: I tried a lot of ways to get ThumbView to copy the seekbar thumb position since the search bar thumb drag, but without success. Anyone any other solution help me? I will be very grateful

My code same as below:


class VerticalSeekBar : SeekBar {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?, defStyle: Int) : super(
        context,
        attrs,
        defStyle
    )

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
        initialize()
    }

    private var thumbView: View? = null

    fun setThumbView(view: View) {
        thumbView = view
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(h, w, oldh, oldw)
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec)
        setMeasuredDimension(measuredHeight, measuredWidth)
    }


    override fun onDraw(c: Canvas) {
        c.rotate(-90f)
        c.translate((-height).toFloat(), 0f)
        updateThumbViewPosition()
        super.onDraw(c)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (!isEnabled) {
            return false
        }
        when (event.action) {
//            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
//                var progress = (max * event.y / height).toInt()
//                progress = when {
//                    progress > max -> max
//                    progress < 0 -> 0
//                    else -> progress
//                }
//                progress = max - progress
//                setProgress(progress)
//                onSizeChanged(width, height, 0, 0)
//            }
            MotionEvent.ACTION_DOWN, MotionEvent.ACTION_MOVE, MotionEvent.ACTION_UP -> {
                val progress =
                    (max * (event.y - paddingRight) / (height - paddingRight - paddingLeft)).toInt()
                        .coerceIn(0, max)
                setProgress(max - progress)
                onSizeChanged(width, height, 0, 0)
            }

            MotionEvent.ACTION_CANCEL -> {
            }
        }
        return true
    }

    private fun initialize() {
        thumb = resources.getDrawable(R.drawable.thumb, null)
        this.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                updateThumbViewPosition()
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                // Optional: Handle start of touch event.
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                // Optional: Handle end of touch event.
            }
        })
    }

    private fun updateThumbViewPosition() {
        thumbView?.let { view ->
            val trackHeight = height - paddingBottom - paddingTop
            val progressRatio = progress / max.toFloat()
            val thumbPos = paddingTop + (trackHeight - view.height) * (1 - progressRatio)
            view.translationY = thumbPos
        }
        
    }
}

and xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <com.io.VerticalSeekBar
            android:id="@+id/customSeekBar"
            android:thumb="@drawable/thumb"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:layout_centerInParent="true" />

        <View
            android:id="@+id/thumbView"
            android:layout_width="20dp"
            android:background="@color/black"
            android:layout_height="20dp"/>

</RelativeLayout>

I want viewThumb to overlap thumb of seekbar

0

There are 0 best solutions below