Clean up reader sheet spinner preferences

Based on https://github.com/Jays2Kings/tachiyomiJ2K/commit/fe2543b9d5da176b1dbb95058d1bfc54400fd47a

Co-Authored-By: Jays2Kings

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

@@ -15,7 +15,6 @@ import eu.kanade.tachiyomi.ui.reader.viewer.pager.PagerViewer
 import eu.kanade.tachiyomi.ui.reader.viewer.webtoon.WebtoonViewer
 import eu.kanade.tachiyomi.util.preference.bindToIntPreference
 import eu.kanade.tachiyomi.util.preference.bindToPreference
-import eu.kanade.tachiyomi.widget.IgnoreFirstSpinnerListener
 import kotlinx.coroutines.flow.launchIn
 import uy.kohesive.injekt.injectLazy
 
@@ -44,7 +43,7 @@ class ReaderReadingModeSettings @JvmOverloads constructor(context: Context, attr
      * Init general reader preferences.
      */
     private fun initGeneralPreferences() {
-        binding.viewer.onItemSelectedListener = IgnoreFirstSpinnerListener { position ->
+        binding.viewer.onItemSelectedListener = { position ->
             (context as ReaderActivity).presenter.setMangaViewer(position)
 
             val mangaViewer = (context as ReaderActivity).presenter.getMangaViewer()
@@ -54,7 +53,7 @@ class ReaderReadingModeSettings @JvmOverloads constructor(context: Context, attr
                 initPagerPreferences()
             }
         }
-        binding.viewer.setSelection((context as ReaderActivity).presenter.manga?.viewer ?: 0, false)
+        binding.viewer.setSelection((context as ReaderActivity).presenter.manga?.viewer ?: 0)
     }
 
     /**

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

@@ -0,0 +1,171 @@
+package eu.kanade.tachiyomi.ui.reader.setting
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.Gravity
+import android.view.LayoutInflater
+import android.view.MenuItem
+import android.widget.FrameLayout
+import androidx.annotation.ArrayRes
+import androidx.appcompat.widget.PopupMenu
+import androidx.core.view.get
+import com.tfcporciuncula.flow.Preference
+import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.databinding.SpinnerPreferenceBinding
+
+class SpinnerPreference @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null) :
+    FrameLayout(context, attrs) {
+
+    private var entries = emptyList<String>()
+    private var selectedPosition = 0
+    private var pref: Preference<Int>? = null
+    private var prefOffset = 0
+    private var popup: PopupMenu? = null
+
+    var onItemSelectedListener: ((Int) -> Unit)? = null
+        set(value) {
+            field = value
+            if (value != null) {
+                popup = makeSettingsPopup()
+                setOnTouchListener(popup?.dragToOpenListener)
+                setOnClickListener {
+                    popup?.show()
+                }
+            }
+        }
+
+    private val binding = SpinnerPreferenceBinding.inflate(LayoutInflater.from(context), this, false)
+
+    init {
+        addView(binding.root)
+
+        val a = context.obtainStyledAttributes(attrs, R.styleable.SpinnerPreference, 0, 0)
+
+        val str = a.getString(R.styleable.SpinnerPreference_title) ?: ""
+        binding.title.text = str
+
+        val entries = (a.getTextArray(R.styleable.SpinnerPreference_android_entries) ?: emptyArray()).map { it.toString() }
+        this.entries = entries
+
+        binding.details.text = entries.firstOrNull().orEmpty()
+
+        a.recycle()
+    }
+
+    fun setSelection(selection: Int) {
+        popup?.menu?.get(selectedPosition)?.isCheckable = false
+        popup?.menu?.get(selectedPosition)?.isChecked = false
+        selectedPosition = selection
+        binding.details.text = entries.getOrNull(selection).orEmpty()
+        popup?.menu?.get(selectedPosition)?.isCheckable = true
+        popup?.menu?.get(selectedPosition)?.isChecked = true
+    }
+
+    fun bindToPreference(pref: Preference<Int>, offset: Int = 0, block: ((Int) -> Unit)? = null) {
+        setSelection(pref.get() - offset)
+        this.pref = pref
+        prefOffset = offset
+        popup = makeSettingsPopup(pref, prefOffset, block)
+        setOnTouchListener(popup?.dragToOpenListener)
+        setOnClickListener {
+            popup?.show()
+        }
+    }
+
+    inline fun <reified T : Enum<T>> bindToPreference(pref: Preference<T>) {
+        val enumConstants = T::class.java.enumConstants
+        enumConstants?.indexOf(pref.get())?.let { setSelection(it) }
+        val popup = makeSettingsPopup(pref)
+        setOnTouchListener(popup.dragToOpenListener)
+        setOnClickListener {
+            popup.show()
+        }
+    }
+
+    fun bindToIntPreference(pref: Preference<Int>, @ArrayRes intValuesResource: Int, block: ((Int) -> Unit)? = null) {
+        setSelection(pref.get())
+        this.pref = pref
+        prefOffset = 0
+        val intValues = resources.getStringArray(intValuesResource).map { it.toIntOrNull() }
+        popup = makeSettingsPopup(pref, intValues, block)
+        setOnTouchListener(popup?.dragToOpenListener)
+        setOnClickListener {
+            popup?.show()
+        }
+    }
+
+    inline fun <reified T : Enum<T>> makeSettingsPopup(preference: Preference<T>): PopupMenu {
+        val popup = popup()
+
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener { menuItem ->
+            val pos = popup.menuClicked(menuItem)
+            onItemSelectedListener?.invoke(pos)
+            true
+        }
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener { menuItem ->
+            val enumConstants = T::class.java.enumConstants
+            val pos = popup.menuClicked(menuItem)
+            enumConstants?.get(pos)?.let { preference.set(it) }
+            true
+        }
+        return popup
+    }
+
+    private fun makeSettingsPopup(preference: Preference<Int>, intValues: List<Int?>, block: ((Int) -> Unit)? = null): PopupMenu {
+        val popup = popup()
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener { menuItem ->
+            val pos = popup.menuClicked(menuItem)
+            preference.set(intValues[pos] ?: 0)
+            block?.invoke(pos)
+            true
+        }
+        return popup
+    }
+
+    private fun makeSettingsPopup(preference: Preference<Int>, offset: Int = 0, block: ((Int) -> Unit)? = null): PopupMenu {
+        val popup = popup()
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener { menuItem ->
+            val pos = popup.menuClicked(menuItem)
+            preference.set(pos + offset)
+            block?.invoke(pos)
+            true
+        }
+        return popup
+    }
+
+    private fun makeSettingsPopup(): PopupMenu {
+        val popup = popup()
+
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener { menuItem ->
+            val pos = popup.menuClicked(menuItem)
+            onItemSelectedListener?.invoke(pos)
+            true
+        }
+        return popup
+    }
+
+    fun PopupMenu.menuClicked(menuItem: MenuItem): Int {
+        val pos = menuItem.itemId
+        menu[selectedPosition].isCheckable = false
+        menu[selectedPosition].isChecked = false
+        setSelection(pos)
+        menu[pos].isCheckable = true
+        menu[pos].isChecked = true
+        return pos
+    }
+
+    fun popup(): PopupMenu {
+        val popup = PopupMenu(context, this, Gravity.END, R.attr.actionOverflowMenuStyle, 0)
+        entries.forEachIndexed { index, entry ->
+            popup.menu.add(0, index, 0, entry)
+        }
+        popup.menu[selectedPosition].isCheckable = true
+        popup.menu[selectedPosition].isChecked = true
+        return popup
+    }
+}

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

@@ -7,120 +7,69 @@
     android:clipToPadding="false"
     android:padding="16dp">
 
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:orientation="vertical">
 
-        <TextView
-            android:id="@+id/rotation_mode_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:text="@string/pref_rotation_type"
-            app:layout_constraintBaseline_toBaselineOf="@id/rotation_mode"
-            app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-            app:layout_constraintStart_toStartOf="parent" />
-
-        <androidx.appcompat.widget.AppCompatSpinner
+        <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
             android:id="@+id/rotation_mode"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:entries="@array/rotation_type"
-            app:layout_constraintEnd_toEndOf="@id/spinner_end"
-            app:layout_constraintStart_toEndOf="@id/verticalcenter"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/background_color_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:text="@string/pref_reader_theme"
-            app:layout_constraintBaseline_toBaselineOf="@id/background_color"
-            app:layout_constraintEnd_toStartOf="@id/background_color"
-            app:layout_constraintStart_toStartOf="parent" />
+            app:title="@string/pref_rotation_type" />
 
-        <androidx.appcompat.widget.AppCompatSpinner
+        <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
             android:id="@+id/background_color"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="20dp"
             android:entries="@array/reader_themes"
-            app:layout_constraintEnd_toEndOf="@id/spinner_end"
-            app:layout_constraintStart_toEndOf="@id/verticalcenter"
-            app:layout_constraintTop_toBottomOf="@id/rotation_mode" />
+            app:title="@string/pref_reader_theme" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/show_page_number"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="10dp"
-            android:text="@string/pref_show_page_number"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/background_color" />
+            android:text="@string/pref_show_page_number" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/fullscreen"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/pref_fullscreen"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/show_page_number" />
+            android:text="@string/pref_fullscreen" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/cutout_short"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/pref_cutout_short"
-            android:textColor="?android:attr/textColorSecondary"
             android:visibility="gone"
-            app:layout_constraintTop_toBottomOf="@id/fullscreen"
             tools:visibility="visible" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/keepscreen"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/pref_keep_screen_on"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/cutout_short" />
+            android:text="@string/pref_keep_screen_on" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/long_tap"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/pref_read_with_long_tap"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/keepscreen" />
+            android:text="@string/pref_read_with_long_tap" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/always_show_chapter_transition"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/pref_always_show_chapter_transition"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/long_tap" />
+            android:text="@string/pref_always_show_chapter_transition" />
 
         <com.google.android.material.switchmaterial.SwitchMaterial
             android:id="@+id/page_transitions"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:text="@string/pref_page_transitions"
-            android:textColor="?android:attr/textColorSecondary"
-            app:layout_constraintTop_toBottomOf="@id/always_show_chapter_transition" />
-
-        <android.widget.Space
-            android:id="@+id/spinner_end"
-            android:layout_width="16dp"
-            android:layout_height="0dp"
-            app:layout_constraintStart_toEndOf="parent"
-            tools:ignore="MissingConstraints" />
-
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/verticalcenter"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent="0.5" />
+            android:text="@string/pref_page_transitions" />
 
-    </androidx.constraintlayout.widget.ConstraintLayout>
+    </LinearLayout>
 
 </androidx.core.widget.NestedScrollView>

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

@@ -1,13 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:orientation="vertical">
 
     <TextView
         android:id="@+id/pager_prefs"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
         android:text="@string/pager_viewer"
@@ -16,90 +17,39 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <TextView
-        android:id="@+id/pager_nav_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_viewer_nav"
-        app:layout_constraintBaseline_toBaselineOf="@id/pager_nav"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/pager_nav"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
         android:entries="@array/pager_nav"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@id/pager_prefs" />
+        app:title="@string/pref_viewer_nav" />
 
-    <TextView
-        android:id="@+id/tapping_inverted_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_read_with_tapping_inverted"
-        app:layout_constraintBaseline_toBaselineOf="@id/tapping_inverted"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/tapping_inverted"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
         android:entries="@array/invert_tapping_mode"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/pager_nav" />
+        app:title="@string/pref_read_with_tapping_inverted" />
 
-    <TextView
-        android:id="@+id/scale_type_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_image_scale_type"
-        app:layout_constraintBaseline_toBaselineOf="@id/scale_type"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/scale_type"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
         android:entries="@array/image_scale_type"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/tapping_inverted" />
-
-    <TextView
-        android:id="@+id/zoom_start_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_zoom_start"
-        app:layout_constraintBaseline_toBaselineOf="@id/zoom_start"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
+        app:title="@string/pref_image_scale_type" />
 
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/zoom_start"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="20dp"
         android:entries="@array/zoom_start"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@id/scale_type" />
+        app:title="@string/pref_zoom_start" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
         android:id="@+id/crop_borders"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="10dp"
         android:text="@string/pref_crop_borders"
-        android:textColor="?android:attr/textColorSecondary"
         app:layout_constraintTop_toBottomOf="@id/zoom_start" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
@@ -107,7 +57,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/pref_dual_page_split"
-        android:textColor="?android:attr/textColorSecondary"
         app:layout_constraintTop_toBottomOf="@id/crop_borders" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
@@ -115,7 +64,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/pref_dual_page_invert"
-        android:textColor="?android:attr/textColorSecondary"
         android:visibility="gone"
         app:layout_constraintTop_toBottomOf="@id/dual_page_split"
         tools:visibility="visible" />
@@ -124,20 +72,6 @@
         android:id="@+id/tapping_prefs_group"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        app:constraint_referenced_ids="pager_nav_text,pager_nav,tapping_inverted_text,tapping_inverted,dual_page_split,dual_page_invert" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/verticalcenter"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.5" />
-
-    <android.widget.Space
-        android:id="@+id/spinner_end"
-        android:layout_width="16dp"
-        android:layout_height="0dp"
-        app:layout_constraintStart_toEndOf="parent"
-        tools:ignore="MissingConstraints" />
+        app:constraint_referenced_ids="pager_nav,tapping_inverted,dual_page_split,dual_page_invert" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</LinearLayout>

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

@@ -7,36 +7,23 @@
     android:clipToPadding="false"
     android:padding="16dp">
 
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:orientation="vertical">
 
-        <!-- Series-specific preferences -->
-
-        <TextView
-            android:id="@+id/viewer_text"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:text="@string/pref_category_for_this_series"
-            app:layout_constraintBaseline_toBaselineOf="@id/viewer"
-            app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-            app:layout_constraintStart_toStartOf="parent" />
-
-        <androidx.appcompat.widget.AppCompatSpinner
+        <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
             android:id="@+id/viewer"
-            android:layout_width="0dp"
-            android:layout_height="24dp"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
             android:entries="@array/viewers_selector"
-            app:layout_constraintEnd_toEndOf="@id/spinner_end"
-            app:layout_constraintStart_toEndOf="@id/verticalcenter"
-            app:layout_constraintTop_toTopOf="parent" />
+            app:title="@string/pref_category_for_this_series" />
 
         <!-- Pager preferences -->
-
         <include
             android:id="@+id/pager_prefs_group"
             layout="@layout/reader_pager_settings"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:visibility="gone"
             app:layout_constraintEnd_toEndOf="parent"
@@ -45,31 +32,16 @@
             tools:visibility="visible" />
 
         <!-- Webtoon preferences -->
-
         <include
             android:id="@+id/webtoon_prefs_group"
             layout="@layout/reader_webtoon_settings"
-            android:layout_width="0dp"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:visibility="gone"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/viewer" />
 
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/verticalcenter"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent="0.5" />
-
-        <android.widget.Space
-            android:id="@+id/spinner_end"
-            android:layout_width="16dp"
-            android:layout_height="0dp"
-            app:layout_constraintStart_toEndOf="parent"
-            tools:ignore="MissingConstraints" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
+    </LinearLayout>
 
 </androidx.core.widget.NestedScrollView>

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

@@ -1,13 +1,14 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:orientation="vertical">
 
     <TextView
         android:id="@+id/webtoon_prefs"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="24dp"
         android:text="@string/webtoon_viewer"
@@ -16,72 +17,32 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <TextView
-        android:id="@+id/webtoon_nav_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_viewer_nav"
-        app:layout_constraintBaseline_toBaselineOf="@id/webtoon_nav"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/webtoon_nav"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="20dp"
         android:entries="@array/webtoon_nav"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/webtoon_prefs" />
+        app:title="@string/pref_viewer_nav" />
 
-    <TextView
-        android:id="@+id/tapping_inverted_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_read_with_tapping_inverted"
-        app:layout_constraintBaseline_toBaselineOf="@id/tapping_inverted"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintStart_toStartOf="parent" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/tapping_inverted"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
         android:entries="@array/invert_tapping_mode"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintHorizontal_bias="0.0"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/webtoon_nav" />
+        app:title="@string/pref_read_with_tapping_inverted" />
 
-    <TextView
-        android:id="@+id/webtoon_side_padding_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_webtoon_side_padding"
-        app:layout_constraintBaseline_toBaselineOf="@id/webtoon_side_padding"
-        app:layout_constraintLeft_toLeftOf="parent"
-        app:layout_constraintRight_toLeftOf="@id/verticalcenter" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
+    <eu.kanade.tachiyomi.ui.reader.setting.SpinnerPreference
         android:id="@+id/webtoon_side_padding"
-        android:layout_width="0dp"
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="16dp"
         android:entries="@array/webtoon_side_padding"
-        app:layout_constraintLeft_toRightOf="@id/verticalcenter"
-        app:layout_constraintRight_toRightOf="@id/spinner_end"
-        app:layout_constraintTop_toBottomOf="@+id/tapping_inverted" />
+        app:title="@string/pref_webtoon_side_padding" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
         android:id="@+id/crop_borders_webtoon"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="10dp"
         android:text="@string/pref_crop_borders"
-        android:textColor="?android:attr/textColorSecondary"
         app:layout_constraintTop_toBottomOf="@+id/webtoon_side_padding" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
@@ -89,7 +50,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/pref_dual_page_split"
-        android:textColor="?android:attr/textColorSecondary"
         app:layout_constraintTop_toBottomOf="@id/crop_borders_webtoon" />
 
     <com.google.android.material.switchmaterial.SwitchMaterial
@@ -97,7 +57,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/pref_dual_page_invert"
-        android:textColor="?android:attr/textColorSecondary"
         android:visibility="gone"
         app:layout_constraintTop_toBottomOf="@id/dual_page_split"
         tools:visibility="visible" />
@@ -106,20 +65,6 @@
         android:id="@+id/tapping_prefs_group"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        app:constraint_referenced_ids="webtoon_nav_text,webtoon_nav,tapping_inverted_text,tapping_inverted,dual_page_split,dual_page_invert" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/verticalcenter"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.5" />
-
-    <android.widget.Space
-        android:id="@+id/spinner_end"
-        android:layout_width="16dp"
-        android:layout_height="0dp"
-        app:layout_constraintStart_toEndOf="parent"
-        tools:ignore="MissingConstraints" />
+        app:constraint_referenced_ids="webtoon_nav,tapping_inverted,dual_page_split,dual_page_invert" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</LinearLayout>

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

@@ -0,0 +1,61 @@
+<?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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <com.google.android.material.textview.MaterialTextView
+        android:id="@+id/title"
+        style="@style/TextAppearance.MaterialComponents.Body2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
+        android:maxLines="1"
+        android:textColor="?android:attr/textColorPrimary"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Title" />
+
+    <com.google.android.material.textview.MaterialTextView
+        android:id="@+id/details"
+        style="@style/TextAppearance.MaterialComponents.Body2"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:maxLines="1"
+        android:textColor="?android:attr/textColorSecondary"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintHorizontal_bias="0.0"
+        app:layout_constraintStart_toEndOf="@+id/start_barrier"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="Details" />
+
+    <ImageView
+        android:layout_width="24dp"
+        android:layout_height="24dp"
+        android:layout_marginStart="1dp"
+        android:src="@drawable/ic_expand_more_24dp"
+        app:layout_constraintBottom_toBottomOf="@id/details"
+        app:layout_constraintStart_toEndOf="@id/details"
+        app:layout_constraintTop_toTopOf="@id/details"
+        app:tint="?android:attr/textColorSecondary"
+        tools:ignore="ContentDescription" />
+
+    <androidx.constraintlayout.widget.Barrier
+        android:id="@+id/start_barrier"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        app:barrierDirection="right"
+        app:constraint_referenced_ids="bottom_line,title" />
+
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/bottom_line"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:orientation="vertical"
+        app:layout_constraintGuide_percent="0.5" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/attrs.xml

@@ -11,6 +11,12 @@
         <attr name="max_seek" format="integer"/>
     </declare-styleable>
 
+    <declare-styleable name="SpinnerPreference">
+        <attr name="title" format="reference|string"/>
+        <attr name="android:entries"/>
+        <attr name="summary" format="reference|string" />
+    </declare-styleable>
+
     <attr name="colorLibrarySelection" format="reference|integer"/>
     <attr name="colorLibrarySelectionActive" format="reference|integer"/>
     <attr name="colorFilterActive" format="reference|integer"/>