Navigation settings and split invert tapping for webtoon and pager (#4233)

app/src/main/java/eu/kanade/tachiyomi/data/preference/PreferenceKeys.kt

@@ -57,7 +57,9 @@ object PreferenceKeys {
 
     const val readWithTapping = "reader_tap"
 
-    const val readWithTappingInverted = "reader_tapping_inverted"
+    const val pagerNavInverted = "reader_tapping_inverted"
+
+    const val webtoonNavInverted = "reader_tapping_inverted_webtoon"
 
     const val readWithLongTap = "reader_long_tap"
 

app/src/main/java/eu/kanade/tachiyomi/data/preference/PreferencesHelper.kt

@@ -130,7 +130,9 @@ class PreferencesHelper(val context: Context) {
 
     fun readWithTapping() = flowPrefs.getBoolean(Keys.readWithTapping, true)
 
-    fun readWithTappingInverted() = flowPrefs.getEnum(Keys.readWithTappingInverted, Values.TappingInvertMode.NONE)
+    fun pagerNavInverted() = flowPrefs.getEnum(Keys.pagerNavInverted, Values.TappingInvertMode.NONE)
+
+    fun webtoonNavInverted() = flowPrefs.getEnum(Keys.webtoonNavInverted, Values.TappingInvertMode.NONE)
 
     fun readWithLongTap() = flowPrefs.getBoolean(Keys.readWithLongTap, true)
 

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

@@ -4,7 +4,7 @@ import android.os.Bundle
 import android.widget.CompoundButton
 import android.widget.Spinner
 import androidx.annotation.ArrayRes
-import androidx.core.view.isInvisible
+import androidx.core.view.isGone
 import androidx.core.view.isVisible
 import androidx.core.widget.NestedScrollView
 import com.google.android.material.bottomsheet.BottomSheetDialog
@@ -39,7 +39,6 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
         super.onCreate(savedInstanceState)
 
         initGeneralPreferences()
-        initNavigationPreferences()
 
         when (activity.viewer) {
             is PagerViewer -> initPagerPreferences()
@@ -83,36 +82,33 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
      * Init the preferences for the pager reader.
      */
     private fun initPagerPreferences() {
-        binding.webtoonPrefsGroup.isInvisible = true
-        binding.pagerPrefsGroup.isVisible = true
+        binding.webtoonPrefsGroup.root.isGone = true
+        binding.pagerPrefsGroup.root.isVisible = true
 
-        binding.pagerNav.bindToPreference(preferences.navigationModePager())
-        binding.scaleType.bindToPreference(preferences.imageScaleType(), 1)
-        binding.zoomStart.bindToPreference(preferences.zoomStart(), 1)
-        binding.cropBorders.bindToPreference(preferences.cropBorders())
+        binding.pagerPrefsGroup.tappingPrefsGroup.isVisible = preferences.readWithTapping().get()
+
+        binding.pagerPrefsGroup.tappingInverted.bindToPreference(preferences.pagerNavInverted())
+
+        binding.pagerPrefsGroup.pagerNav.bindToPreference(preferences.navigationModePager())
+        binding.pagerPrefsGroup.scaleType.bindToPreference(preferences.imageScaleType(), 1)
+        binding.pagerPrefsGroup.zoomStart.bindToPreference(preferences.zoomStart(), 1)
+        binding.pagerPrefsGroup.cropBorders.bindToPreference(preferences.cropBorders())
     }
 
     /**
      * Init the preferences for the webtoon reader.
      */
     private fun initWebtoonPreferences() {
-        binding.pagerPrefsGroup.isInvisible = true
-        binding.webtoonPrefsGroup.isVisible = true
+        binding.pagerPrefsGroup.root.isGone = true
+        binding.webtoonPrefsGroup.root.isVisible = true
 
-        binding.webtoonNav.bindToPreference(preferences.navigationModeWebtoon())
-        binding.cropBordersWebtoon.bindToPreference(preferences.cropBordersWebtoon())
-        binding.webtoonSidePadding.bindToIntPreference(preferences.webtoonSidePadding(), R.array.webtoon_side_padding_values)
-    }
+        binding.webtoonPrefsGroup.tappingPrefsGroup.isVisible = preferences.readWithTapping().get()
 
-    /**
-     * Init the preferences for navigation.
-     */
-    private fun initNavigationPreferences() {
-        if (!preferences.readWithTapping().get()) {
-            binding.navigationPrefsGroup.isVisible = false
-        }
+        binding.webtoonPrefsGroup.tappingInverted.bindToPreference(preferences.webtoonNavInverted())
 
-        binding.tappingInverted.bindToPreference(preferences.readWithTappingInverted())
+        binding.webtoonPrefsGroup.webtoonNav.bindToPreference(preferences.navigationModeWebtoon())
+        binding.webtoonPrefsGroup.cropBordersWebtoon.bindToPreference(preferences.cropBordersWebtoon())
+        binding.webtoonPrefsGroup.webtoonSidePadding.bindToIntPreference(preferences.webtoonSidePadding(), R.array.webtoon_side_padding_values)
     }
 
     /**

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

@@ -38,9 +38,6 @@ abstract class ViewerConfig(preferences: PreferencesHelper) {
         preferences.readWithTapping()
             .register({ tappingEnabled = it })
 
-        preferences.readWithTappingInverted()
-            .register({ tappingInverted = it }, { navigator.invertMode = it })
-
         preferences.readWithLongTap()
             .register({ longTapEnabled = it })
 

app/src/main/java/eu/kanade/tachiyomi/ui/reader/viewer/pager/PagerConfig.kt

@@ -36,6 +36,9 @@ class PagerConfig(private val viewer: PagerViewer, preferences: PreferencesHelpe
 
         preferences.navigationModePager()
             .register({ navigationMode = it }, { updateNavigation(navigationMode) })
+
+        preferences.pagerNavInverted()
+            .register({ tappingInverted = it }, { navigator.invertMode = it })
     }
 
     private fun zoomTypeFromPreference(value: Int) {

app/src/main/java/eu/kanade/tachiyomi/ui/reader/viewer/webtoon/WebtoonConfig.kt

@@ -29,6 +29,9 @@ class WebtoonConfig(preferences: PreferencesHelper = Injekt.get()) : ViewerConfi
 
         preferences.navigationModeWebtoon()
             .register({ navigationMode = it }, { updateNavigation(it) })
+
+        preferences.webtoonNavInverted()
+            .register({ tappingInverted = it }, { navigator.invertMode = it })
     }
 
     override var navigator: ViewerNavigation = defaultNavigation()

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

@@ -137,6 +137,41 @@ class SettingsReaderController : SettingsController() {
         preferenceCategory {
             titleRes = R.string.pager_viewer
 
+            intListPreference {
+                key = Keys.navigationModePager
+                titleRes = R.string.pref_viewer_nav
+                entriesRes = arrayOf(
+                    R.string.default_nav,
+                    R.string.l_nav,
+                    R.string.kindlish_nav,
+                    R.string.edge_nav
+                )
+                entryValues = arrayOf("0", "1", "2", "3")
+                defaultValue = "0"
+                summary = "%s"
+
+                preferences.readWithTapping().asImmediateFlow { isVisible = it }.launchIn(scope)
+            }
+            listPreference {
+                key = Keys.pagerNavInverted
+                titleRes = R.string.pref_read_with_tapping_inverted
+                entriesRes = arrayOf(
+                    R.string.tapping_inverted_none,
+                    R.string.tapping_inverted_horizontal,
+                    R.string.tapping_inverted_vertical,
+                    R.string.tapping_inverted_both
+                )
+                entryValues = arrayOf(
+                    TappingInvertMode.NONE.name,
+                    TappingInvertMode.HORIZONTAL.name,
+                    TappingInvertMode.VERTICAL.name,
+                    TappingInvertMode.BOTH.name
+                )
+                defaultValue = TappingInvertMode.NONE.name
+                summary = "%s"
+
+                preferences.readWithTapping().asImmediateFlow { isVisible = it }.launchIn(scope)
+            }
             intListPreference {
                 key = Keys.imageScaleType
                 titleRes = R.string.pref_image_scale_type
@@ -175,6 +210,41 @@ class SettingsReaderController : SettingsController() {
         preferenceCategory {
             titleRes = R.string.webtoon_viewer
 
+            intListPreference {
+                key = Keys.navigationModeWebtoon
+                titleRes = R.string.pref_viewer_nav
+                entriesRes = arrayOf(
+                    R.string.default_nav,
+                    R.string.l_nav,
+                    R.string.kindlish_nav,
+                    R.string.edge_nav
+                )
+                entryValues = arrayOf("0", "1", "2", "3")
+                defaultValue = "0"
+                summary = "%s"
+
+                preferences.readWithTapping().asImmediateFlow { isVisible = it }.launchIn(scope)
+            }
+            listPreference {
+                key = Keys.webtoonNavInverted
+                titleRes = R.string.pref_read_with_tapping_inverted
+                entriesRes = arrayOf(
+                    R.string.tapping_inverted_none,
+                    R.string.tapping_inverted_horizontal,
+                    R.string.tapping_inverted_vertical,
+                    R.string.tapping_inverted_both
+                )
+                entryValues = arrayOf(
+                    TappingInvertMode.NONE.name,
+                    TappingInvertMode.HORIZONTAL.name,
+                    TappingInvertMode.VERTICAL.name,
+                    TappingInvertMode.BOTH.name
+                )
+                defaultValue = TappingInvertMode.NONE.name
+                summary = "%s"
+
+                preferences.readWithTapping().asImmediateFlow { isVisible = it }.launchIn(scope)
+            }
             intListPreference {
                 key = Keys.webtoonSidePadding
                 titleRes = R.string.pref_webtoon_side_padding
@@ -204,26 +274,6 @@ class SettingsReaderController : SettingsController() {
                 titleRes = R.string.pref_read_with_tapping
                 defaultValue = true
             }
-            listPreference {
-                key = Keys.readWithTappingInverted
-                titleRes = R.string.pref_read_with_tapping_inverted
-                entriesRes = arrayOf(
-                    R.string.tapping_inverted_none,
-                    R.string.tapping_inverted_horizontal,
-                    R.string.tapping_inverted_vertical,
-                    R.string.tapping_inverted_both
-                )
-                entryValues = arrayOf(
-                    TappingInvertMode.NONE.name,
-                    TappingInvertMode.HORIZONTAL.name,
-                    TappingInvertMode.VERTICAL.name,
-                    TappingInvertMode.BOTH.name
-                )
-                defaultValue = TappingInvertMode.NONE.name
-                summary = "%s"
-
-                preferences.readWithTapping().asImmediateFlow { isVisible = it }.launchIn(scope)
-            }
             switchPreference {
                 key = Keys.readWithLongTap
                 titleRes = R.string.pref_read_with_long_tap

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

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <TextView
+        android:id="@+id/pager_prefs"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="24dp"
+        android:text="@string/pager_viewer"
+        android:textColor="?attr/colorAccent"
+        android:textStyle="bold"
+        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_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
+        app:layout_constraintBaseline_toBaselineOf="@id/pager_nav"/>
+
+    <androidx.appcompat.widget.AppCompatSpinner
+        android:id="@+id/pager_nav"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:entries="@array/pager_nav"
+        android:layout_marginTop="16dp"
+        app:layout_constraintTop_toBottomOf="@id/pager_prefs"
+        app:layout_constraintStart_toEndOf="@id/verticalcenter"
+        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
+
+    <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
+        android:id="@+id/scale_type"
+        android:layout_width="0dp"
+        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" />
+
+    <androidx.appcompat.widget.AppCompatSpinner
+        android:id="@+id/zoom_start"
+        android:layout_width="0dp"
+        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" />
+
+    <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" />
+
+    <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" />
+
+    <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
+        android:id="@+id/tapping_inverted"
+        android:layout_width="0dp"
+        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" />
+
+    <androidx.constraintlayout.widget.Group
+        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"
+        tools:layout_editor_absoluteX="24dp" />
+
+    <android.widget.Space
+        android:id="@+id/spinner_end"
+        android:layout_width="16dp"
+        android:layout_height="0dp"
+        app:layout_constraintStart_toEndOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -18,10 +18,10 @@
         android:alpha="0.5"
         android:scaleType="fitCenter"
         android:src="@drawable/ic_drag_pill_24dp"
-        android:tint="?attr/colorOnBackground"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
+        app:layout_constraintTop_toTopOf="parent"
+        app:tint="?attr/colorOnBackground" />
 
     <android.widget.Space
         android:id="@+id/spinner_end"
@@ -192,205 +192,31 @@
 
     <!-- Pager preferences -->
 
-    <TextView
-        android:id="@+id/pager_prefs"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="24dp"
-        android:text="@string/pager_viewer"
-        android:textColor="?attr/colorAccent"
-        android:textStyle="bold"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/end_navigation_preferences" />
-
-    <TextView
-        android:id="@+id/pager_nav_text"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:text="@string/pref_viewer_nav"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintBaseline_toBaselineOf="@id/pager_nav"/>
-
-    <androidx.appcompat.widget.AppCompatSpinner
-        android:id="@+id/pager_nav"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:entries="@array/pager_nav"
-        android:layout_marginTop="16dp"
-        app:layout_constraintTop_toBottomOf="@id/pager_prefs"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
-
-    <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
-        android:id="@+id/scale_type"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="20dp"
-        android:entries="@array/image_scale_type"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/pager_nav" />
-
-    <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" />
-
-    <androidx.appcompat.widget.AppCompatSpinner
-        android:id="@+id/zoom_start"
-        android:layout_width="0dp"
-        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" />
-
-    <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" />
-
-    <android.widget.Space
-        android:id="@+id/end_paged_preferences"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toBottomOf="@+id/crop_borders"
-        tools:layout_editor_absoluteX="24dp" />
-
-    <TextView
-        android:id="@+id/navigation_prefs"
+    <include
+        android:id="@+id/pager_prefs_group"
+        layout="@layout/reader_pager_settings"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginTop="24dp"
-        android:text="@string/pref_reader_navigation"
-        android:textColor="?attr/colorAccent"
-        android:textStyle="bold"
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/end_general_preferences" />
-
-    <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
-        android:id="@+id/tapping_inverted"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="20dp"
-        android:entries="@array/invert_tapping_mode"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintStart_toEndOf="@id/verticalcenter"
-        app:layout_constraintTop_toBottomOf="@+id/navigation_prefs" />
-
-    <android.widget.Space
-        android:id="@+id/end_navigation_preferences"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        app:layout_constraintBottom_toBottomOf="@+id/tapping_inverted"
-        tools:layout_editor_absoluteX="24dp" />
+        app:layout_constraintTop_toBottomOf="@+id/always_show_chapter_transition"
+        tools:visibility="visible" />
 
     <!-- Webtoon preferences -->
 
-    <TextView
-        android:id="@+id/webtoon_prefs"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="32dp"
-        android:text="@string/webtoon_viewer"
-        android:textColor="?attr/colorAccent"
-        android:textStyle="bold"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/end_navigation_preferences" />
-
-    <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
-        android:id="@+id/webtoon_side_padding"
-        android:layout_width="0dp"
-        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/webtoon_prefs" />
-
-    <TextView
-        android:id="@+id/webtoon_nav_text"
+    <include
+        android:id="@+id/webtoon_prefs_group"
+        layout="@layout/reader_webtoon_settings"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:text="@string/pref_viewer_nav"
+        android:visibility="gone"
+        app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
-        app:layout_constraintBaseline_toBaselineOf="@id/webtoon_nav"/>
-
-    <androidx.appcompat.widget.AppCompatSpinner
-        android:id="@+id/webtoon_nav"
-        android:layout_width="0dp"
-        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_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_nav" />
+        app:layout_constraintTop_toBottomOf="@id/always_show_chapter_transition" />
 
     <!-- Groups of preferences -->
 
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/pager_prefs_group"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:visibility="gone"
-        app:constraint_referenced_ids="pager_prefs,pager_nav_text,pager_nav,scale_type_text,scale_type,zoom_start_text,zoom_start,crop_borders"
-        tools:visibility="visible" />
-
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/webtoon_prefs_group"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:visibility="gone"
-        app:constraint_referenced_ids="webtoon_prefs,webtoon_nav_text,webtoon_nav,crop_borders_webtoon,webtoon_side_padding_text,webtoon_side_padding" />
-
     <androidx.constraintlayout.widget.Guideline
         android:id="@+id/verticalcenter"
         android:layout_width="wrap_content"
@@ -398,11 +224,4 @@
         android:orientation="vertical"
         app:layout_constraintGuide_percent="0.5" />
 
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/navigation_prefs_group"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:constraint_referenced_ids="navigation_prefs,tapping_inverted_text,end_navigation_preferences,tapping_inverted"
-        tools:layout_editor_absoluteX="24dp" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <TextView
+        android:id="@+id/webtoon_prefs"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="24dp"
+        android:text="@string/webtoon_viewer"
+        android:textColor="?attr/colorAccent"
+        android:textStyle="bold"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <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
+        android:id="@+id/webtoon_side_padding"
+        android:layout_width="0dp"
+        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" />
+
+    <TextView
+        android:id="@+id/webtoon_nav_text"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:text="@string/pref_viewer_nav"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toStartOf="@id/verticalcenter"
+        app:layout_constraintBaseline_toBaselineOf="@id/webtoon_nav"/>
+
+    <androidx.appcompat.widget.AppCompatSpinner
+        android:id="@+id/webtoon_nav"
+        android:layout_width="0dp"
+        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" />
+
+    <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" />
+
+    <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
+        android:id="@+id/tapping_inverted"
+        android:layout_width="0dp"
+        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" />
+
+    <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" />
+
+    <androidx.constraintlayout.widget.Group
+        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"
+        tools:layout_editor_absoluteX="24dp" />
+
+    <android.widget.Space
+        android:id="@+id/spinner_end"
+        android:layout_width="16dp"
+        android:layout_height="0dp"
+        app:layout_constraintStart_toEndOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>