Switch to Material Slider for reader seekbar

Co-authored-by: Jays2Kings <Jays2Kings@users.noreply.github.com>

app/src/main/java/eu/kanade/tachiyomi/ui/reader/ReaderActivity.kt

@@ -27,7 +27,6 @@ import android.view.WindowManager
 import android.view.animation.Animation
 import android.view.animation.AnimationUtils
 import android.widget.FrameLayout
-import android.widget.SeekBar
 import android.widget.Toast
 import androidx.core.graphics.ColorUtils
 import androidx.core.view.WindowCompat
@@ -39,6 +38,7 @@ import androidx.core.view.updateLayoutParams
 import androidx.lifecycle.lifecycleScope
 import com.davemorrissey.labs.subscaleview.SubsamplingScaleImageView
 import com.google.android.material.shape.MaterialShapeDrawable
+import com.google.android.material.slider.Slider
 import dev.chrisbanes.insetter.applyInsetter
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.database.models.Chapter
@@ -74,7 +74,6 @@ import eu.kanade.tachiyomi.util.system.toast
 import eu.kanade.tachiyomi.util.view.popupMenu
 import eu.kanade.tachiyomi.util.view.setTooltip
 import eu.kanade.tachiyomi.widget.listener.SimpleAnimationListener
-import eu.kanade.tachiyomi.widget.listener.SimpleSeekBarListener
 import kotlinx.coroutines.flow.drop
 import kotlinx.coroutines.flow.launchIn
 import kotlinx.coroutines.flow.merge
@@ -328,26 +327,22 @@ class ReaderActivity : BaseRxActivity<ReaderActivityBinding, ReaderPresenter>()
         }
 
         // Init listeners on bottom menu
-        binding.pageSeekbar.setOnSeekBarChangeListener(
+        binding.pageSlider.addOnSliderTouchListener(object : Slider.OnSliderTouchListener {
-            object : SimpleSeekBarListener() {
+            override fun onStartTrackingTouch(slider: Slider) {
-                override fun onStartTrackingTouch(seekBar: SeekBar) {
-                    super.onStartTrackingTouch(seekBar)
                 isScrollingThroughPages = true
             }
 
-                override fun onStopTrackingTouch(seekBar: SeekBar) {
+            override fun onStopTrackingTouch(slider: Slider) {
-                    super.onStopTrackingTouch(seekBar)
                 isScrollingThroughPages = false
             }
-
+        })
-                override fun onProgressChanged(seekBar: SeekBar, value: Int, fromUser: Boolean) {
+        binding.pageSlider.addOnChangeListener { slider, value, fromUser ->
             if (viewer != null && fromUser) {
-                        moveToPageIndex(value)
+                isScrollingThroughPages = true
-                        binding.pageSeekbar.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
+                moveToPageIndex(value.toInt())
+                slider.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY)
             }
         }
-            }
-        )
         binding.leftChapter.setOnClickListener {
             if (viewer != null) {
                 if (viewer is R2LPagerViewer) {
@@ -600,7 +595,7 @@ class ReaderActivity : BaseRxActivity<ReaderActivityBinding, ReaderPresenter>()
 
         binding.toolbar.title = manga.title
 
-        binding.pageSeekbar.isRTL = newViewer is R2LPagerViewer
+        binding.pageSlider.isRTL = newViewer is R2LPagerViewer
         if (newViewer is R2LPagerViewer) {
             binding.leftChapter.setTooltip(R.string.action_next_chapter)
             binding.rightChapter.setTooltip(R.string.action_previous_chapter)
@@ -724,7 +719,7 @@ class ReaderActivity : BaseRxActivity<ReaderActivityBinding, ReaderPresenter>()
         // Set bottom page number
         binding.pageNumber.text = "${page.number}/${pages.size}"
 
-        // Set seekbar page number
+        // Set page numbers
         if (viewer !is R2LPagerViewer) {
             binding.leftPageText.text = "${page.number}"
             binding.rightPageText.text = "${pages.size}"
@@ -733,9 +728,9 @@ class ReaderActivity : BaseRxActivity<ReaderActivityBinding, ReaderPresenter>()
             binding.leftPageText.text = "${pages.size}"
         }
 
-        // Set seekbar progress
+        // Set slider progress
-        binding.pageSeekbar.max = pages.lastIndex
+        binding.pageSlider.valueTo = pages.lastIndex.toFloat()
-        binding.pageSeekbar.progress = page.index
+        binding.pageSlider.value = page.index.toFloat()
     }
 
     /**

app/src/main/java/eu/kanade/tachiyomi/ui/reader/ReaderSeekBar.kt

@@ -1,55 +0,0 @@
-package eu.kanade.tachiyomi.ui.reader
-
-import android.content.Context
-import android.content.res.ColorStateList
-import android.graphics.Canvas
-import android.util.AttributeSet
-import android.view.MotionEvent
-import androidx.appcompat.widget.AppCompatSeekBar
-import eu.kanade.tachiyomi.R
-import eu.kanade.tachiyomi.util.system.getThemeColor
-
-/**
- * Seekbar to show current chapter progress.
- */
-class ReaderSeekBar @JvmOverloads constructor(
-    context: Context,
-    attrs: AttributeSet? = null
-) : AppCompatSeekBar(context, attrs) {
-
-    /**
-     * Whether the seekbar should draw from right to left.
-     */
-    var isRTL = false
-
-    /**
-     * Draws the seekbar, translating the canvas if using a right to left reader.
-     */
-    override fun draw(canvas: Canvas) {
-        if (isRTL) {
-            val px = width / 2f
-            val py = height / 2f
-
-            canvas.scale(-1f, 1f, px, py)
-        }
-        super.draw(canvas)
-    }
-
-    /**
-     * Handles touch events, translating coordinates if using a right to left reader.
-     */
-    override fun onTouchEvent(event: MotionEvent): Boolean {
-        if (isRTL) {
-            event.setLocation(width - event.x, event.y)
-        }
-        return super.onTouchEvent(event)
-    }
-
-    init {
-        // Set color to onPrimary when ColoredBars theme is applied
-        if (context.getThemeColor(R.attr.colorToolbar) == context.getThemeColor(R.attr.colorPrimary)) {
-            thumbTintList = ColorStateList.valueOf(context.getThemeColor(R.attr.colorOnPrimary))
-            progressTintList = thumbTintList
-        }
-    }
-}

app/src/main/java/eu/kanade/tachiyomi/ui/reader/ReaderSlider.kt

@@ -0,0 +1,31 @@
+package eu.kanade.tachiyomi.ui.reader
+
+import android.content.Context
+import android.util.AttributeSet
+import com.google.android.material.slider.Slider
+
+/**
+ * Slider to show current chapter progress.
+ */
+class ReaderSlider @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null
+) : Slider(context, attrs) {
+
+    init {
+        isTickVisible = false
+        stepSize = 1f
+        setLabelFormatter { value ->
+            (value.toInt() + 1).toString()
+        }
+    }
+
+    /**
+     * Whether the slider should draw from right to left.
+     */
+    var isRTL: Boolean
+        set(value) {
+            layoutDirection = if (value) LAYOUT_DIRECTION_RTL else LAYOUT_DIRECTION_LTR
+        }
+        get() = layoutDirection == LAYOUT_DIRECTION_RTL
+}

app/src/main/res/layout/reader_activity.xml

@@ -108,8 +108,8 @@
                         Wonky way of setting height due to issues with horizontally centering the thumb in Android 5.
                         See https://stackoverflow.com/questions/15701767/android-thumb-is-not-centered-in-seekbar
                     -->
-                    <eu.kanade.tachiyomi.ui.reader.ReaderSeekBar
+                    <eu.kanade.tachiyomi.ui.reader.ReaderSlider
-                        android:id="@+id/page_seekbar"
+                        android:id="@+id/page_slider"
                         android:layout_width="0dp"
                         android:layout_height="wrap_content"
                         android:layout_weight="1"