Split Reader Bar

Taken from Neko

Co-Authored-By: Carlos <2092019+CarlosEsco@users.noreply.github.com>

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

@@ -54,7 +54,6 @@ import eu.kanade.tachiyomi.util.storage.getUriCompat
 import eu.kanade.tachiyomi.util.system.GLUtil
 import eu.kanade.tachiyomi.util.system.ThemeUtil
 import eu.kanade.tachiyomi.util.system.dpToPx
-import eu.kanade.tachiyomi.util.system.getBottomGestureInsets
 import eu.kanade.tachiyomi.util.system.getResourceColor
 import eu.kanade.tachiyomi.util.system.hasSideNavBar
 import eu.kanade.tachiyomi.util.system.isBottomTappable
@@ -222,9 +221,9 @@ class ReaderActivity :
             menuVisible = savedInstanceState.getBoolean(::menuVisible.name)
         }
 
-        binding.readerChaptersSheet.chaptersBottomSheet.setup(this)
+        binding.chaptersSheet.chaptersBottomSheet.setup(this)
         if (ThemeUtil.isBlueTheme(preferences.theme())) {
-            binding.readerChaptersSheet.chapterRecycler.setBackgroundColor(getResourceColor(android.R.attr.colorBackground))
+            binding.chaptersSheet.chapterRecycler.setBackgroundColor(getResourceColor(android.R.attr.colorBackground))
         }
         config = ReaderConfig()
         initializeMenu()
@@ -236,7 +235,7 @@ class ReaderActivity :
     override fun onDestroy() {
         super.onDestroy()
         viewer?.destroy()
-        binding.readerChaptersSheet.chaptersBottomSheet.adapter = null
+        binding.chaptersSheet.chaptersBottomSheet.adapter = null
         viewer = null
         config = null
         bottomSheet?.dismiss()
@@ -288,20 +287,15 @@ class ReaderActivity :
     override fun onOptionsItemSelected(item: MenuItem): Boolean {
         coroutine?.cancel()
         when (item.itemId) {
-            R.id.action_display_settings -> TabbedReaderSettingsSheet(this).show()
             R.id.action_share_page, R.id.action_set_page_as_cover, R.id.action_save_page -> {
                 val currentChapter = presenter.getCurrentChapter() ?: return true
-                val page = currentChapter.pages?.getOrNull(binding.readerChaptersSheet.pageSeekBar.progress) ?: return true
+                val page = currentChapter.pages?.getOrNull(binding.readerNav.pageSeekbar.progress) ?: return true
                 when (item.itemId) {
                     R.id.action_share_page -> shareImage(page)
                     R.id.action_set_page_as_cover -> showSetCoverPrompt(page)
                     R.id.action_save_page -> saveImage(page)
                 }
             }
-            R.id.action_reader_settings -> {
-                val intent = SearchActivity.openReaderSettings(this)
-                startActivity(intent)
-            }
             else -> return super.onOptionsItemSelected(item)
         }
         return true
@@ -325,8 +319,8 @@ class ReaderActivity :
      * delegated to the presenter.
      */
     override fun onBackPressed() {
-        if (binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
-            binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
+        if (binding.chaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
+            binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
             return
         }
         presenter.onBackPressed()
@@ -386,7 +380,7 @@ class ReaderActivity :
         }
 
         // Init listeners on bottom menu
-        binding.readerChaptersSheet.pageSeekBar.setOnSeekBarChangeListener(
+        binding.readerNav.pageSeekbar.setOnSeekBarChangeListener(
             object : SimpleSeekBarListener() {
                 override fun onProgressChanged(seekBar: SeekBar, value: Int, fromUser: Boolean) {
                     if (viewer != null && fromUser) {
@@ -398,9 +392,9 @@ class ReaderActivity :
 
         // Set initial visibility
         setMenuVisibility(menuVisible)
-        binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.isHideable = !menuVisible
-        if (!menuVisible) binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.hide()
-        val peek = binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.peekHeight ?: 30.dpToPx
+        binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.isHideable = !menuVisible
+        if (!menuVisible) binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.hide()
+        // val peek = binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.peekHeight ?: 30.dpToPx
         binding.readerLayout.doOnApplyWindowInsets { v, insets, _ ->
             sheetManageNavColor = when {
                 insets.isBottomTappable() -> {
@@ -424,13 +418,16 @@ class ReaderActivity :
             binding.toolbar.updateLayoutParams<ViewGroup.MarginLayoutParams> {
                 topMargin = insets.systemWindowInsetTop
             }
-            binding.readerChaptersSheet.chaptersBottomSheet.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+            binding.chaptersSheet.chaptersBottomSheet.updateLayoutParams<ViewGroup.MarginLayoutParams> {
                 leftMargin = insets.systemWindowInsetLeft
                 rightMargin = insets.systemWindowInsetRight
                 height = 280.dpToPx + insets.systemWindowInsetBottom
             }
-            binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.peekHeight = peek + insets.getBottomGestureInsets()
-            binding.readerChaptersSheet.chapterRecycler.updatePaddingRelative(bottom = insets.systemWindowInsetBottom)
+            binding.navLayout.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+                leftMargin = 6.dpToPx + insets.systemWindowInsetLeft
+                rightMargin = 6.dpToPx + insets.systemWindowInsetRight
+            }
+            binding.chaptersSheet.chapterRecycler.updatePaddingRelative(bottom = insets.systemWindowInsetBottom)
             binding.viewerContainer.requestLayout()
         }
     }
@@ -448,10 +445,10 @@ class ReaderActivity :
             systemUi?.show()
             binding.readerMenu.visible()
 
-            if (binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
-                binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.isHideable = false
+            if (binding.chaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
+                binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.isHideable = false
             }
-            if (!binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded() && sheetManageNavColor) {
+            if (!binding.chaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded() && sheetManageNavColor) {
                 window.navigationBarColor = Color.TRANSPARENT
             }
             if (animate) {
@@ -466,7 +463,7 @@ class ReaderActivity :
                     )
                     binding.appBar.startAnimation(toolbarAnimation)
                 }
-                binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
+                binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
             }
         } else {
             systemUi?.hide()
@@ -481,8 +478,8 @@ class ReaderActivity :
                     }
                 )
                 binding.appBar.startAnimation(toolbarAnimation)
-                BottomSheetBehavior.from(binding.readerChaptersSheet.chaptersBottomSheet).isHideable = true
-                binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.hide()
+                BottomSheetBehavior.from(binding.chaptersSheet.chaptersBottomSheet).isHideable = true
+                binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.hide()
             } else {
                 binding.readerMenu.gone()
             }
@@ -547,7 +544,7 @@ class ReaderActivity :
 
         binding.toolbar.title = manga.title
 
-        binding.readerChaptersSheet.pageSeekBar.isRTL = newViewer is R2LPagerViewer
+        binding.readerNav.pageSeekbar.isRTL = newViewer is R2LPagerViewer
 
         binding.pleaseWait.visible()
         binding.pleaseWait.startAnimation(AnimationUtils.loadAnimation(this, R.anim.fade_in_long))
@@ -608,7 +605,7 @@ class ReaderActivity :
     }
 
     fun refreshChapters() {
-        binding.readerChaptersSheet.chaptersBottomSheet.refreshList()
+        binding.chaptersSheet.chaptersBottomSheet.refreshList()
     }
 
     /**
@@ -620,22 +617,30 @@ class ReaderActivity :
         val newChapter = presenter.onPageSelected(page)
         val pages = page.chapter.pages ?: return
 
-        // Set bottom page number
-        binding.pageNumber.text = "${page.number}/${pages.size}"
-        // Set seekbar page number
-        binding.readerChaptersSheet.pageText.text = "${page.number} / ${pages.size}"
+        val currentPage = page.number
+        val totalPages = pages.size
 
-        if (!newChapter && binding.readerChaptersSheet.chaptersBottomSheet.shouldCollapse && binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
-            binding.readerChaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
+        // Set bottom page number
+        binding.pageNumber.text = "$currentPage/$totalPages"
+
+        if (viewer is R2LPagerViewer) {
+            binding.readerNav.rightPageText.text = currentPage.toString()
+            binding.readerNav.leftPageText.text = totalPages.toString()
+        } else {
+            binding.readerNav.leftPageText.text = currentPage.toString()
+            binding.readerNav.rightPageText.text = totalPages.toString()
         }
-        if (binding.readerChaptersSheet.chaptersBottomSheet.selectedChapterId != page.chapter.chapter.id) {
-            binding.readerChaptersSheet.chaptersBottomSheet.refreshList()
+        if (!newChapter && binding.chaptersSheet.chaptersBottomSheet.shouldCollapse && binding.chaptersSheet.chaptersBottomSheet.sheetBehavior.isExpanded()) {
+            binding.chaptersSheet.chaptersBottomSheet.sheetBehavior?.collapse()
         }
-        binding.readerChaptersSheet.chaptersBottomSheet.shouldCollapse = true
+        if (binding.chaptersSheet.chaptersBottomSheet.selectedChapterId != page.chapter.chapter.id) {
+            binding.chaptersSheet.chaptersBottomSheet.refreshList()
+        }
+        binding.chaptersSheet.chaptersBottomSheet.shouldCollapse = true
 
         // Set seekbar progress
-        binding.readerChaptersSheet.pageSeekBar.max = pages.lastIndex
-        binding.readerChaptersSheet.pageSeekBar.progress = page.index
+        binding.readerNav.pageSeekbar.max = pages.lastIndex
+        binding.readerNav.pageSeekbar.progress = page.index
     }
 
     /**

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

@@ -7,6 +7,7 @@ import android.util.AttributeSet
 import android.view.View
 import android.widget.LinearLayout
 import androidx.core.graphics.ColorUtils
+import androidx.core.view.isVisible
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
 import com.google.android.material.bottomsheet.BottomSheetBehavior
@@ -15,16 +16,20 @@ import com.mikepenz.fastadapter.adapters.ItemAdapter
 import com.mikepenz.fastadapter.listeners.ClickEventHook
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.databinding.ReaderChaptersSheetBinding
+import eu.kanade.tachiyomi.ui.main.SearchActivity
 import eu.kanade.tachiyomi.ui.reader.ReaderActivity
 import eu.kanade.tachiyomi.ui.reader.ReaderPresenter
+import eu.kanade.tachiyomi.ui.reader.settings.TabbedReaderSettingsSheet
 import eu.kanade.tachiyomi.util.system.dpToPx
 import eu.kanade.tachiyomi.util.system.getResourceColor
 import eu.kanade.tachiyomi.util.system.launchUI
 import eu.kanade.tachiyomi.util.view.collapse
 import eu.kanade.tachiyomi.util.view.expand
+import eu.kanade.tachiyomi.util.view.gone
+import eu.kanade.tachiyomi.util.view.isCollapsed
 import eu.kanade.tachiyomi.util.view.isExpanded
-import eu.kanade.tachiyomi.util.view.visInvisIf
-import eu.kanade.tachiyomi.util.view.visibleIf
+import eu.kanade.tachiyomi.util.view.visible
+import kotlin.math.abs
 import kotlin.math.max
 import kotlin.math.min
 import kotlin.math.roundToInt
@@ -64,10 +69,20 @@ class ReaderChapterSheet @JvmOverloads constructor(context: Context, attrs: Attr
             activity.openMangaInBrowser()
         }
 
+        binding.displayOptions.setOnClickListener {
+            TabbedReaderSettingsSheet(activity).show()
+        }
+
+        binding.fullSettings.setOnClickListener {
+            val intent = SearchActivity.openReaderSettings(activity)
+            activity.startActivity(intent)
+        }
+
         post {
             binding.chapterRecycler.alpha = if (sheetBehavior.isExpanded()) 1f else 0f
             binding.chapterRecycler.isClickable = sheetBehavior.isExpanded()
             binding.chapterRecycler.isFocusable = sheetBehavior.isExpanded()
+            activity.binding.readerNav.root.isVisible = sheetBehavior.isCollapsed()
         }
 
         sheetBehavior?.addBottomSheetCallback(
@@ -75,10 +90,11 @@ class ReaderChapterSheet @JvmOverloads constructor(context: Context, attrs: Attr
                 override fun onSlide(bottomSheet: View, progress: Float) {
                     binding.pill.alpha = (1 - max(0f, progress)) * 0.25f
                     val trueProgress = max(progress, 0f)
-                    binding.chaptersButton.alpha = 1 - trueProgress
-                    binding.webviewButton.alpha = trueProgress
-                    binding.webviewButton.visibleIf(binding.webviewButton.alpha > 0)
-                    binding.chaptersButton.visInvisIf(binding.chaptersButton.alpha > 0)
+                    activity.binding.readerNav.root.alpha = (1 - abs(progress)).coerceIn(0f, 1f)
+//                    binding.chaptersButton.alpha = 1 - trueProgress
+//                    binding.webviewButton.alpha = trueProgress
+//                    binding.webviewButton.visibleIf(binding.webviewButton.alpha > 0)
+//                    binding.chaptersButton.visInvisIf(binding.chaptersButton.alpha > 0)
                     backgroundTintList =
                         ColorStateList.valueOf(lerpColor(primary, fullPrimary, trueProgress))
                     binding.chapterRecycler.alpha = trueProgress
@@ -96,19 +112,32 @@ class ReaderChapterSheet @JvmOverloads constructor(context: Context, attrs: Attr
                             adapter?.getPosition(presenter.getCurrentChapter()?.chapter?.id ?: 0L) ?: 0,
                             binding.chapterRecycler.height / 2 - 30.dpToPx
                         )
-                        binding.chaptersButton.alpha = 1f
-                        binding.webviewButton.alpha = 0f
+                        activity.binding.readerNav.root.visible()
+                        activity.binding.readerNav.root.alpha = 1f
+//                        binding.chaptersButton.alpha = 1f
+//                        binding.webviewButton.alpha = 0f
+                    }
+                    if (state == BottomSheetBehavior.STATE_DRAGGING || state == BottomSheetBehavior.STATE_SETTLING) {
+                        activity.binding.readerNav.root.visible()
                     }
                     if (state == BottomSheetBehavior.STATE_EXPANDED) {
+                        activity.binding.readerNav.root.gone()
+                        activity.binding.readerNav.root.alpha = 0f
                         binding.chapterRecycler.alpha = 1f
-                        binding.chaptersButton.alpha = 0f
-                        binding.webviewButton.alpha = 1f
+//                        binding.chaptersButton.alpha = 0f
+//                        binding.webviewButton.alpha = 1f
                         if (activity.sheetManageNavColor) activity.window.navigationBarColor = primary
                     }
+                    if (state == BottomSheetBehavior.STATE_HIDDEN) {
+                        activity.binding.readerNav.root.alpha = 0f
+                        activity.binding.readerNav.root.gone()
+                    }
                     binding.chapterRecycler.isClickable = state == BottomSheetBehavior.STATE_EXPANDED
                     binding.chapterRecycler.isFocusable = state == BottomSheetBehavior.STATE_EXPANDED
-                    binding.webviewButton.visibleIf(state != BottomSheetBehavior.STATE_COLLAPSED)
-                    binding.chaptersButton.visInvisIf(state != BottomSheetBehavior.STATE_EXPANDED)
+                    binding.chapterRecycler.isClickable = state == BottomSheetBehavior.STATE_COLLAPSED
+                    binding.chapterRecycler.isFocusable = state == BottomSheetBehavior.STATE_COLLAPSED
+//                    binding.webviewButton.visibleIf(state != BottomSheetBehavior.STATE_COLLAPSED)
+//                    binding.chaptersButton.visInvisIf(state != BottomSheetBehavior.STATE_EXPANDED)
                 }
             }
         )

app/src/main/res/color/secondary_alpha.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:alpha="0.80" android:color="?colorSecondary" />
+</selector>

app/src/main/res/drawable/chapter_nav.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <corners android:radius="50dp" />
+    <solid android:color="@color/secondary_alpha" />
+</shape>

app/src/main/res/drawable/ic_skip_next_24.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/actionBarTintColor">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M6,18l8.5,-6L6,6v12zM16,6v12h2V6h-2z"/>
+</vector>

app/src/main/res/drawable/ic_skip_previous_24.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/actionBarTintColor">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M6,6h2v12L6,18zM9.5,12l8.5,6L18,6z"/>
+</vector>

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

@@ -1,7 +1,9 @@
 <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/reader_layout"
     android:layout_width="match_parent"
+    tools:background="@color/color_button_default"
     android:layout_height="match_parent"
     android:gravity="center">
 
@@ -50,7 +52,7 @@
             android:id="@+id/app_bar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="?attr/colorSecondary">
+            android:background="@color/secondary_alpha">
 
             <androidx.appcompat.widget.Toolbar
                 android:id="@+id/toolbar"
@@ -61,8 +63,23 @@
         </FrameLayout>
     </FrameLayout>
 
+    <FrameLayout
+        android:id="@+id/nav_layout"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="6dp"
+        android:layout_marginEnd="6dp"
+        android:paddingBottom="6dp"
+        app:layout_anchorGravity="top"
+        android:layout_gravity="top"
+        app:layout_anchor="@id/chapters_sheet" >
+
+        <include layout="@layout/reader_nav"
+            android:id="@+id/reader_nav" />
+    </FrameLayout>
+
     <include layout="@layout/reader_chapters_sheet"
-        android:id="@+id/reader_chapters_sheet"/>
+        android:id="@+id/chapters_sheet"/>
 
     <View
         android:id="@+id/brightness_overlay"

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

@@ -6,9 +6,9 @@
     android:layout_width="match_parent"
     android:layout_height="300dp"
     android:background="@drawable/bottom_sheet_rounded_background"
-    android:backgroundTint="?colorSecondary"
+    android:backgroundTint="@color/secondary_alpha"
     android:orientation="vertical"
-    app:behavior_peekHeight="?attr/actionBarSize"
+    app:behavior_peekHeight="60dp"
     app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
     <androidx.constraintlayout.widget.ConstraintLayout
@@ -40,7 +40,9 @@
             android:padding="@dimen/material_layout_keylines_screen_edge_margin"
             app:tint="?actionBarTintColor"
             android:tooltipText="@string/view_chapters"
+            app:layout_constraintHorizontal_chainStyle="spread"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/webview_button"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
             app:srcCompat="@drawable/ic_format_list_numbered_24dp" />
@@ -54,32 +56,45 @@
             android:padding="@dimen/material_layout_keylines_screen_edge_margin"
             app:tint="?actionBarTintColor"
             android:tooltipText="@string/open_in_webview"
+            app:layout_constraintHorizontal_chainStyle="spread"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintStart_toEndOf="@id/chapters_button"
+            app:layout_constraintEnd_toStartOf="@id/display_options"
             app:layout_constraintTop_toTopOf="parent"
-            android:alpha="0.0"
             app:srcCompat="@drawable/ic_open_in_webview_24dp" />
 
-        <eu.kanade.tachiyomi.ui.reader.ReaderSeekBar
-            android:id="@+id/page_seek_bar"
-            android:layout_width="0dp"
-            android:layout_height="match_parent"
+        <ImageButton
+            android:id="@+id/display_options"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="?selectableItemBackgroundBorderless"
+            android:contentDescription="@string/next_title"
+            android:padding="@dimen/material_layout_keylines_screen_edge_margin"
+            app:tint="?actionBarTintColor"
+            app:layout_constraintHorizontal_chainStyle="spread"
+            android:tooltipText="@string/display_options"
             app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toStartOf="@id/page_text"
-            app:layout_constraintStart_toEndOf="@id/chapters_button"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-            android:id="@+id/page_text"
-            android:layout_width="100dp"
-            android:layout_height="match_parent"
-            android:gravity="center"
-            android:textColor="?actionBarTintColor"
-            android:textSize="15sp"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintEnd_toStartOf="@id/full_settings"
+            app:layout_constraintStart_toEndOf="@id/webview_button"
             app:layout_constraintTop_toTopOf="parent"
-            tools:text="100 / 105" />
+            app:srcCompat="@drawable/ic_tune_24dp" />
+
+        <ImageButton
+            android:id="@+id/full_settings"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="?selectableItemBackgroundBorderless"
+            android:contentDescription="@string/next_title"
+            android:padding="@dimen/material_layout_keylines_screen_edge_margin"
+            app:tint="?actionBarTintColor"
+            android:visibility="gone"
+            app:layout_constraintHorizontal_chainStyle="spread"
+            app:layout_constraintEnd_toEndOf="parent"
+            android:tooltipText="@string/reader_settings"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/display_options"
+            app:layout_constraintTop_toTopOf="parent"
+            app:srcCompat="@drawable/ic_settings_24dp" />
     </androidx.constraintlayout.widget.ConstraintLayout>
 
     <androidx.recyclerview.widget.RecyclerView

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

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<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:id="@+id/reader_nav"
+    android:background="@drawable/chapter_nav"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingStart="4dp"
+    android:paddingEnd="4dp"
+    android:layout_gravity="top"
+    android:paddingBottom="6dp"
+    android:paddingTop="6dp"
+    android:clickable="true"
+    android:focusable="true"
+    android:gravity="center"
+    android:orientation="horizontal">
+
+    <ImageButton
+        android:id="@+id/left_chapter"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_gravity="center"
+        android:layout_marginStart="50dp"
+        android:background="?selectableItemBackgroundBorderless"
+        android:layout_marginEnd="8dp"
+        android:contentDescription="@string/previous_chapter"
+        android:padding="@dimen/material_layout_keylines_screen_edge_margin"
+        app:tint="@color/textColorPrimary"
+        app:srcCompat="@drawable/ic_skip_previous_24" />
+
+    <LinearLayout
+        android:id="@+id/reader_seekbar"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:paddingStart="10dp"
+        android:paddingEnd="10dp">
+
+        <TextView
+            android:id="@+id/left_page_text"
+            android:layout_width="32dp"
+            android:layout_height="match_parent"
+            android:gravity="center"
+            android:textColor="@color/textColorPrimary"
+            android:textSize="15sp"
+            tools:text="1" />
+
+        <eu.kanade.tachiyomi.ui.reader.ReaderSeekBar
+            android:id="@+id/page_seekbar"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:maxHeight="?attr/actionBarSize"
+            android:minHeight="?attr/actionBarSize" />
+
+        <TextView
+            android:id="@+id/right_page_text"
+            android:layout_width="32dp"
+            android:layout_height="match_parent"
+            android:gravity="center"
+            android:textColor="@color/textColorPrimary"
+            android:textSize="15sp"
+            tools:text="15" />
+
+    </LinearLayout>
+
+    <ImageButton
+        android:id="@+id/right_chapter"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_gravity="center"
+        android:layout_marginStart="8dp"
+        android:layout_marginEnd="50dp"
+        android:background="?selectableItemBackgroundBorderless"
+        android:contentDescription="@string/next_chapter"
+        android:padding="@dimen/material_layout_keylines_screen_edge_margin"
+        app:tint="@color/textColorPrimary"
+        app:srcCompat="@drawable/ic_skip_next_24" />
+
+</LinearLayout>

app/src/main/res/menu/reader.xml

@@ -2,12 +2,6 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
 
-    <item
-        android:id="@+id/action_display_settings"
-        android:icon="@drawable/ic_tune_24dp"
-        android:title="@string/display_options"
-        app:showAsAction="ifRoom" />
-
     <item
         android:id="@+id/action_share_page"
         android:icon="@drawable/ic_share_24dp"
@@ -25,11 +19,4 @@
         android:icon="@drawable/ic_photo_24dp"
         android:title="@string/set_page_as_cover"
         app:showAsAction="never" />
-
-    <item
-        android:id="@+id/action_reader_settings"
-        android:icon="@drawable/ic_settings_24dp"
-        android:title="@string/reader_settings"
-        app:showAsAction="never" />
-
 </menu>