Updating some of the sheets to be more modern

app/src/main/java/eu/kanade/tachiyomi/ui/catalogue/browse/CatalogueNavigationView.kt

@@ -23,7 +23,7 @@ class CatalogueNavigationView @JvmOverloads constructor(context: Context, attrs:
     init {
         recycler.adapter = adapter
         recycler.setHasFixedSize(true)
-        val view = inflate(R.layout.catalogue_drawer_content)
+        val view = inflate(R.layout.catalogue_filter_sheet)
         ((view as ViewGroup).getChildAt(1) as ViewGroup).addView(recycler)
         addView(view)
         // title.text = context.getString(R.string.source_search_options)

app/src/main/java/eu/kanade/tachiyomi/ui/catalogue/browse/CatalogueSearchSheet.kt

@@ -16,7 +16,7 @@ import eu.kanade.tachiyomi.data.preference.PreferencesHelper
 import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.util.system.dpToPx
 import eu.kanade.tachiyomi.util.view.setEdgeToEdge
-import kotlinx.android.synthetic.main.catalogue_drawer_content.*
+import kotlinx.android.synthetic.main.catalogue_filter_sheet.*
 import uy.kohesive.injekt.injectLazy
 
 class CatalogueSearchSheet(activity: Activity) :
@@ -43,15 +43,11 @@ class CatalogueSearchSheet(activity: Activity) :
     var onResetClicked = {}
 
     init {
-        val view = activity.layoutInflater.inflate(R.layout.catalogue_drawer_content, null)
+        val view = activity.layoutInflater.inflate(R.layout.catalogue_filter_sheet, null)
         setContentView(view)
         toolbar_title.text = context.getString(R.string.search_filters)
-        dismiss_button.setOnClickListener { dismiss() }
+        search_btn.setOnClickListener { dismiss() }
         reset_btn.setOnClickListener { onResetClicked() }
-        /*view.search_layout.setOnApplyWindowInsetsListener { v, insets ->
-            view.updatePaddingRelative(bottom = insets.systemWindowInsetBottom)
-            insets
-        }*/
 
         recycler.layoutManager = androidx.recyclerview.widget.LinearLayoutManager(context)
         recycler.clipToPadding = false
@@ -66,7 +62,6 @@ class CatalogueSearchSheet(activity: Activity) :
         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 = activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
 
         sheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
             override fun onSlide(bottomSheet: View, progress: Float) {}
@@ -99,11 +94,6 @@ class CatalogueSearchSheet(activity: Activity) :
         })
     }
 
-    override fun onStart() {
-        super.onStart()
-        sheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
-    }
-
     override fun dismiss() {
         super.dismiss()
         if (filterChanged)

app/src/main/java/eu/kanade/tachiyomi/ui/manga/chapter/ChaptersSortBottomSheet.kt

@@ -16,6 +16,7 @@ import eu.kanade.tachiyomi.util.view.setEdgeToEdge
 import eu.kanade.tachiyomi.util.view.visInvisIf
 import eu.kanade.tachiyomi.util.view.visibleIf
 import kotlinx.android.synthetic.main.chapter_sort_bottom_sheet.*
+import kotlin.math.max
 
 class ChaptersSortBottomSheet(controller: MangaDetailsController) : BottomSheetDialog
     (controller.activity!!, R.style.BottomSheetDialogTheme) {
@@ -37,7 +38,12 @@ class ChaptersSortBottomSheet(controller: MangaDetailsController) : BottomSheetD
         sheetBehavior.peekHeight = 415.dpToPx + height
 
         sheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
-            override fun onSlide(bottomSheet: View, progress: Float) { }
+            override fun onSlide(bottomSheet: View, progress: Float) {
+                if (progress.isNaN())
+                    pill.alpha = 0f
+                else
+                    pill.alpha = (1 - max(0f, progress)) * 0.25f
+            }
 
             override fun onStateChanged(p0: View, state: Int) {
                 if (state == BottomSheetBehavior.STATE_EXPANDED) {
@@ -65,6 +71,7 @@ class ChaptersSortBottomSheet(controller: MangaDetailsController) : BottomSheetD
                 settings_scroll_view!!.height < bottom_sheet.height +
                     settings_scroll_view.paddingTop + settings_scroll_view.paddingBottom
             close_button.visibleIf(isScrollable)
+            pill.visibleIf(!isScrollable)
         }
 
         setOnDismissListener {

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

@@ -8,7 +8,6 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.CompoundButton
 import android.widget.Spinner
-import androidx.core.widget.NestedScrollView
 import com.f2prateek.rx.preferences.Preference
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.bottomsheet.BottomSheetDialog
@@ -22,9 +21,11 @@ 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.util.view.visibleIf
 import eu.kanade.tachiyomi.widget.IgnoreFirstSpinnerListener
 import kotlinx.android.synthetic.main.reader_settings_sheet.*
 import uy.kohesive.injekt.injectLazy
+import kotlin.math.max
 
 /**
  * Sheet to show reader and viewer preferences.
@@ -39,18 +40,14 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) :
 
     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)
-        scroll = NestedScrollView(activity)
+        setContentView(view)
-        scroll.addView(view)
-        setContentView(scroll)
 
-        sheetBehavior = BottomSheetBehavior.from(scroll.parent as ViewGroup)
+        sheetBehavior = BottomSheetBehavior.from(view.parent as ViewGroup)
         setEdgeToEdge(
-            activity, scroll, if (context.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE)
+            activity, view, if (context.resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE)
                 0 else -1
         )
         window?.navigationBarColor = Color.TRANSPARENT
@@ -58,10 +55,15 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) :
                 .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 = activity.window.decorView.rootWindowInsets.systemWindowInsetBottom
-        sheetBehavior.peekHeight = 200.dpToPx + height
+        sheetBehavior.peekHeight = 500.dpToPx + height
 
         sheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
-            override fun onSlide(bottomSheet: View, progress: Float) {}
+            override fun onSlide(bottomSheet: View, progress: Float) {
+                if (progress.isNaN())
+                    pill.alpha = 0f
+                else
+                    pill.alpha = (1 - max(0f, progress)) * 0.25f
+            }
 
             override fun onStateChanged(p0: View, state: Int) {
                 if (state == BottomSheetBehavior.STATE_EXPANDED) {
@@ -91,12 +93,13 @@ class ReaderSettingsSheet(private val activity: ReaderActivity) :
         close_button.setOnClickListener {
             dismiss()
         }
+        settings_scroll_view.viewTreeObserver.addOnGlobalLayoutListener {
+            val isScrollable =
+                settings_scroll_view.height < constraint_layout.height +
+                    settings_scroll_view.paddingTop + settings_scroll_view.paddingBottom
+            close_button.visibleIf(isScrollable)
+            pill.visibleIf(!isScrollable)
         }
-
-    override fun onStart() {
-        super.onStart()
-        sheetBehavior.skipCollapsed = true
-        sheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
     }
 
     /**

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

@@ -341,9 +341,16 @@ fun Controller.scrollViewWith(
     activity?.appbar?.y = 0f
     val attrsArray = intArrayOf(android.R.attr.actionBarSize)
     val array = recycler.context.obtainStyledAttributes(attrsArray)
-    val appBarHeight = array.getDimensionPixelSize(0, 0)
+    var appBarHeight = if (activity!!.toolbar.height > 0) activity!!.toolbar.height
+        else array.getDimensionPixelSize(0, 0)
     array.recycle()
     swipeRefreshLayout?.setDistanceToTriggerSync(150.dpToPx)
+    activity!!.toolbar.post {
+        if (activity!!.toolbar.height > 0) {
+            appBarHeight = activity!!.toolbar.height
+            recycler.requestApplyInsets()
+        }
+    }
     recycler.doOnApplyWindowInsets { view, insets, _ ->
         val headerHeight = insets.systemWindowInsetTop + appBarHeight
         if (!customPadding) view.updatePaddingRelative(
@@ -467,14 +474,9 @@ fun BottomSheetDialog.setEdgeToEdge(
         activity.window.decorView.rootWindowInsets.systemWindowInsetRight == 0)
         contentView.systemUiVisibility = contentView.systemUiVisibility
             .or(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION)
-    /*contentView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
-        leftMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetLeft
-        rightMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetRight
-    }*/
     if (setTopMargin > 0) (contentView.parent as View).updateLayoutParams<ViewGroup.MarginLayoutParams> {
         height =
             activity.window.decorView.height - activity.window.decorView.rootWindowInsets.systemWindowInsetTop - setTopMargin
-        // activity.window.decorView.rootWindowInsets.systemWindowInsetTop // + setTopMargin
     }
     else if (setTopMargin == 0) contentView.updateLayoutParams<ViewGroup.MarginLayoutParams> {
         topMargin = activity.window.decorView.rootWindowInsets.systemWindowInsetTop

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

@@ -34,6 +34,8 @@
             android:layout_width="wrap_content"
             android:textColor="?attr/tabBarIconColor"
             android:layout_height="match_parent"
+            android:textSize="16sp"
+            android:letterSpacing="0.0"
             android:text="@string/reset"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
@@ -55,15 +57,15 @@
             app:layout_constraintTop_toTopOf="parent"
             tools:text="Title Text" />
 
-        <ImageView
+        <com.google.android.material.button.MaterialButton
-            android:id="@+id/dismiss_button"
+            android:id="@+id/search_btn"
-            style="@style/Theme.Widget.CustomImageButton"
+            style="@style/Theme.Widget.Button.TextButton"
-            android:layout_width="30dp"
+            android:textSize="16sp"
+            android:letterSpacing="0.0"
+            android:layout_width="wrap_content"
+            android:textColor="?attr/tabBarIconColor"
             android:layout_height="match_parent"
-            android:layout_gravity="end"
+            android:text="@string/search"
-            android:layout_marginEnd="12dp"
-            android:src="@drawable/ic_expand_more_white_24dp"
-            android:tint="?attr/actionBarTintColor"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />

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

@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/diplay_bottom_sheet"
+    android:id="@+id/display_bottom_sheet"
     android:layout_width="match_parent"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
     android:layout_height="wrap_content">
 
     <androidx.core.widget.NestedScrollView
@@ -15,7 +16,6 @@
             style="@style/BottomSheetDialogTheme"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:background="@drawable/bg_bottom_sheet_dialog_fragment"
             android:orientation="vertical"
             android:paddingTop="12dp"
             app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
@@ -155,6 +155,17 @@
         </LinearLayout>
     </androidx.core.widget.NestedScrollView>
 
+    <ImageView
+        android:id="@+id/pill"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="5dp"
+        android:alpha="0.25"
+        android:contentDescription="@string/drag_handle"
+        android:src="@drawable/draggable_pill"
+        android:tint="?android:attr/textColorPrimary"
+        android:layout_gravity="center|top"/>
+
     <ImageView
         android:id="@+id/close_button"
         android:layout_width="32dp"

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

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/diplay_bottom_sheet"
+    android:id="@+id/display_bottom_sheet"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
 

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

@@ -29,11 +29,11 @@
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="2dp"
-                android:requiresFadingEdge="horizontal"
-                android:fadingEdgeLength="20dp"
                 android:clipToPadding="false"
+                android:fadingEdgeLength="20dp"
                 android:paddingTop="8dp"
                 android:paddingBottom="6dp"
+                android:requiresFadingEdge="horizontal"
                 android:scrollbars="none">
 
                 <LinearLayout
@@ -41,9 +41,9 @@
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:gravity="center_vertical"
+                    android:orientation="horizontal"
                     android:paddingStart="10dp"
-                    android:paddingEnd="20dp"
+                    android:paddingEnd="20dp">
-                    android:orientation="horizontal">
 
                     <ImageView
                         android:id="@+id/clear_button"
@@ -77,22 +77,21 @@
 
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/view_options"
+                    style="@style/Theme.Widget.Button.TextButton"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    style="@style/Theme.Widget.Button.TextButton"
                     android:text="@string/display_options"
                     android:textColor="?android:attr/textColorPrimary"
                     app:icon="@drawable/ic_tune_white_24dp"
-                    app:iconTint="?android:attr/textColorPrimary"
+                    app:iconTint="?android:attr/textColorPrimary" />
-                    />
 
                 <com.google.android.material.checkbox.MaterialCheckBox
                     android:id="@+id/hide_filters"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                    android:visibility="gone"
                     android:layout_marginEnd="20dp"
-                    android:text="@string/start_with_filters_hidden" />
+                    android:text="@string/start_with_filters_hidden"
+                    android:visibility="gone" />
             </LinearLayout>
         </LinearLayout>
 

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

@@ -1,19 +1,29 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    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:id="@+id/bottom_sheet"
     android:layout_width="match_parent"
-    style="@style/BottomSheetDialogTheme"
-    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
     android:layout_height="wrap_content"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
+    android:forceDarkAllowed="false">
+
+    <androidx.core.widget.NestedScrollView
+        android:id="@+id/settings_scroll_view"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/constraint_layout"
+            style="@style/BottomSheetDialogTheme"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@android:color/transparent"
             android:clipToPadding="false"
             android:orientation="vertical"
             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">
+            android:paddingEnd="@dimen/material_component_dialogs_padding_around_content_area">
 
             <!-- General preferences -->
 
@@ -24,23 +34,9 @@
                 android:text="@string/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" />
 
-    <ImageView
-        android:id="@+id/close_button"
-        android:layout_width="30dp"
-        android:layout_height="30dp"
-        android:clickable="true"
-        android:focusable="true"
-        android:background="@drawable/round_ripple"
-        android:tint="?android:attr/textColorPrimary"
-        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"
                 android:layout_width="16dp"
@@ -51,9 +47,9 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:text="@string/viewer_for_this_series"
-        app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBaseline_toBaselineOf="@id/viewer"
                 app:layout_constraintEnd_toStartOf="@id/bottom_line"
-        app:layout_constraintBaseline_toBaselineOf="@id/viewer" />
+                app:layout_constraintStart_toStartOf="parent" />
 
             <androidx.appcompat.widget.AppCompatSpinner
                 android:id="@+id/viewer"
@@ -61,18 +57,18 @@
                 android:layout_height="24dp"
                 android:layout_marginTop="16dp"
                 android:entries="@array/viewers_selector"
-        app:layout_constraintTop_toBottomOf="@id/general_prefs"
+                app:layout_constraintEnd_toEndOf="@id/spinner_end"
                 app:layout_constraintStart_toEndOf="@id/bottom_line"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
+                app:layout_constraintTop_toBottomOf="@id/general_prefs" />
 
             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
                 android:text="@string/rotation"
-        app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBaseline_toBaselineOf="@id/rotation_mode"
                 app:layout_constraintEnd_toStartOf="@id/bottom_line"
-        app:layout_constraintBaseline_toBaselineOf="@id/rotation_mode" />
+                app:layout_constraintStart_toStartOf="parent" />
 
             <androidx.appcompat.widget.AppCompatSpinner
                 android:id="@+id/rotation_mode"
@@ -80,17 +76,17 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
                 android:entries="@array/rotation_type"
-        app:layout_constraintTop_toBottomOf="@id/viewer"
+                app:layout_constraintEnd_toEndOf="@id/spinner_end"
                 app:layout_constraintStart_toEndOf="@id/bottom_line"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
+                app:layout_constraintTop_toBottomOf="@id/viewer" />
 
             <TextView
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:text="@string/background_color"
-        app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBaseline_toBaselineOf="@id/background_color"
                 app:layout_constraintEnd_toStartOf="@id/background_color"
-        app:layout_constraintBaseline_toBaselineOf="@id/background_color"/>
+                app:layout_constraintStart_toStartOf="parent" />
 
             <androidx.appcompat.widget.AppCompatSpinner
                 android:id="@+id/background_color"
@@ -98,9 +94,9 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
                 android:entries="@array/reader_themes"
-        app:layout_constraintTop_toBottomOf="@id/rotation_mode"
+                app:layout_constraintEnd_toEndOf="@id/spinner_end"
                 app:layout_constraintStart_toEndOf="@id/bottom_line"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
+                app:layout_constraintTop_toBottomOf="@id/rotation_mode" />
 
             <androidx.appcompat.widget.SwitchCompat
                 android:id="@+id/show_page_number"
@@ -119,8 +115,8 @@
                 android:text="@string/true_32bit_color"
                 android:textColor="?android:attr/textColorSecondary"
                 android:visibility="gone"
-        tools:visibility="visible"
+                app:layout_constraintTop_toBottomOf="@id/show_page_number"
-        app:layout_constraintTop_toBottomOf="@id/show_page_number" />
+                tools:visibility="visible" />
 
             <androidx.appcompat.widget.SwitchCompat
                 android:id="@+id/fullscreen"
@@ -168,13 +164,13 @@
                 app:layout_constraintTop_toBottomOf="@id/end_general_preferences" />
 
             <TextView
+                android:id="@+id/zoom_start_text"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-        android:id="@+id/zoom_start_text"
                 android:text="@string/scale_type"
-        app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBaseline_toBaselineOf="@id/scale_type"
                 app:layout_constraintEnd_toStartOf="@id/bottom_line"
-        app:layout_constraintBaseline_toBaselineOf="@id/scale_type"/>
+                app:layout_constraintStart_toStartOf="parent" />
 
             <androidx.appcompat.widget.AppCompatSpinner
                 android:id="@+id/scale_type"
@@ -182,28 +178,28 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="16dp"
                 android:entries="@array/image_scale_type"
-        app:layout_constraintStart_toEndOf="@id/bottom_line"
                 app:layout_constraintEnd_toEndOf="@id/spinner_end"
-        app:layout_constraintTop_toBottomOf="@id/pager_prefs"/>
+                app:layout_constraintStart_toEndOf="@id/bottom_line"
+                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/zoom_start_position"
-        app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintBaseline_toBaselineOf="@id/zoom_start"
                 app:layout_constraintEnd_toStartOf="@id/bottom_line"
-        app:layout_constraintBaseline_toBaselineOf="@id/zoom_start"/>
+                app:layout_constraintStart_toStartOf="parent" />
 
             <androidx.appcompat.widget.AppCompatSpinner
                 android:id="@+id/zoom_start"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
-        android:entries="@array/zoom_start"
                 android:layout_marginTop="16dp"
-        app:layout_constraintTop_toBottomOf="@id/scale_type"
+                android:entries="@array/zoom_start"
+                app:layout_constraintEnd_toEndOf="@id/spinner_end"
                 app:layout_constraintStart_toEndOf="@id/bottom_line"
-        app:layout_constraintEnd_toEndOf="@id/spinner_end" />
+                app:layout_constraintTop_toBottomOf="@id/scale_type" />
 
             <androidx.appcompat.widget.SwitchCompat
                 android:id="@+id/crop_borders"
@@ -221,8 +217,8 @@
                 android:layout_marginTop="0dp"
                 android:text="@string/page_transitions"
                 android:textColor="?android:attr/textColorSecondary"
-        app:layout_constraintTop_toBottomOf="@id/crop_borders"
+                app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"/>
+                app:layout_constraintTop_toBottomOf="@id/crop_borders" />
 
             <!-- Webtoon preferences -->
 
@@ -244,8 +240,8 @@
                 android:layout_marginTop="16dp"
                 android:text="@string/crop_borders"
                 android:textColor="?android:attr/textColorSecondary"
-        app:layout_constraintTop_toBottomOf="@id/webtoon_prefs"
+                app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent" />
+                app:layout_constraintTop_toBottomOf="@id/webtoon_prefs" />
 
             <!-- Groups of preferences -->
 
@@ -271,4 +267,31 @@
                 android:orientation="vertical"
                 app:layout_constraintGuide_percent="0.5" />
 
-</androidx.constraintlayout.widget.ConstraintLayout>
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.core.widget.NestedScrollView>
+
+    <ImageView
+        android:id="@+id/pill"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center|top"
+        android:layout_marginTop="5dp"
+        android:alpha="0.25"
+        android:contentDescription="@string/drag_handle"
+        android:src="@drawable/draggable_pill"
+        android:tint="?android:attr/textColorPrimary" />
+
+    <ImageView
+        android:id="@+id/close_button"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_gravity="end"
+        android:layout_marginTop="12dp"
+        android:layout_marginEnd="12dp"
+        android:background="@drawable/round_ripple"
+        android:clickable="true"
+        android:contentDescription="@string/close"
+        android:focusable="true"
+        android:src="@drawable/ic_close_white_24dp"
+        android:tint="@color/gray_button" />
+</FrameLayout>