A transparent dot coming on the Vertical SeekBar while seeking down on Android

Question

I have added a Vertical SeekBar in my android application which doesn't show the thumb on the SeekBar. This is working all fine but having a small issue - when I scroll/swipe the SeekBar to the bottom, it starts showing the transparent dot the top of SeekBar.

The SeekBar is part of LinearLayout which is also swipe-able (as we want the complete SeekBar component to be swipe-able).

I tried several things like nulling the thumb, setting the SeekBar to non focusable etc but nothing is working.

Here is the Layout of the Brightness control:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/brightness_control_layout_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/brightness_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mobile_vertical_control_background"
        android:orientation="vertical"
        android:paddingHorizontal="5dp"
        android:paddingVertical="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingVertical="1dp"
            android:text="+"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <com.example.view.wigdet.VerticalSeekBar
            android:id="@+id/seekbar"
            android:layout_width="10dp"
            android:layout_height="100dp"
            android:layout_gravity="center_horizontal"
            android:progressTint="@color/white"
            android:secondaryProgressTint="@color/light_grey"
            android:splitTrack="false"
            android:thumbTint="@android:color/transparent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingVertical="1dp"
            android:text="-"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/brightness_icon" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is the Vertical SeekBar View:

class VerticalSeekBar : androidx.appcompat.widget.AppCompatSeekBar {
    private var changeListener: OnSeekBarChangeListener? = null

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

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

    override fun setOnSeekBarChangeListener(l: OnSeekBarChangeListener) {
        this.changeListener = l
    }

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

    @Synchronized
    override fun setProgress(progress: Int) // it is necessary for calling setProgress on click of a button
    {
        super.setProgress(progress)
        onSizeChanged(width, height, 0, 0)
    }

    @Synchronized
    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)
        super.onDraw(c)
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        if (!isEnabled) {
            return false
        }

        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                isSelected = true
                isPressed = true
                changeListener?.onStartTrackingTouch(this)
            }
            MotionEvent.ACTION_UP -> {
                isSelected = false
                isPressed = false
                changeListener?.onStopTrackingTouch(this)
            }
            MotionEvent.ACTION_MOVE -> {
                val progress = (max
                        - (max * event.y / height).toInt())
                setProgress(progress)
                onSizeChanged(width, height, 0, 0)
                changeListener?.onProgressChanged(this, progress, true)
            }
            MotionEvent.ACTION_CANCEL -> {
            }
        }
        return true
    }
}

Here is how I have added the Touch listener to the LinearLayout and SeekBar:

        binding.brightnessContainer.setOnTouchListener(
            object : OnTouchListener {
                @SuppressLint("ClickableViewAccessibility")
                override fun onTouch(v: View?, event: MotionEvent?): Boolean {
                    // Logic to calculate the swiped position and setting the brighness
                    return true
                }
            })

        binding.brightnessContainer.seekbar.setOnSeekBarChangeListener(
            object : SeekBar.OnSeekBarChangeListener {
                override fun onProgressChanged(
                    seekBar: SeekBar?,
                    progress: Int,
                    fromUser: Boolean
                ) {
                    // logic to calculate current progress
                }

                override fun onStartTrackingTouch(seekBar: SeekBar?) {
                }

                override fun onStopTrackingTouch(seekBar: SeekBar?) {
                    // logic to set the current progress
                }
            }
        )

Here is how the transparent dot is showing on the SeekBar when swapped down: SeekBar

It would be really helpful if I get to know what I am missing in this implementation. Thanks in advance.

Answer 1

try adding a transparent background. For example: android:background="#00FFFFFF"