Near final fixes to filter bottom sheet

Fixed title sometimes still showing when expanded
Popup menu show sorting option

app/src/main/java/eu/kanade/tachiyomi/data/database/models/Category.kt

@@ -2,6 +2,7 @@ package eu.kanade.tachiyomi.data.database.models
 
 import android.content.Context
 import eu.kanade.tachiyomi.R
+import eu.kanade.tachiyomi.ui.library.LibrarySort
 import java.io.Serializable
 
 interface Category : Serializable {
@@ -25,16 +26,31 @@ interface Category : Serializable {
        return ((mangaSort?.minus('a') ?: 0) % 2) != 1
     }
 
-    companion object {
+    fun sortingMode(): Int? = when (mangaSort) {
-        const val ALPHA_ASC = 'a'
+        ALPHA_ASC, ALPHA_DSC -> LibrarySort.ALPHA
-        const val ALPHA_DSC = 'b'
+        UPDATED_ASC, UPDATED_DSC -> LibrarySort.LAST_UPDATED
-        const val UPDATED_ASC = 'c'
+        UNREAD_ASC, UNREAD_DSC -> LibrarySort.UNREAD
-        const val UPDATED_DSC = 'd'
+        LAST_READ_ASC, LAST_READ_DSC -> LibrarySort.LAST_READ
-        const val UNREAD_ASC = 'e'
+        else -> null
-        const val UNREAD_DSC = 'f'
+    }
-        const val LAST_READ_ASC = 'g'
-        const val LAST_READ_DSC = 'h'
 
+    fun catSortingMode(): Int? = when (mangaSort) {
+        ALPHA_ASC, ALPHA_DSC -> 0
+        UPDATED_ASC, UPDATED_DSC -> 1
+        UNREAD_ASC, UNREAD_DSC -> 2
+        LAST_READ_ASC, LAST_READ_DSC -> 3
+        else -> null
+    }
+
+    companion object {
+        private const val ALPHA_ASC = 'a'
+        private const val ALPHA_DSC = 'b'
+        private const val UPDATED_ASC = 'c'
+        private const val UPDATED_DSC = 'd'
+        private const val UNREAD_ASC = 'e'
+        private const val UNREAD_DSC = 'f'
+        private const val LAST_READ_ASC = 'g'
+        private const val LAST_READ_DSC = 'h'
 
         fun create(name: String): Category = CategoryImpl().apply {
             this.name = name

app/src/main/java/eu/kanade/tachiyomi/ui/library/LibraryPresenter.kt

@@ -4,14 +4,6 @@ import android.os.Bundle
 import eu.kanade.tachiyomi.data.cache.CoverCache
 import eu.kanade.tachiyomi.data.database.DatabaseHelper
 import eu.kanade.tachiyomi.data.database.models.Category
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.ALPHA_ASC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.ALPHA_DSC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.LAST_READ_ASC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.LAST_READ_DSC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.UNREAD_ASC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.UNREAD_DSC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.UPDATED_ASC
-import eu.kanade.tachiyomi.data.database.models.Category.Companion.UPDATED_DSC
 import eu.kanade.tachiyomi.data.database.models.LibraryManga
 import eu.kanade.tachiyomi.data.database.models.Manga
 import eu.kanade.tachiyomi.data.database.models.MangaCategory
@@ -246,16 +238,16 @@ class LibraryPresenter(
         val sortFn: (LibraryItem, LibraryItem) -> Int = { i1, i2 ->
             val compare = when {
                 category.mangaSort != null -> {
-                    var sort = when (category.mangaSort) {
+                    var sort = when (category.sortingMode()) {
-                        ALPHA_ASC, ALPHA_DSC -> sortAlphabetical(i1, i2)
+                        LibrarySort.ALPHA -> sortAlphabetical(i1, i2)
-                        UPDATED_ASC, UPDATED_DSC -> i2.manga.last_update.compareTo(i1.manga.last_update)
+                        LibrarySort.LAST_UPDATED -> i2.manga.last_update.compareTo(i1.manga.last_update)
-                        UNREAD_ASC, UNREAD_DSC -> when {
+                        LibrarySort.UNREAD -> when {
                             i1.manga.unread == i2.manga.unread -> 0
                             i1.manga.unread == 0 -> if (category.isAscending()) 1 else -1
                             i2.manga.unread == 0 -> if (category.isAscending()) -1 else 1
                             else -> i1.manga.unread.compareTo(i2.manga.unread)
                         }
-                        LAST_READ_ASC, LAST_READ_DSC -> {
+                        LibrarySort.LAST_READ -> {
                             val manga1LastRead = lastReadManga[i1.manga.id!!] ?: lastReadManga.size
                             val manga2LastRead = lastReadManga[i2.manga.id!!] ?: lastReadManga.size
                             manga1LastRead.compareTo(manga2LastRead)
@@ -336,20 +328,16 @@ class LibraryPresenter(
                         val category = catListing.find { it.id == i1.manga.category }
                         when {
                             category?.mangaSort != null -> {
-                                var sort = when (category.mangaSort) {
+                                var sort = when (category.sortingMode()) {
-                                    ALPHA_ASC, ALPHA_DSC -> sortAlphabetical(i1, i2)
+                                    LibrarySort.ALPHA -> sortAlphabetical(i1, i2)
-                                    UPDATED_ASC, UPDATED_DSC ->
+                                    LibrarySort.LAST_UPDATED -> i2.manga.last_update.compareTo(i1.manga.last_update)
-                                        i2.manga.last_update.compareTo(i1.manga.last_update)
+                                    LibrarySort.UNREAD -> when {
-                                    UNREAD_ASC, UNREAD_DSC ->
-                                        when {
                                         i1.manga.unread == i2.manga.unread -> 0
-                                            i1.manga.unread == 0 ->
+                                        i1.manga.unread == 0 -> if (category.isAscending()) 1 else -1
-                                                if (category.isAscending()) 1 else -1
+                                        i2.manga.unread == 0 -> if (category.isAscending()) -1 else 1
-                                            i2.manga.unread == 0 ->
-                                                if (category.isAscending()) -1 else 1
                                         else -> i1.manga.unread.compareTo(i2.manga.unread)
                                     }
-                                    LAST_READ_ASC, LAST_READ_DSC -> {
+                                    LibrarySort.LAST_READ -> {
                                         val manga1LastRead = lastReadManga[i1.manga.id!!] ?: lastReadManga.size
                                         val manga2LastRead = lastReadManga[i2.manga.id!!] ?: lastReadManga.size
                                         manga1LastRead.compareTo(manga2LastRead)

app/src/main/java/eu/kanade/tachiyomi/ui/library/filter/FilterBottomSheet.kt

@@ -4,13 +4,13 @@ import android.content.Context
 import android.content.res.Configuration
 import android.graphics.drawable.Drawable
 import android.util.AttributeSet
-import android.view.MenuItem
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.RadioButton
 import android.widget.RadioGroup
+import androidx.appcompat.view.menu.MenuBuilder
 import androidx.appcompat.widget.PopupMenu
 import androidx.core.content.ContextCompat
 import com.f2prateek.rx.preferences.Preference
@@ -86,14 +86,13 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
     var pager:View? = null
 
     fun onCreate(pagerView:View) {
-        if (context.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE
+        if (isLandscape() || isTablet()) {
-            || isTablet()) {
             sideLayout.orientation = HORIZONTAL
             sortingLayout.updateLayoutParams<MarginLayoutParams> {
                 bottomMargin = 0
                 topMargin = 0
             }
-            sortScrollView.updatePadding(
+            sortScrollView?.updatePadding(
                 bottom = 10.dpToPx,
                 top = 0
             )
@@ -117,14 +116,16 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
         val coordLayout:View = (pagerView.parent as ViewGroup).findViewById(R.id.snackbar_layout)
         sheetBehavior?.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
             override fun onSlide(bottomSheet: View, progress: Float) {
-                updateRootPadding(progress)
                 topbar.alpha = 1 - progress
                 shadow2.alpha = (1 - progress) * 0.25f
+                updateRootPadding(progress)
             }
 
             override fun onStateChanged(p0: View, state: Int) {
                 if (state == BottomSheetBehavior.STATE_COLLAPSED) reSortViews()
                 else setMainSortText()
+                if (state == BottomSheetBehavior.STATE_EXPANDED)
+                    topbar.alpha = 0f
                 topbar.isClickable = state == BottomSheetBehavior.STATE_COLLAPSED
                 topbar.isFocusable = state == BottomSheetBehavior.STATE_COLLAPSED
             }
@@ -167,6 +168,10 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
         displayGroup.bindToPreference(preferences.libraryAsList())
     }
 
+    private fun isLandscape(): Boolean {
+        return context.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE
+    }
+
     private fun isTablet(): Boolean {
         return (context.resources.configuration.screenLayout and Configuration
             .SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE
@@ -345,17 +350,41 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
         // Set a listener so we are notified if a menu item is clicked
         popup.setOnMenuItemClickListener { menuItem ->
-            onMainSortClicked(menuItem)
+            onMainSortClicked(menuItem.itemId)
             true
         }
-        popup.menu.findItem(R.id.action_reverse).isVisible =
+
-            preferences.librarySortingMode().getOrDefault() != LibrarySort.DRAG_AND_DROP
+        if (popup.menu is MenuBuilder) {
+            val m = popup.menu as MenuBuilder
+            m.setOptionalIconsVisible(true)
+        }
+
+        val sortingMode = preferences.librarySortingMode().getOrDefault()
+        val currentItem = popup.menu.findItem(
+            when (sortingMode) {
+                LibrarySort.DRAG_AND_DROP -> R.id.action_drag_and_drop
+                LibrarySort.TOTAL -> R.id.action_total_chaps
+                LibrarySort.LAST_READ -> R.id.action_last_read
+                LibrarySort.UNREAD -> R.id.action_unread
+                LibrarySort.LAST_UPDATED -> R.id.action_update
+                else -> R.id.action_alpha
+            }
+        )
+        currentItem.icon = tintVector(
+            when {
+                sortingMode == LibrarySort.DRAG_AND_DROP -> R.drawable.ic_check_white_24dp
+                !preferences.librarySortingAscending().getOrDefault() ->
+                    R.drawable.ic_arrow_down_white_24dp
+                else -> R.drawable.ic_arrow_up_white_24dp
+            }, android.R.attr.colorAccent
+        )
 
         // Finally show the PopupMenu
         popup.show()
     }
 
     private fun showCatSortOptions() {
+        val category = lastCategory ?: return
         // Create a PopupMenu, giving it the clicked view for an anchor
         val popup = PopupMenu(context, catSortTextView)
 
@@ -364,23 +393,45 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
         // Set a listener so we are notified if a menu item is clicked
         popup.setOnMenuItemClickListener { menuItem ->
-            onCatSortClicked(menuItem)
+            onCatSortClicked(menuItem.itemId)
             true
         }
-        popup.menu.findItem(R.id.action_reverse).isVisible = lastCategory?.mangaSort != null
+
+        val sortingMode = category.sortingMode()
+        val currentItem = if (sortingMode == null) null
+        else popup.menu.findItem(
+            when (sortingMode) {
+                LibrarySort.DRAG_AND_DROP -> R.id.action_drag_and_drop
+                LibrarySort.TOTAL -> R.id.action_total_chaps
+                LibrarySort.LAST_READ -> R.id.action_last_read
+                LibrarySort.UNREAD -> R.id.action_unread
+                LibrarySort.LAST_UPDATED -> R.id.action_update
+                else -> R.id.action_alpha
+            }
+        )
+
+        if (sortingMode != null && popup.menu is MenuBuilder) {
+            val m = popup.menu as MenuBuilder
+            m.setOptionalIconsVisible(true)
+        }
+
+        currentItem?.icon = tintVector(
+            if (category.isAscending()) R.drawable.ic_arrow_up_white_24dp
+            else R.drawable.ic_arrow_down_white_24dp,
+            android.R.attr.colorAccent
+        )
 
         // Finally show the PopupMenu
         popup.show()
     }
 
-    private fun onMainSortClicked(menu: MenuItem) {
+    private fun onMainSortClicked(menuId: Int) {
-        if (menu.itemId == R.id.action_reverse) {
+        if (menuId == R.id.action_reverse) {
             preferences.librarySortingAscending().set(
                 !preferences.librarySortingAscending().getOrDefault())
         }
         else {
-            preferences.librarySortingMode().set(
+            val sort = when (menuId) {
-                when (menu.itemId) {
                     R.id.action_update -> LibrarySort.LAST_UPDATED
                     R.id.action_unread -> LibrarySort.UNREAD
                     R.id.action_total_chaps -> LibrarySort.TOTAL
@@ -388,27 +439,36 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                     R.id.action_drag_and_drop -> LibrarySort.DRAG_AND_DROP
                     else -> LibrarySort.ALPHA
                 }
-            )
+            if (sort == preferences.librarySortingMode().getOrDefault()) {
+                if (sort != LibrarySort.DRAG_AND_DROP)
+                    onMainSortClicked(R.id.action_reverse)
+                return
+            }
+            preferences.librarySortingMode().set(sort)
             preferences.librarySortingAscending().set(true)
         }
         setMainSortText()
         onGroupClicked(ACTION_SORT)
     }
 
-    private fun onCatSortClicked(menu: MenuItem) {
+    private fun onCatSortClicked(menuId: Int) {
         val category = lastCategory ?: return
-        val modType = if (menu.itemId == R.id.action_reverse) {
+        val modType = if (menuId == R.id.action_reverse) {
             val t = (category.mangaSort?.minus('a') ?: 0) + 1
                 if (t % 2 != 0) t + 1
                 else t - 1
         }
         else {
-            val order = when (menu.itemId) {
+            val order = when (menuId) {
                 R.id.action_last_read -> 3
                 R.id.action_unread -> 2
                 R.id.action_update -> 1
                 else -> 0
             }
+            if (order == category.catSortingMode()) {
+                onCatSortClicked(R.id.action_reverse)
+                return
+            }
             (2 * order + 1)
         }
         launchUI {
@@ -430,49 +490,35 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
     }
 
     private fun setMainSortText() {
-        //if (sheetBehavior?.state == BottomSheetBehavior.STATE_COLLAPSED) return
         launchUI {
             val sortId = withContext(Dispatchers.IO) { sorting(true) }
-            val drawable = withContext(Dispatchers.IO) {
+            val drawableL = withContext(Dispatchers.IO) {
                  tintVector(
                      when {
                          sortId == LibrarySort.DRAG_AND_DROP -> R.drawable.ic_sort_white_24dp
-                        preferences.librarySortingAscending().getOrDefault() -> R.drawable
+                         preferences.librarySortingAscending().getOrDefault() -> R.drawable.ic_arrow_up_white_24dp
-                            .ic_arrow_up_white_24dp
                          else -> R.drawable.ic_arrow_down_white_24dp
+                     }, android.R.attr.colorAccent
+                )
             }
+            mainSortTextView.text = withContext(Dispatchers.IO) {
+                context.getString(
+                    if (sortId == LibrarySort.DRAG_AND_DROP) R.string.sort_library_by_
+                    else R.string.sort_by_, context.getString(
+                        when (sortId) {
+                            LibrarySort.LAST_UPDATED -> R.string.action_sort_last_updated
+                            LibrarySort.DRAG_AND_DROP -> R.string.action_sort_drag_and_drop
+                            LibrarySort.TOTAL -> R.string.action_sort_total
+                            LibrarySort.UNREAD -> R.string.action_filter_unread
+                            LibrarySort.LAST_READ -> R.string.action_sort_last_read
+                            else -> R.string.title
+                        }
+                    )
                 )
             }
             mainSortTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(
-                null, null, drawable, null
+                drawableL, null, null, null
             )
-            mainSortTextView.text = withContext(Dispatchers.IO) {
-                if (sortId == LibrarySort.DRAG_AND_DROP)
-                    context.getString(
-                        when (sortId) {
-                            LibrarySort.LAST_UPDATED -> R.string.action_sort_last_updated
-                            LibrarySort.DRAG_AND_DROP -> R.string.action_sort_drag_and_drop
-                            LibrarySort.TOTAL -> R.string.action_sort_total
-                            LibrarySort.UNREAD -> R.string.action_filter_unread
-                            LibrarySort.LAST_READ -> R.string.action_sort_last_read
-                            else -> R.string.title
-                        }
-                    )
-                else {
-                    context.getString(
-                        R.string.sort_by_, context.getString(
-                            when (sortId) {
-                                LibrarySort.LAST_UPDATED -> R.string.action_sort_last_updated
-                                LibrarySort.DRAG_AND_DROP -> R.string.action_sort_drag_and_drop
-                                LibrarySort.TOTAL -> R.string.action_sort_total
-                                LibrarySort.UNREAD -> R.string.action_filter_unread
-                                LibrarySort.LAST_READ -> R.string.action_sort_last_read
-                                else -> R.string.title
-                            }
-                        )
-                    )
-                }
-            }
             setCatSortText()
         }
     }
@@ -482,22 +528,18 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
             if (preferences.librarySortingMode().getOrDefault() == LibrarySort.DRAG_AND_DROP &&
                 !preferences.hideCategories().getOrDefault() && lastCategory != null) {
                 val sortId = withContext(Dispatchers.IO) { sorting() }
-                val drawable = withContext(Dispatchers.IO) {
+                val drawableL = withContext(Dispatchers.IO) {
                     tintVector(
-                        R.drawable.ic_label_outline_white_24dp
+                        when {
-                        /*when {
+                            sortId == LibrarySort.DRAG_AND_DROP -> R.drawable.ic_label_outline_white_24dp
-                            sortId == LibrarySort.DRAG_AND_DROP -> R.drawable.ic_sort_white_24dp
+                            lastCategory?.isAscending() == true -> R.drawable.ic_arrow_up_white_24dp
-                            lastCategory?.isAscending() == true -> R.drawable
-                                .ic_arrow_up_white_24dp
                             else -> R.drawable.ic_arrow_down_white_24dp
-                        }*/
+                        }, android.R.attr.colorAccent
                     )
                 }
-                catSortTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(
-                    null, null, drawable, null
-                )
                 catSortTextView.text = withContext(Dispatchers.IO) {
                    context.getString(
+                        R.string.sort_category_by_, context.getString(
                             when (sortId) {
                                 LibrarySort.LAST_UPDATED -> R.string.action_sort_last_updated
                                 LibrarySort.DRAG_AND_DROP -> R.string.action_sort_drag_and_drop
@@ -507,7 +549,11 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                                 else -> R.string.title
                             }
                         )
+                    )
                 }
+                catSortTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(
+                    drawableL, null, null, null
+                )
                 if (catSortTextView.visibility != View.VISIBLE) catSortTextView.visible()
             } else if (catSortTextView.visibility == View.VISIBLE) catSortTextView.gone()
         }
@@ -527,9 +573,9 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
     private fun Boolean.toInt() = if (this) 1 else 0
 
-    private fun tintVector(resId: Int): Drawable? {
+    private fun tintVector(resId: Int, attrId: Int? = null): Drawable? {
         return ContextCompat.getDrawable(context, resId)?.mutate()?.apply {
-            setTint(context.getResourceColor(R.attr.actionBarTintColor))
+            setTint(context.getResourceColor(attrId ?: android.R.attr.textColorPrimary))
         }
     }
 

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

@@ -0,0 +1,10 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <size
+        android:width="24dp"
+        android:height="24dp" />
+
+    <solid android:color="@android:color/transparent" />
+
+</shape>

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

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#FFFFFF"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
+</vector>

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

@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="utf-8"?>
+<eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/bottom_sheet"
+    style="@style/BottomSheetDialogTheme"
+    android:layout_width="match_parent"
+    app:behavior_peekHeight="0dp"
+    android:layout_height="wrap_content"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
+    android:orientation="vertical"
+    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:orientation="vertical">
+
+            <HorizontalScrollView
+                android:id="@+id/filterScrollView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="6dp"
+                android:clipToPadding="false"
+                android:paddingStart="20dp"
+                android:paddingTop="10dp"
+                android:paddingEnd="20dp"
+                android:scrollbars="none">
+
+                <LinearLayout
+                    android:id="@+id/filterLayout"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:id="@+id/pendingClearButton"
+                        android:layout_width="32dp"
+                        android:layout_height="32dp"
+                        android:layout_marginStart="10dp"
+                        android:layout_marginEnd="10dp"
+                        android:background="@drawable/round_clear_border"
+                        android:clickable="true"
+                        android:contentDescription="@string/action_clear"
+                        android:focusable="true"
+                        android:padding="3dp"
+                        android:src="@drawable/ic_close_white_24dp"
+                        android:tint="@color/gray_button" />
+
+                </LinearLayout>
+            </HorizontalScrollView>
+
+            <HorizontalScrollView
+                android:id="@+id/sortScrollView"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="6dp"
+                android:clipToPadding="false"
+                android:paddingStart="23dp"
+                android:paddingEnd="20dp"
+                android:scrollbars="none">
+
+                <LinearLayout
+                    android:id="@+id/sideLayout"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:baselineAligned="true"
+                    android:gravity="center|start"
+                    android:orientation="horizontal">
+
+                    <LinearLayout
+                        android:id="@+id/sortingLayout"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="10dp"
+                        android:layout_marginBottom="10dp"
+                        android:baselineAligned="false"
+                        android:gravity="center|start"
+                        android:orientation="horizontal">
+
+                        <TextView
+                            android:id="@+id/mainSortTextView"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="20dp"
+                            android:clickable="true"
+                            android:drawablePadding="6dp"
+                            android:background="@drawable/square_ripple"
+                            android:focusable="true"
+                            android:gravity="center"
+                            android:padding="5dp"
+                            android:text="srgdg"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+                        <TextView
+                            android:id="@+id/catSortTextView"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:background="@drawable/square_ripple"
+                            android:layout_marginEnd="20dp"
+                            android:padding="5dp"
+                            android:clickable="true"
+                            android:drawablePadding="6dp"
+                            android:focusable="true"
+                            android:gravity="center"
+                            android:text="srgdg"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+                    </LinearLayout>
+
+                    <LinearLayout
+                        android:id="@+id/displayLayout"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="7dp"
+                        android:layout_marginEnd="14dp"
+                        android:baselineAligned="false"
+                        android:gravity="center|start"
+                        android:orientation="horizontal">
+
+                        <TextView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="14dp"
+                            android:clickable="true"
+                            android:focusable="true"
+                            android:text="@string/display_as"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+
+                        <RadioGroup
+                            android:id="@+id/displayGroup"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:orientation="horizontal">
+
+                            <RadioButton
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:paddingStart="0dp"
+                                android:paddingEnd="8dp"
+                                android:text="@string/action_display_grid" />
+
+                            <RadioButton
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:layout_marginStart="24dp"
+                                android:text="@string/action_display_list" />
+                        </RadioGroup>
+                    </LinearLayout>
+
+                    <CheckBox
+                        android:id="@+id/downloadCheckbox"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/action_display_download_badge"/>
+                </LinearLayout>
+            </HorizontalScrollView>
+        </LinearLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/topbar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@drawable/bg_bottom_sheet_primary"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+
+            <ImageView
+                android:id="@+id/imageView2"
+                android:layout_width="wrap_content"
+                android:layout_height="0dp"
+                android:layout_marginStart="24dp"
+                android:src="@drawable/ic_sort_white_24dp"
+                app:layout_constraintBottom_toBottomOf="@+id/sortText"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@+id/sortText" />
+
+            <TextView
+                android:id="@+id/sortText"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="15dp"
+                android:layout_marginEnd="8dp"
+                android:layout_marginBottom="15dp"
+                android:textAlignment="textStart"
+                android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
+                android:textColor="?attr/actionBarTintColor"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@+id/imageView2"
+                app:layout_constraintTop_toTopOf="parent" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet>

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

@@ -0,0 +1,215 @@
+<?xml version="1.0" encoding="utf-8"?>
+<eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/bottom_sheet"
+    style="@style/BottomSheetDialogTheme"
+    android:layout_width="match_parent"
+    app:behavior_peekHeight="0dp"
+    android:layout_height="wrap_content"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
+    android:orientation="vertical"
+    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            android:orientation="vertical">
+
+            <HorizontalScrollView
+                android:id="@+id/filterScrollView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="6dp"
+                android:clipToPadding="false"
+                android:paddingStart="20dp"
+                android:paddingTop="10dp"
+                android:paddingEnd="20dp"
+                android:scrollbars="none">
+
+                <LinearLayout
+                    android:id="@+id/filterLayout"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:gravity="center_vertical"
+                    android:orientation="horizontal">
+
+                    <ImageView
+                        android:id="@+id/pendingClearButton"
+                        android:layout_width="32dp"
+                        android:layout_height="32dp"
+                        android:layout_marginStart="10dp"
+                        android:layout_marginEnd="10dp"
+                        android:background="@drawable/round_clear_border"
+                        android:clickable="true"
+                        android:contentDescription="@string/action_clear"
+                        android:focusable="true"
+                        android:padding="3dp"
+                        android:src="@drawable/ic_close_white_24dp"
+                        android:tint="@color/gray_button" />
+
+                </LinearLayout>
+            </HorizontalScrollView>
+
+            <HorizontalScrollView
+                android:id="@+id/sortScrollView"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="6dp"
+                android:clipToPadding="false"
+                android:paddingStart="23dp"
+                android:paddingEnd="20dp"
+                android:scrollbars="none">
+
+                <LinearLayout
+                    android:id="@+id/sideLayout"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:baselineAligned="true"
+                    android:gravity="center|start"
+                    android:orientation="horizontal">
+
+                    <LinearLayout
+                        android:id="@+id/sortingLayout"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginTop="10dp"
+                        android:layout_marginBottom="10dp"
+                        android:baselineAligned="false"
+                        android:gravity="center|start"
+                        android:orientation="horizontal">
+
+                        <TextView
+                            android:id="@+id/mainSortTextView"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="20dp"
+                            android:clickable="true"
+                            android:drawablePadding="6dp"
+                            android:background="@drawable/square_ripple"
+                            android:focusable="true"
+                            android:gravity="center"
+                            android:padding="5dp"
+                            android:text="srgdg"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+                        <TextView
+                            android:id="@+id/catSortTextView"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:background="@drawable/square_ripple"
+                            android:layout_marginEnd="20dp"
+                            android:padding="5dp"
+                            android:clickable="true"
+                            android:drawablePadding="6dp"
+                            android:focusable="true"
+                            android:gravity="center"
+                            android:text="srgdg"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+                    </LinearLayout>
+
+                    <LinearLayout
+                        android:id="@+id/displayLayout"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_marginStart="7dp"
+                        android:layout_marginEnd="14dp"
+                        android:baselineAligned="false"
+                        android:gravity="center|start"
+                        android:orientation="horizontal">
+
+                        <TextView
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="14dp"
+                            android:clickable="true"
+                            android:focusable="true"
+                            android:text="@string/display_as"
+                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
+                            android:textColor="?android:attr/textColorPrimary"
+                            android:textSize="15sp"
+                            android:textStyle="normal" />
+
+
+                        <RadioGroup
+                            android:id="@+id/displayGroup"
+                            android:layout_width="wrap_content"
+                            android:layout_height="wrap_content"
+                            android:orientation="horizontal">
+
+                            <RadioButton
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:paddingStart="0dp"
+                                android:paddingEnd="8dp"
+                                android:text="@string/action_display_grid" />
+
+                            <RadioButton
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:layout_marginStart="24dp"
+                                android:text="@string/action_display_list" />
+                        </RadioGroup>
+                    </LinearLayout>
+
+                    <CheckBox
+                        android:id="@+id/downloadCheckbox"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:text="@string/action_display_download_badge"/>
+                </LinearLayout>
+            </HorizontalScrollView>
+        </LinearLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/topbar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:background="@drawable/bg_bottom_sheet_primary"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+
+            <ImageView
+                android:id="@+id/imageView2"
+                android:layout_width="wrap_content"
+                android:layout_height="0dp"
+                android:layout_marginStart="24dp"
+                android:src="@drawable/ic_sort_white_24dp"
+                app:layout_constraintBottom_toBottomOf="@+id/sortText"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="@+id/sortText" />
+
+            <TextView
+                android:id="@+id/sortText"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="8dp"
+                android:layout_marginTop="15dp"
+                android:layout_marginEnd="8dp"
+                android:layout_marginBottom="15dp"
+                android:textAlignment="textStart"
+                android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
+                android:textColor="?attr/actionBarTintColor"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toEndOf="@+id/imageView2"
+                app:layout_constraintTop_toTopOf="parent" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet>

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

@@ -7,8 +7,6 @@
     app:behavior_peekHeight="0dp"
     android:layout_height="wrap_content"
     android:background="@drawable/bg_bottom_sheet_dialog_fragment"
-    android:clickable="true"
-    android:focusable="true"
     android:orientation="vertical"
     app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 
@@ -60,20 +58,13 @@
                     </LinearLayout>
                 </HorizontalScrollView>
 
-                <HorizontalScrollView
-                    android:id="@+id/sortScrollView"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_marginTop="6dp"
-                    android:clipToPadding="false"
-                    android:paddingStart="23dp"
-                    android:paddingEnd="20dp"
-                    android:scrollbars="none">
-
                     <LinearLayout
                         android:id="@+id/sideLayout"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
+                        android:layout_marginTop="6dp"
+                        android:paddingStart="23dp"
+                        android:paddingEnd="20dp"
                         android:baselineAligned="true"
                         android:gravity="center|start"
                         android:orientation="vertical">
@@ -90,14 +81,15 @@
 
                             <TextView
                                 android:id="@+id/mainSortTextView"
-                                android:layout_width="wrap_content"
+                                android:layout_width="0dp"
                                 android:layout_height="wrap_content"
-                                android:layout_marginEnd="20dp"
+                                android:layout_marginEnd="10dp"
                                 android:clickable="true"
                                 android:drawablePadding="6dp"
                                 android:background="@drawable/square_ripple"
+                                android:layout_weight="1"
                                 android:focusable="true"
-                                android:gravity="center"
+                                android:gravity="start|center"
                                 android:padding="5dp"
                                 android:text="srgdg"
                                 android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
@@ -107,15 +99,17 @@
 
                             <TextView
                                 android:id="@+id/catSortTextView"
-                                android:layout_width="wrap_content"
+                                android:layout_width="0dp"
                                 android:layout_height="wrap_content"
                                 android:background="@drawable/square_ripple"
-                                android:layout_marginEnd="20dp"
+                                android:layout_marginEnd="10dp"
+                                android:layout_weight="1"
                                 android:padding="5dp"
                                 android:clickable="true"
-                                android:drawablePadding="16dp"
+                                android:drawablePadding="6dp"
+                                android:textAlignment="textStart"
                                 android:focusable="true"
-                                android:gravity="center"
+                                android:gravity="start|center"
                                 android:text="srgdg"
                                 android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                                 android:textColor="?android:attr/textColorPrimary"
@@ -174,7 +168,6 @@
                             android:layout_height="wrap_content"
                             android:text="@string/action_display_download_badge"/>
                     </LinearLayout>
-                </HorizontalScrollView>
             </LinearLayout>
 
         <androidx.constraintlayout.widget.ConstraintLayout

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

@@ -2,26 +2,22 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     tools:context=".MainActivity">
-    <group android:id="@+id/reorder_group"
-        android:checkableBehavior="single">
         <item
             android:id="@+id/action_alpha"
-            android:title="@string/title"/>
+            android:title="@string/title"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_last_read"
-            android:title="@string/action_sort_last_read"/>
+            android:title="@string/action_sort_last_read"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_update"
-            android:title="@string/action_sort_last_updated"/>
+            android:title="@string/action_sort_last_updated"
+            android:icon="@drawable/ic_blank_24dp"/>
         <item
             android:id="@+id/action_unread"
-            android:title="@string/action_filter_unread"/>
+            android:title="@string/action_filter_unread"
-
+            android:icon="@drawable/ic_blank_24dp"/>
-    </group>
-
-    <item
-        android:id="@+id/action_reverse"
-        android:title="@string/action_reverse_order"/>
 </menu>

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

@@ -1,35 +1,35 @@
 <?xml version="1.0" encoding="utf-8"?>
 <menu 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"
     tools:context=".MainActivity">
-    <group android:id="@+id/reorder_group"
-        android:checkableBehavior="single">
         <item
             android:id="@+id/action_alpha"
-            android:title="@string/title"/>
+            android:title="@string/title"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_last_read"
-            android:title="@string/action_sort_last_read"/>
+            android:title="@string/action_sort_last_read"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_update"
-            android:title="@string/action_sort_last_updated"/>
+            android:title="@string/action_sort_last_updated"
+            android:icon="@drawable/ic_blank_24dp"/>
         <item
             android:id="@+id/action_unread"
-            android:title="@string/action_filter_unread"/>
+            android:title="@string/action_filter_unread"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_total_chaps"
-            android:title="@string/action_sort_total"/>
+            android:title="@string/action_sort_total"
+            android:icon="@drawable/ic_blank_24dp"/>
 
         <item
             android:id="@+id/action_drag_and_drop"
-            android:title="@string/action_sort_drag_and_drop"/>
+            android:title="@string/action_sort_drag_and_drop"
+            android:icon="@drawable/ic_blank_24dp"/>
 
-    </group>
-
-    <item
-        android:id="@+id/action_reverse"
-        android:title="@string/action_reverse_order"/>
 </menu>

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

@@ -51,6 +51,8 @@
 
     <string name="sorting_by_">Sorting by %1$s</string>
     <string name="sort_by_">Sort by: %1$s</string>
+    <string name="sort_library_by_">Sort library by: %1$s</string>
+    <string name="sort_category_by_">Sort category by: %1$s</string>
     <string name="action_filter_empty">Remove filter</string>
     <string name="action_sort_alpha">Alphabetically</string>
     <string name="action_sort_enabled">Enabled</string>