Move PageIndicatorText to Compose

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

@@ -0,0 +1,42 @@
+package eu.kanade.tachiyomi.ui.reader
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun PageIndicatorText(
+    currentPage: Int,
+    totalPages: Int,
+) {
+    if (currentPage <= 0 || totalPages <= 0) return
+
+    val text = "$currentPage / $totalPages"
+
+    Box {
+        Text(
+            text = text,
+            color = Color(45, 45, 45),
+            fontSize = MaterialTheme.typography.bodySmall.fontSize,
+            fontWeight = FontWeight.Bold,
+            letterSpacing = 1.sp,
+            style = TextStyle.Default.copy(
+                drawStyle = Stroke(width = 4f),
+            ),
+        )
+
+        Text(
+            text = text,
+            color = Color(235, 235, 235),
+            fontSize = MaterialTheme.typography.bodySmall.fontSize,
+            fontWeight = FontWeight.Bold,
+            letterSpacing = 1.sp,
+        )
+    }
+}

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

@@ -1,52 +0,0 @@
-package eu.kanade.tachiyomi.ui.reader
-
-import android.annotation.SuppressLint
-import android.content.Context
-import android.graphics.Color
-import android.text.Spannable
-import android.text.SpannableString
-import android.text.style.ScaleXSpan
-import android.util.AttributeSet
-import androidx.appcompat.widget.AppCompatTextView
-import eu.kanade.tachiyomi.widget.OutlineSpan
-
-/**
- * Page indicator found at the bottom of the reader
- */
-class PageIndicatorTextView(
-    context: Context,
-    attrs: AttributeSet? = null,
-) : AppCompatTextView(context, attrs) {
-
-    init {
-        setTextColor(fillColor)
-    }
-
-    @SuppressLint("SetTextI18n")
-    override fun setText(text: CharSequence?, type: BufferType?) {
-        // Add spaces at the start & end of the text, otherwise the stroke is cut-off because it's
-        // not taken into account when measuring the text (view's padding doesn't help).
-        val currText = " $text "
-
-        // Also add a bit of spacing between each character, as the stroke overlaps them
-        val finalText = SpannableString(currText.asIterable().joinToString("\u00A0")).apply {
-            // Apply text outline
-            setSpan(spanOutline, 1, length - 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
-
-            for (i in 1..lastIndex step 2) {
-                setSpan(ScaleXSpan(0.2f), i, i + 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
-            }
-        }
-
-        super.setText(finalText, BufferType.SPANNABLE)
-    }
-}
-
-private val fillColor = Color.rgb(235, 235, 235)
-private val strokeColor = Color.rgb(45, 45, 45)
-
-// A span object with text outlining properties
-private val spanOutline = OutlineSpan(
-    strokeColor = strokeColor,
-    strokeWidth = 4f,
-)

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

@@ -47,6 +47,9 @@ import android.widget.Toast
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.result.contract.ActivityResultContracts.CreateDocument
 import androidx.appcompat.app.AlertDialog
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.setValue
 import androidx.core.content.ContextCompat
 import androidx.core.content.FileProvider
 import androidx.core.graphics.ColorUtils
@@ -70,6 +73,7 @@ import com.hippo.ehviewer.gallery.PageLoader2
 import com.hippo.ehviewer.image.Image
 import com.hippo.ehviewer.ui.EhActivity
 import com.hippo.ehviewer.ui.legacy.EditTextDialogBuilder
+import com.hippo.ehviewer.ui.setMD3Content
 import com.hippo.ehviewer.util.ExceptionUtils
 import com.hippo.ehviewer.util.getParcelableCompat
 import com.hippo.ehviewer.util.getParcelableExtraCompat
@@ -655,6 +659,8 @@ class ReaderActivity : EhActivity() {
         }
     }
 
+    private var currentPage by mutableIntStateOf(-1)
+
     /**
      * Initializes the reader menu. It sets up click listeners and the initial visibility.
      */
@@ -666,6 +672,13 @@ class ReaderActivity : EhActivity() {
             }
         }
 
+        binding.pageNumber.setMD3Content {
+            PageIndicatorText(
+                currentPage = currentPage,
+                totalPages = mGalleryProvider?.takeIf { it.isReady }?.size ?: -1,
+            )
+        }
+
         // Init listeners on bottom menu
         binding.pageSlider.addOnSliderTouchListener(
             object : Slider.OnSliderTouchListener {
@@ -856,7 +869,7 @@ class ReaderActivity : EhActivity() {
         val pages = mGalleryProvider?.mPages ?: return
 
         // Set bottom page number
-        binding.pageNumber.text = "${page.number}/${pages.size}"
+        currentPage = page.number
 
         // Set page numbers
         if (viewer !is R2LPagerViewer) {

app/src/main/java/eu/kanade/tachiyomi/widget/OutlineSpan.kt

@@ -1,56 +0,0 @@
-package eu.kanade.tachiyomi.widget
-
-import android.graphics.Canvas
-import android.graphics.Paint
-import android.text.style.ReplacementSpan
-import androidx.annotation.ColorInt
-import androidx.annotation.Dimension
-
-/**
- * Source: https://github.com/santaevpavel
- *
- * A class that draws the outlines of a text when given a stroke color and stroke width.
- */
-class OutlineSpan(
-    @ColorInt private val strokeColor: Int,
-    @Dimension private val strokeWidth: Float,
-) : ReplacementSpan() {
-
-    override fun getSize(
-        paint: Paint,
-        text: CharSequence,
-        start: Int,
-        end: Int,
-        fm: Paint.FontMetricsInt?,
-    ): Int {
-        return paint.measureText(text.toString().substring(start until end)).toInt()
-    }
-
-    override fun draw(
-        canvas: Canvas,
-        text: CharSequence,
-        start: Int,
-        end: Int,
-        x: Float,
-        top: Int,
-        y: Int,
-        bottom: Int,
-        paint: Paint,
-    ) {
-        val originTextColor = paint.color
-
-        paint.apply {
-            color = strokeColor
-            style = Paint.Style.STROKE
-            this.strokeWidth = this@OutlineSpan.strokeWidth
-        }
-        canvas.drawText(text, start, end, x, y.toFloat(), paint)
-
-        paint.apply {
-            color = originTextColor
-            style = Paint.Style.FILL
-        }
-
-        canvas.drawText(text, start, end, x, y.toFloat(), paint)
-    }
-}

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

@@ -16,15 +16,11 @@
             android:layout_height="match_parent"
             android:descendantFocusability="blocksDescendants" />
 
-        <eu.kanade.tachiyomi.ui.reader.PageIndicatorTextView
+        <androidx.compose.ui.platform.ComposeView
             android:id="@+id/page_number"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_gravity="bottom|center_horizontal"
-            android:padding="4dp"
-            android:textAppearance="?attr/textAppearanceBodySmall"
-            android:textDirection="ltr"
-            android:textStyle="bold" />
+            android:layout_gravity="bottom|center_horizontal" />
 
     </FrameLayout>
 
@@ -94,7 +90,7 @@
                         android:layout_weight="1"
                         android:maxHeight="?attr/actionBarSize"
                         android:minHeight="?attr/actionBarSize"
-                        app:tickVisible="true"/>
+                        app:tickVisible="true" />
 
                     <TextView
                         android:id="@+id/right_page_text"