Edge to edge bottom sheets for reader

Added collaspe button to reader sheet
Made other reader themes material

app/src/main/java/eu/kanade/tachiyomi/ui/migration/manga/design/MigrationBottomSheetDialog.kt

@@ -2,13 +2,8 @@ package eu.kanade.tachiyomi.ui.migration.manga.design
 
 import android.app.Activity
 import android.content.res.Configuration
-import android.graphics.Color
-import android.graphics.drawable.ColorDrawable
-import android.graphics.drawable.GradientDrawable
 import android.os.Build
 import android.os.Bundle
-import android.view.Gravity
-import android.view.View
 import android.view.ViewGroup
 import android.view.WindowManager
 import android.widget.CompoundButton
@@ -17,7 +12,6 @@ import android.widget.RadioButton
 import android.widget.RadioGroup
 import android.widget.Toast
 import androidx.constraintlayout.widget.ConstraintLayout
-import androidx.core.graphics.ColorUtils
 import com.bluelinelabs.conductor.Controller
 import com.f2prateek.rx.preferences.Preference
 import com.google.android.material.bottomsheet.BottomSheetDialog
@@ -25,24 +19,18 @@ import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.preference.PreferencesHelper
 import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.ui.migration.MigrationFlags
-import eu.kanade.tachiyomi.util.view.gone
+import eu.kanade.tachiyomi.util.system.dpToPx
 import eu.kanade.tachiyomi.util.system.toast
-import eu.kanade.tachiyomi.util.view.marginBottom
+import eu.kanade.tachiyomi.util.view.gone
-import eu.kanade.tachiyomi.util.view.updateLayoutParams
+import eu.kanade.tachiyomi.util.view.setBottomEdge
+import eu.kanade.tachiyomi.util.view.setEdgeToEdge
 import eu.kanade.tachiyomi.util.view.visible
 import kotlinx.android.synthetic.main.migration_bottom_sheet.*
-import kotlinx.android.synthetic.main.migration_bottom_sheet.extra_search_param
-import kotlinx.android.synthetic.main.migration_bottom_sheet.extra_search_param_text
-import kotlinx.android.synthetic.main.migration_bottom_sheet.mig_categories
-import kotlinx.android.synthetic.main.migration_bottom_sheet.mig_chapters
-import kotlinx.android.synthetic.main.migration_bottom_sheet.mig_tracking
-import kotlinx.android.synthetic.main.migration_bottom_sheet.view.*
 import uy.kohesive.injekt.injectLazy
 
-class MigrationBottomSheetDialog(private val activity: Activity, theme: Int, private val listener:
+class MigrationBottomSheetDialog(activity: Activity, private val listener:
 StartMigrationListener) :
-    BottomSheetDialog(activity,
+    BottomSheetDialog(activity, R.style.BottomSheetDialogTheme) {
-    theme) {
     /**
      * Preferences helper.
      */
@@ -55,31 +43,35 @@ StartMigrationListener) :
        // scroll.addView(view)
 
         setContentView(view)
-        if (activity.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE)
+        if (activity.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE) {
             sourceGroup.orientation = LinearLayout.HORIZONTAL
-        window?.setBackgroundDrawable(null)
+            val params = skip_step.layoutParams as ConstraintLayout.LayoutParams
-        val currentNightMode = activity.resources.configuration.uiMode and Configuration
+            params.apply {
-            .UI_MODE_NIGHT_MASK
+                topToBottom = -1
-        if (currentNightMode == Configuration.UI_MODE_NIGHT_NO)
+                startToStart = -1
-        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O)
+                bottomToBottom = extra_search_param.id
-            window?.decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+                startToEnd = extra_search_param.id
-        else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+                endToEnd = sourceGroup.id
-            val nView = View(context)
+                topToTop = extra_search_param.id
-            val height = activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
+                marginStart = 16.dpToPx
-            val params = ConstraintLayout.LayoutParams(
+            }
-                ViewGroup.LayoutParams.MATCH_PARENT, height
+            skip_step.layoutParams = params
-            )
+
-            params.bottomToBottom = constraintLayout.id
+
-            params.startToStart = constraintLayout.id
+            val params2 = extra_search_param_text.layoutParams as ConstraintLayout.LayoutParams
-            params.endToEnd = constraintLayout.id
+            params2.bottomToBottom = options_layout.id
-            nView.layoutParams = params
+            extra_search_param_text.layoutParams = params2
-            nView.background = GradientDrawable(
+
-                GradientDrawable.Orientation.BOTTOM_TOP, intArrayOf(
+
-                    ColorUtils.setAlphaComponent(Color.BLACK, 179), Color.TRANSPARENT
+            val params3 = extra_search_param.layoutParams as ConstraintLayout.LayoutParams
-                )
+            params3.endToEnd = -1
-            )
+            extra_search_param.layoutParams = params3
-            constraintLayout.addView(nView)
+
         }
+        setEdgeToEdge(activity, constraint_layout, view, false)
+        setBottomEdge(
+            if (activity.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE) extra_search_param_text
+            else skip_step, activity)
     }
 
     /**
@@ -92,11 +84,6 @@ StartMigrationListener) :
 
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
             window?.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
-            val marginB = skip_step.marginBottom
-            skip_step.updateLayoutParams<ViewGroup.MarginLayoutParams> {
-                bottomMargin = marginB +
-                    activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
-            }
         }
 
 

app/src/main/java/eu/kanade/tachiyomi/ui/migration/manga/design/PreMigrationController.kt

@@ -72,8 +72,7 @@ class PreMigrationController(bundle: Bundle? = null) : BaseController(bundle), F
 
         fab.setOnClickListener {
             if (dialog?.isShowing != true) {
-                dialog = MigrationBottomSheetDialog(activity!!, R.style.BottomSheetDialogTheme,
+                dialog = MigrationBottomSheetDialog(activity!!,  this)
-                    this)
                 dialog?.show()
                 val bottomSheet = dialog?.findViewById<FrameLayout>(
                     com.google.android.material.R.id.design_bottom_sheet

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

@@ -1,6 +1,7 @@
 package eu.kanade.tachiyomi.ui.reader
 
 import android.graphics.Color
+import android.os.Build
 import android.view.View
 import android.view.ViewGroup
 import android.widget.SeekBar
@@ -11,11 +12,12 @@ import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.preference.PreferencesHelper
 import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.util.lang.plusAssign
+import eu.kanade.tachiyomi.util.view.setBottomEdge
+import eu.kanade.tachiyomi.util.view.setEdgeToEdge
 import eu.kanade.tachiyomi.widget.IgnoreFirstSpinnerListener
 import eu.kanade.tachiyomi.widget.SimpleSeekBarListener
 import kotlinx.android.synthetic.main.reader_color_filter.*
-import kotlinx.android.synthetic.main.reader_color_filter_sheet.brightness_overlay
+import kotlinx.android.synthetic.main.reader_color_filter_sheet.*
-import kotlinx.android.synthetic.main.reader_color_filter_sheet.color_overlay
 import rx.Subscription
 import rx.android.schedulers.AndroidSchedulers
 import rx.subscriptions.CompositeSubscription
@@ -26,7 +28,8 @@ import kotlin.math.abs
 /**
  * Color filter sheet to toggle custom filter and brightness overlay.
  */
-class ReaderColorFilterSheet(activity: ReaderActivity) : BottomSheetDialog(activity) {
+class ReaderColorFilterSheet(activity: ReaderActivity) : BottomSheetDialog
+    (activity, R.style.BottomSheetDialogTheme) {
 
     private val preferences by injectLazy<PreferencesHelper>()
 
@@ -51,6 +54,14 @@ class ReaderColorFilterSheet(activity: ReaderActivity) : BottomSheetDialog(activ
         val view = activity.layoutInflater.inflate(R.layout.reader_color_filter_sheet, null)
         setContentView(view)
 
+        setEdgeToEdge(activity, constraint_layout, view, true)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+            preferences.readerTheme().getOrDefault() == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetRight == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetLeft == 0)
+            window?.decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+        setBottomEdge(brightness_seekbar, activity)
+
         sheetBehavior = BottomSheetBehavior.from(view.parent as ViewGroup)
 
         // Initialize subscriptions.
@@ -90,6 +101,12 @@ class ReaderColorFilterSheet(activity: ReaderActivity) : BottomSheetDialog(activ
             preferences.customBrightness().set(isChecked)
         }
 
+        /*color_filter_mode.setOnClickListener {
+            val popupMenu = PopupMenu(context, color_filter_mode)
+
+            popupMenu.menuInflater.inflate(R.menu.download_single, popupMenu.menu)
+            popupMenu.show()
+        }*/
         color_filter_mode.onItemSelectedListener = IgnoreFirstSpinnerListener { position ->
             preferences.colorFilterMode().set(position)
         }

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

@@ -1,13 +1,21 @@
 package eu.kanade.tachiyomi.ui.reader
 
+import android.os.Build
 import android.os.Bundle
+import android.view.View
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import android.view.ViewGroup
 import com.afollestad.materialdialogs.MaterialDialog
 import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.data.preference.PreferencesHelper
+import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.source.model.Page
 import eu.kanade.tachiyomi.ui.reader.model.ReaderPage
+import eu.kanade.tachiyomi.util.view.setBottomEdge
+import eu.kanade.tachiyomi.util.view.setEdgeToEdge
 import kotlinx.android.synthetic.main.reader_page_sheet.*
+import uy.kohesive.injekt.Injekt
+import uy.kohesive.injekt.api.get
 
 /**
  * Sheet to show when a page is long clicked.
@@ -15,7 +23,7 @@ import kotlinx.android.synthetic.main.reader_page_sheet.*
 class ReaderPageSheet(
         private val activity: ReaderActivity,
         private val page: ReaderPage
-) : BottomSheetDialog(activity) {
+) : BottomSheetDialog(activity, R.style.BottomSheetDialogTheme) {
 
     /**
      * View used on this sheet.
@@ -24,6 +32,15 @@ class ReaderPageSheet(
 
     init {
         setContentView(view)
+        setEdgeToEdge(activity, view, view, false)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+            Injekt.get<PreferencesHelper>().readerTheme().getOrDefault() == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetRight == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetLeft == 0)
+            window?.decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+
+        setBottomEdge(save_layout, activity)
+
 
         set_as_cover_layout.setOnClickListener { setAsCover() }
         share_layout.setOnClickListener { share() }

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

@@ -1,16 +1,25 @@
 package eu.kanade.tachiyomi.ui.reader
 
+import android.content.res.Configuration
+import android.os.Build
 import android.os.Bundle
+import android.view.View
+import android.view.ViewGroup
 import com.google.android.material.bottomsheet.BottomSheetDialog
 import androidx.core.widget.NestedScrollView
 import android.widget.CompoundButton
 import android.widget.Spinner
 import com.f2prateek.rx.preferences.Preference
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.preference.PreferencesHelper
 import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.ui.reader.viewer.pager.PagerViewer
 import eu.kanade.tachiyomi.ui.reader.viewer.webtoon.WebtoonViewer
+import eu.kanade.tachiyomi.util.system.dpToPx
+import eu.kanade.tachiyomi.util.view.gone
+import eu.kanade.tachiyomi.util.view.setBottomEdge
+import eu.kanade.tachiyomi.util.view.setEdgeToEdge
 import eu.kanade.tachiyomi.util.view.visible
 import eu.kanade.tachiyomi.widget.IgnoreFirstSpinnerListener
 import kotlinx.android.synthetic.main.reader_settings_sheet.*
@@ -19,19 +28,48 @@ import uy.kohesive.injekt.injectLazy
 /**
  * Sheet to show reader and viewer preferences.
  */
-class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDialog(activity) {
+class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDialog
+    (activity, R.style.BottomSheetDialogTheme) {
 
     /**
      * Preferences helper.
      */
     private val preferences by injectLazy<PreferencesHelper>()
 
+    private var sheetBehavior: BottomSheetBehavior<*>
+
+    val scroll:NestedScrollView
+
     init {
         // Use activity theme for this layout
         val view = activity.layoutInflater.inflate(R.layout.reader_settings_sheet, null)
-        val scroll = NestedScrollView(activity)
+        scroll = NestedScrollView(activity)
         scroll.addView(view)
         setContentView(scroll)
+
+        sheetBehavior = BottomSheetBehavior.from(scroll.parent as ViewGroup)
+        setEdgeToEdge(activity, constraint_layout, scroll,
+            context.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O &&
+            preferences.readerTheme().getOrDefault() == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetRight == 0 &&
+            activity.window.decorView.rootWindowInsets.systemWindowInsetLeft == 0)
+            window?.decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+        val height = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
+        } else 0
+        sheetBehavior.peekHeight = 200.dpToPx + height
+
+        sheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
+            override fun onSlide(bottomSheet: View, progress: Float) { }
+
+            override fun onStateChanged(p0: View, state: Int) {
+                if (state == BottomSheetBehavior.STATE_EXPANDED) {
+                   sheetBehavior.skipCollapsed = true
+                }
+            }
+        })
+
     }
 
     /**
@@ -46,6 +84,21 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
             is PagerViewer -> initPagerPreferences()
             is WebtoonViewer -> initWebtoonPreferences()
         }
+
+        setBottomEdge(
+            if (activity.viewer is PagerViewer) page_transitions else crop_borders_webtoon, activity
+        )
+
+        close_button.setOnClickListener {
+            dismiss()
+        }
+
+    }
+
+    override fun onStart() {
+        super.onStart()
+        sheetBehavior.skipCollapsed = true
+        sheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
     }
 
     /**
@@ -70,6 +123,7 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
      */
     private fun initPagerPreferences() {
         pager_prefs_group.visible()
+        webtoon_prefs_group.gone()
         scale_type.bindToPreference(preferences.imageScaleType(), 1)
         zoom_start.bindToPreference(preferences.zoomStart(), 1)
         crop_borders.bindToPreference(preferences.cropBorders())
@@ -81,6 +135,7 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) : BottomSheetDia
      */
     private fun initWebtoonPreferences() {
         webtoon_prefs_group.visible()
+        pager_prefs_group.gone()
         crop_borders_webtoon.bindToPreference(preferences.cropBordersWebtoon())
     }
 

app/src/main/java/eu/kanade/tachiyomi/util/view/ViewExtensions.kt

@@ -2,31 +2,35 @@
 
 package eu.kanade.tachiyomi.util.view
 
+import android.app.Activity
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.Point
 import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.os.Build
 import android.view.View
 import android.view.ViewGroup
 import android.view.WindowInsets
 import android.widget.TextView
 import androidx.annotation.Px
 import androidx.annotation.RequiresApi
-import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.appcompat.widget.SearchView
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.graphics.ColorUtils
 import androidx.core.view.ViewCompat
 import com.amulyakhare.textdrawable.TextDrawable
 import com.amulyakhare.textdrawable.util.ColorGenerator
 import com.bluelinelabs.conductor.Controller
+import com.google.android.material.bottomsheet.BottomSheetDialog
 import com.google.android.material.snackbar.Snackbar
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.data.preference.PreferencesHelper
-import eu.kanade.tachiyomi.util.system.getResourceColor
-import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.ui.main.MainActivity
+import eu.kanade.tachiyomi.util.system.getResourceColor
 import uy.kohesive.injekt.Injekt
 import uy.kohesive.injekt.api.get
-import uy.kohesive.injekt.injectLazy
 import kotlin.math.min
 
 /**
@@ -233,4 +237,55 @@ inline fun View.updatePaddingRelative(
     @Px bottom: Int = paddingBottom
 ) {
     setPaddingRelative(start, top, end, bottom)
+}
+
+fun BottomSheetDialog.setEdgeToEdge(activity: Activity, layout: View, contentView: View,
+    setTopMargin: Boolean) {
+    window?.setBackgroundDrawable(null)
+    val currentNightMode = activity.resources.configuration.uiMode and Configuration
+        .UI_MODE_NIGHT_MASK
+    if (currentNightMode == Configuration.UI_MODE_NIGHT_NO)
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            if (activity.window.decorView.rootWindowInsets.systemWindowInsetRight == 0 &&
+                activity.window.decorView.rootWindowInsets.systemWindowInsetLeft == 0)
+                window?.decorView?.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
+        }
+        else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && layout is ConstraintLayout) {
+            val nView = View(context)
+            val height = activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
+            val params = ConstraintLayout.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT, height
+            )
+            params.bottomToBottom = layout.id
+            params.startToStart = layout.id
+            params.endToEnd = layout.id
+            nView.layoutParams = params
+            nView.background = GradientDrawable(
+                GradientDrawable.Orientation.BOTTOM_TOP, intArrayOf(
+                    ColorUtils.setAlphaComponent(Color.BLACK, 179), Color.TRANSPARENT
+                )
+            )
+            layout.addView(nView)
+        }
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+        //window?.addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS)
+        window?.findViewById<View>(com.google.android.material.R.id.container)?.fitsSystemWindows =
+            false
+        contentView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+            if (setTopMargin)
+                topMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetTop
+            leftMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetLeft
+            rightMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetRight
+        }
+    }
+}
+
+fun setBottomEdge(view: View, activity: Activity) {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+        val marginB = view.marginBottom
+        view.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+            bottomMargin = marginB +
+                activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
+        }
+    }
 }

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

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="@color/gray_button">
+    <item android:id="@android:id/mask">
+        <shape android:shape="oval">
+            <solid android:color="@color/gray_button" />
+        </shape>
+    </item>
+</ripple>

app/src/main/res/layout-land/reader_color_filter_sheet.xml

@@ -4,18 +4,18 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:orientation="horizontal"
+    android:background="?android:colorBackground"
     android:baselineAligned="false"
-    android:background="?android:colorBackground">
+    android:orientation="horizontal">
 
     <FrameLayout
         android:id="@+id/frame"
         android:layout_width="0dp"
         android:layout_height="0dp"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintBottom_toBottomOf="@id/scroll"
         app:layout_constraintEnd_toStartOf="@id/scroll"
-        app:layout_constraintTop_toTopOf="@id/scroll"
+        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintBottom_toBottomOf="@id/scroll">
+        app:layout_constraintTop_toTopOf="@id/scroll">
 
         <androidx.appcompat.widget.AppCompatImageView
             android:layout_width="match_parent"
@@ -40,11 +40,11 @@
         android:id="@+id/scroll"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
-        app:layout_constraintStart_toEndOf="@id/frame"
+        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintEnd_toEndOf="parent">
+        app:layout_constraintStart_toEndOf="@id/frame">
 
-        <include layout="@layout/reader_color_filter"/>
+        <include layout="@layout/reader_color_filter" />
 
     </androidx.core.widget.NestedScrollView>
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -2,8 +2,10 @@
 <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:id="@+id/constraintLayout"
+    android:id="@+id/constraint_layout"
+    tools:background="@android:color/black"
     android:layout_width="match_parent"
+    style="@style/Theme.MaterialComponents.BottomSheetDialog"
     android:layout_height="match_parent"
     android:background="@android:color/transparent"
     android:fitsSystemWindows="true"
@@ -11,6 +13,7 @@
 
 
     <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/options_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="32dp"
@@ -103,7 +106,7 @@
             android:id="@+id/extra_search_param"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="0dp"
             android:text="@string/include_extra_search_parameter"
             app:layout_constraintEnd_toEndOf="@+id/sourceGroup"
             app:layout_constraintStart_toStartOf="@+id/sourceGroup"
@@ -134,18 +137,26 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="@+id/extra_search_param"
             app:layout_constraintStart_toStartOf="@+id/extra_search_param"
-            app:layout_constraintTop_toBottomOf="@+id/extra_search_param_text" />
+            app:layout_constraintTop_toBottomOf="@+id/extra_search_param_text"/>
     </androidx.constraintlayout.widget.ConstraintLayout>
 
+    <View
+        android:id="@+id/fab_guider"
+        android:layout_width="2dp"
+        app:layout_constraintTop_toTopOf="@+id/options_layout"
+        app:layout_constraintEnd_toEndOf="parent"
+        android:layout_height="30dp" />
+
     <com.google.android.material.floatingactionbutton.FloatingActionButton
         android:id="@+id/fab"
         style="@style/Theme.Widget.FAB"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="16dp"
+        android:layout_marginEnd="10dp"
         android:src="@drawable/ic_arrow_forward_white_24dp"
-        app:layout_anchor="@id/constraintLayout"
+        app:layout_anchor="@id/constraint_layout"
         app:layout_anchorGravity="bottom|end"
+        app:layout_constraintBottom_toBottomOf="@id/fab_guider"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 

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

@@ -2,8 +2,9 @@
 <androidx.constraintlayout.widget.ConstraintLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    android:layout_height="wrap_content"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/constraint_layout"
     android:padding="16dp">
 
     <androidx.legacy.widget.Space
@@ -202,6 +203,7 @@
         app:layout_constraintTop_toBottomOf="@id/custom_brightness"
         app:layout_constraintStart_toEndOf="@id/txt_brightness_seekbar_icon"
         app:layout_constraintEnd_toStartOf="@id/txt_brightness_seekbar_value"
+        app:layout_constraintBottom_toBottomOf="parent"
         app:max_seek="100"
         app:min_seek="-75" />
 

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

@@ -1,10 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    style="@style/BottomSheetDialogTheme"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
-    android:background="?android:colorBackground"
+    android:clipToPadding="false"
-    android:forceDarkAllowed="false">
+    android:orientation="vertical">
 
     <FrameLayout
         android:layout_width="match_parent"
@@ -33,7 +34,7 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
-        <include layout="@layout/reader_color_filter"/>
+        <include layout="@layout/reader_color_filter" />
 
     </androidx.core.widget.NestedScrollView>
 

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

@@ -2,7 +2,8 @@
 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:background="?android:colorBackground"
+    style="@style/BottomSheetDialogTheme"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">

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

@@ -3,12 +3,16 @@
     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/constraint_layout"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
+    style="@style/BottomSheetDialogTheme"
-    android:background="?android:colorBackground"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
+    android:layout_height="wrap_content"
     android:clipToPadding="false"
     android:orientation="vertical"
-    android:padding="@dimen/material_component_dialogs_padding_around_content_area"
+    android:paddingStart="@dimen/material_component_dialogs_padding_around_content_area"
+    android:paddingEnd="@dimen/material_component_dialogs_padding_around_content_area"
+    android:paddingTop="16dp"
     android:forceDarkAllowed="false">
 
     <!-- General preferences -->
@@ -20,18 +24,22 @@
         android:text="@string/pref_category_general"
         android:textColor="?attr/colorAccent"
         android:textStyle="bold"
+        app:layout_constraintEnd_toStartOf="@id/close_button"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <TextView
+    <ImageView
-        android:id="@+id/pull_up_for_more"
+        android:id="@+id/close_button"
-        android:layout_width="wrap_content"
+        android:layout_width="30dp"
-        android:layout_height="wrap_content"
+        android:layout_height="30dp"
-        android:layout_marginStart="16dp"
+        android:clickable="true"
-        android:text="@string/reader_pull_up_for_more_options"
+        android:focusable="true"
-        android:textColor="?android:attr/textColorHint"
+        android:background="@drawable/round_ripple"
-        app:layout_constraintStart_toEndOf="@id/general_prefs"
+        android:tint="?android:attr/textColorPrimary"
-        app:layout_constraintTop_toTopOf="@id/general_prefs" />
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="@id/general_prefs"
+        app:layout_constraintBottom_toBottomOf="@id/general_prefs"
+        android:src="@drawable/ic_expand_more_white_24dp"/>
 
     <androidx.legacy.widget.Space
         android:id="@+id/spinner_end"
@@ -53,7 +61,7 @@
         android:layout_height="24dp"
         android:layout_marginTop="16dp"
         android:entries="@array/viewers_selector"
-        app:layout_constraintTop_toBottomOf="@id/pull_up_for_more"
+        app:layout_constraintTop_toBottomOf="@id/general_prefs"
         app:layout_constraintStart_toEndOf="@id/verticalcenter"
         app:layout_constraintEnd_toEndOf="@id/spinner_end" />
 
@@ -163,6 +171,7 @@
     <TextView
         android:layout_width="0dp"
         android:layout_height="wrap_content"
+        android:id="@+id/zoom_start_text"
         android:text="@string/pref_image_scale_type"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintEnd_toStartOf="@id/verticalcenter"
@@ -179,6 +188,7 @@
         app:layout_constraintTop_toBottomOf="@id/pager_prefs"/>
 
     <TextView
+        android:id="@+id/scale_type_text"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:text="@string/pref_zoom_start"
@@ -212,7 +222,8 @@
         android:layout_marginTop="0dp"
         android:text="@string/pref_page_transitions"
         android:textColor="?android:attr/textColorSecondary"
-        app:layout_constraintTop_toBottomOf="@id/crop_borders" />
+        app:layout_constraintTop_toBottomOf="@id/crop_borders"
+        app:layout_constraintBottom_toBottomOf="parent"/>
 
     <!-- Webtoon preferences -->
 
@@ -234,7 +245,8 @@
         android:layout_marginTop="16dp"
         android:text="@string/pref_crop_borders"
         android:textColor="?android:attr/textColorSecondary"
-        app:layout_constraintTop_toBottomOf="@id/webtoon_prefs" />
+        app:layout_constraintTop_toBottomOf="@id/webtoon_prefs"
+        app:layout_constraintBottom_toBottomOf="parent" />
 
     <!-- Groups of preferences -->
 
@@ -243,7 +255,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:visibility="gone"
-        app:constraint_referenced_ids="pager_prefs,scale_type_text,scale_type,zoom_start_text,zoom_start,crop_borders,page_transitions"
+        app:constraint_referenced_ids="pager_prefs,scale_type,scale_type_text,zoom_start_text,zoom_start,crop_borders,page_transitions"
         tools:visibility="visible" />
 
     <androidx.constraintlayout.widget.Group

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

@@ -84,7 +84,7 @@
         <item name="android:navigationBarColor">?colorPrimaryDark</item>
     </style>
 
-    <style name="Theme.Base.Reader.Dark" parent="Theme.AppCompat.NoActionBar">
+    <style name="Theme.Base.Reader.Dark" parent="Theme.MaterialComponents.NoActionBar">
         <item name="android:forceDarkAllowed">false</item>
         <item name="colorPrimary">@color/darkPrimaryColor</item>
         <item name="colorPrimaryDark">@color/darkPrimaryColor</item>
@@ -123,7 +123,7 @@
 
     </style>
 
-    <style name="Theme.Base.Reader.Light" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="Theme.Base.Reader.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
         <item name="android:forceDarkAllowed">false</item>
         <item name="colorPrimary">@color/darkPrimaryColor</item>
         <item name="colorPrimaryDark">@color/darkPrimaryColor</item>