Added clear all filter button

Starting optimzations to presenter

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

@@ -4,8 +4,6 @@ import android.content.Context
 import android.util.AttributeSet
 import android.view.MotionEvent
 import android.view.View
-import android.view.ViewGroup
-import android.widget.FrameLayout
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.recyclerview.widget.LinearLayoutManager
 import androidx.recyclerview.widget.RecyclerView
@@ -20,14 +18,14 @@ import eu.kanade.tachiyomi.data.preference.PreferencesHelper
 import eu.kanade.tachiyomi.data.preference.getOrDefault
 import eu.kanade.tachiyomi.ui.category.CategoryAdapter
 import eu.kanade.tachiyomi.ui.main.MainActivity
+import eu.kanade.tachiyomi.util.lang.plusAssign
+import eu.kanade.tachiyomi.util.system.dpToPx
 import eu.kanade.tachiyomi.util.system.launchUI
 import eu.kanade.tachiyomi.util.view.doOnApplyWindowInsets
 import eu.kanade.tachiyomi.util.view.inflate
 import eu.kanade.tachiyomi.util.view.snack
 import eu.kanade.tachiyomi.util.view.updateLayoutParams
 import eu.kanade.tachiyomi.util.view.updatePaddingRelative
-import eu.kanade.tachiyomi.util.lang.plusAssign
-import eu.kanade.tachiyomi.util.system.dpToPx
 import eu.kanade.tachiyomi.widget.AutofitRecyclerView
 import kotlinx.android.synthetic.main.library_category.view.*
 import kotlinx.coroutines.delay
@@ -80,6 +78,8 @@ class LibraryCategoryView @JvmOverloads constructor(context: Context, attrs: Att
 
     private var lastClickPosition = -1
 
+    private var justDraggedAndDropped = false
+
     fun onCreate(controller: LibraryController) {
         this.controller = controller
 
@@ -231,7 +231,10 @@ class LibraryCategoryView @JvmOverloads constructor(context: Context, attrs: Att
         val mangaForCategory = event.getMangaForCategory(category).orEmpty()
 
         // Update the category with its manga.
+        if (!justDraggedAndDropped)
             adapter.setItems(mangaForCategory)
+        else
+            justDraggedAndDropped = false
 
         swipe_refresh.isEnabled = !preferences.hideCategories().getOrDefault()
 
@@ -355,7 +358,8 @@ class LibraryCategoryView @JvmOverloads constructor(context: Context, attrs: Att
             preferences.defaultMangaOrder().set(mangaIds.joinToString("/"))
         else
             db.insertCategory(category).asRxObservable().subscribe()
-        controller.onSortChanged()
+        justDraggedAndDropped = true
+        controller.onCatSortChanged(category.id)
         controller.enableReorderItems(category)
     }
     override fun shouldMoveItem(fromPosition: Int, toPosition: Int): Boolean {

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

@@ -23,6 +23,7 @@ import com.afollestad.materialdialogs.MaterialDialog
 import com.bluelinelabs.conductor.ControllerChangeHandler
 import com.bluelinelabs.conductor.ControllerChangeType
 import com.f2prateek.rx.preferences.Preference
+import com.google.android.material.bottomsheet.BottomSheetBehavior
 import com.google.android.material.snackbar.BaseTransientBottomBar
 import com.google.android.material.snackbar.Snackbar
 import com.google.android.material.tabs.TabLayout
@@ -225,6 +226,7 @@ class LibraryController(
                     FilterBottomSheet.ACTION_SORT -> onSortChanged()
                     FilterBottomSheet.ACTION_DISPLAY -> reattachAdapter()
                     FilterBottomSheet.ACTION_BADGE -> onDownloadBadgeChanged()
+                    FilterBottomSheet.ACTION_CAT_SORT -> onCatSortChanged()
                 }
             }
 
@@ -344,11 +346,11 @@ class LibraryController(
         }
         tabsVisibilitySubscription?.unsubscribe()
         tabsVisibilitySubscription = tabsVisibilityRelay.subscribe { visible ->
-            val tabAnimator = (activity as? MainActivity)?.tabAnimator
+            val tabAnimator = (activity as? MainActivity)?.tabAnimator ?: return@subscribe
-            if (visible) {
+            if (visible && tabAnimator.getHeight() == 0) {
-                tabAnimator?.expand()
+                tabAnimator.expand()
-            } else {
+            } else if (!visible && tabAnimator.getHeight() != 0) {
-                tabAnimator?.collapse()
+                tabAnimator.collapse()
             }
         }
     }
@@ -439,11 +441,16 @@ class LibraryController(
     /**
      * Called when the sorting mode is changed.
      */
-    fun onSortChanged() {
+    private fun onSortChanged() {
         activity?.invalidateOptionsMenu()
         presenter.requestSortUpdate()
     }
 
+    fun onCatSortChanged(id: Int? = null) {
+        val catId = id ?: adapter?.categories?.getOrNull(library_pager.currentItem)?.id ?: return
+        presenter.requestCatSortUpdate(catId)
+    }
+
     /**
      * Reattaches the adapter to the view pager to recreate fragments
      */
@@ -520,6 +527,15 @@ class LibraryController(
         this.query = query
     }
 
+    override fun handleBack(): Boolean {
+        val sheetBehavior = BottomSheetBehavior.from(bottom_sheet)
+        if (sheetBehavior.state == BottomSheetBehavior.STATE_EXPANDED) {
+            sheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED
+            return true
+        }
+        return super.handleBack()
+    }
+
     override fun onPrepareOptionsMenu(menu: Menu) {
         val navView = navView ?: return
 

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

@@ -99,6 +99,8 @@ class LibraryPresenter(
      */
     private var librarySubscription: Subscription? = null
 
+    private var lastCategoryId:Int? = null
+
     override fun onCreate(savedState: Bundle?) {
         super.onCreate(savedState)
         subscribeLibrary()
@@ -220,12 +222,75 @@ class LibraryPresenter(
         }
     }
 
+    private fun applyCatSort(map: LibraryMap, catId: Int?): LibraryMap {
+        if (catId == null) return map
+        val categoryManga = map[catId] ?: return map
+        val catSorted = applySort(mapOf(catId to categoryManga), catId)
+        val mutableMap = map.toMutableMap()
+        mutableMap[catId] = catSorted.values.first()
+        lastCategoryId = null
+        return mutableMap
+    }
+
+    private fun applySort(map: LibraryMap, catId: Int?): LibraryMap {
+        if (catId == null) return map
+        val category = allCategories.find { it.id == catId } ?: return map
+
+        val lastReadManga by lazy {
+            var counter = 0
+            db.getLastReadManga().executeAsBlocking().associate { it.id!! to counter++ }
+        }
+
+        val sortFn: (LibraryItem, LibraryItem) -> Int = { i1, i2 ->
+            val compare = when {
+                category.mangaSort != null -> {
+                    var sort = when (category.mangaSort) {
+                        ALPHA_ASC, ALPHA_DSC -> sortAlphabetical(i1, i2)
+                        UPDATED_ASC, UPDATED_DSC -> i2.manga.last_update.compareTo(i1.manga.last_update)
+                        UNREAD_ASC, UNREAD_DSC -> 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 -> {
+                            val manga1LastRead = lastReadManga[i1.manga.id!!] ?: lastReadManga.size
+                            val manga2LastRead = lastReadManga[i2.manga.id!!] ?: lastReadManga.size
+                            manga1LastRead.compareTo(manga2LastRead)
+                        }
+                        else -> sortAlphabetical(i1, i2)
+                    }
+                    if (!category.isAscending()) sort *= -1
+                    sort
+                }
+                category.mangaOrder.isNotEmpty() -> {
+                    val order = category.mangaOrder
+                    val index1 = order.indexOf(i1.manga.id!!)
+                    val index2 = order.indexOf(i2.manga.id!!)
+                    when {
+                        index1 == index2 -> 0
+                        index1 == -1 -> -1
+                        index2 == -1 -> 1
+                        else -> index1.compareTo(index2)
+                    }
+                }
+                else -> 0
+            }
+            compare
+        }
+        val comparator = Comparator(sortFn)
+
+        return map.mapValues { entry -> entry.value.sortedWith(comparator) }
+    }
+
     /**
      * Applies library sorting to the given map of manga.
      *
      * @param map the map to sort.
      */
     private fun applySort(map: LibraryMap): LibraryMap {
+        if (lastCategoryId != null) return applyCatSort(map, lastCategoryId)
+
         val sortingMode = preferences.librarySortingMode().getOrDefault()
 
         val lastReadManga by lazy {
@@ -415,6 +480,11 @@ class LibraryPresenter(
         sortTriggerRelay.call(Unit)
     }
 
+    fun requestCatSortUpdate(catId: Int) {
+        lastCategoryId = catId
+        sortTriggerRelay.call(Unit)
+    }
+
     fun requestFullUpdate() {
         librarySubscription?.unsubscribe()
         subscribeLibrary()

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

@@ -7,6 +7,7 @@ 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
@@ -69,6 +70,8 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
     var sheetBehavior:BottomSheetBehavior<View>? = null
 
+    private lateinit var clearButton:ImageView
+
     private val filterItems:MutableList<FilterTagGroup> by lazy {
         val list = mutableListOf<FilterTagGroup>()
         if (Injekt.get<DatabaseHelper>().getCategories().executeAsBlocking().isNotEmpty())
@@ -87,9 +90,9 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
     fun onCreate(pagerView:View) {
         if (context.resources.configuration?.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-            sortLayout.orientation = HORIZONTAL
+            sideLayout.orientation = HORIZONTAL
             val marginValue = 10.dpToPx
-            arrayListOf(mainSortTextView, catSortTextView, displayLayout).forEach {
+            arrayListOf(sortingLayout).forEach {
                 it.updateLayoutParams<MarginLayoutParams> {
                     bottomMargin = 0
                     topMargin = 0
@@ -100,6 +103,8 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                 top = 0
             )
         }
+        clearButton = pendingClearButton
+        filterLayout.removeView(clearButton)
         sheetBehavior = BottomSheetBehavior.from(this)
         topbar.setOnClickListener {
             if (sheetBehavior?.state != BottomSheetBehavior.STATE_EXPANDED) {
@@ -110,21 +115,13 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
             }
         }
 
-        sortText.alpha = 1f
-        title.alpha = 0f
-
         pager = pagerView
         pager?.setPadding(0, 0, 0, topbar.height)
         updateTitle()
         sheetBehavior?.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
             override fun onSlide(bottomSheet: View, progress: Float) {
                 updateRootPadding(progress)
-                val newProg = when {
+                topbar.alpha = 1 - progress
-                    progress > 0.9f -> 1f
-                    progress < 0.1f -> 0f
-                    else -> progress
-                }
-                topbar.alpha = 1 - newProg
             }
 
             override fun onStateChanged(p0: View, state: Int) {
@@ -139,8 +136,6 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
             if (sheetBehavior?.state == BottomSheetBehavior.STATE_COLLAPSED) {
                 val height = context.resources.getDimensionPixelSize(R.dimen.rounder_radius)
                 pager?.setPadding(0, 0, 0, topbar.height - height)
-                sortText.alpha = 1f
-                title.alpha = 0f
             }
             else {
                 updateRootPadding()
@@ -150,6 +145,7 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
         mainSortTextView.setOnClickListener { showMainSortOptions() }
         catSortTextView.setOnClickListener { showCatSortOptions() }
+        clearButton.setOnClickListener { clearFilters() }
 
         displayGroup.bindToPreference(preferences.libraryAsList())
     }
@@ -179,7 +175,7 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                             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.action_sort_alpha
+                            else -> R.string.title
                         }
                     )
                     filters.joinToString(", ") { context.getString(it) }
@@ -393,9 +389,13 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
             }
             (2 * order + 1)
         }
+        launchUI {
+            withContext(Dispatchers.IO) {
                 setCatOrder(modType)
+            }
             setCatSortText()
-        onGroupClicked(ACTION_SORT)
+            onGroupClicked(ACTION_CAT_SORT)
+        }
     }
 
     private fun setCatOrder(order: Int) {
@@ -425,10 +425,20 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                 drawable, null, null, null
             )
             mainSortTextView.text = withContext(Dispatchers.IO) {
+                if (sortId == LibrarySort.DRAG_AND_DROP)
                     context.getString(
-                    if (sortId == LibrarySort.DRAG_AND_DROP) R.string.sort_library_by_
+                        when (sortId) {
-                    else R.string.sort_by_
+                            LibrarySort.LAST_UPDATED -> R.string.action_sort_last_updated
-                    , context.getString(
+                            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
@@ -440,6 +450,7 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                         )
                     )
                 }
+            }
             setCatSortText()
         }
     }
@@ -450,12 +461,13 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                 val sortId = withContext(Dispatchers.IO) { sorting() }
                 val drawable = withContext(Dispatchers.IO) {
                     tintVector(
-                        when {
+                        R.drawable.ic_label_outline_white_24dp
+                        /*when {
                             sortId == LibrarySort.DRAG_AND_DROP -> R.drawable.ic_sort_white_24dp
                             lastCategory?.isAscending() == true -> R.drawable
                                 .ic_arrow_up_white_24dp
                             else -> R.drawable.ic_arrow_down_white_24dp
-                        }
+                        }*/
                     )
                 }
                 catSortTextView.setCompoundDrawablesRelativeWithIntrinsicBounds(
@@ -463,7 +475,6 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                 )
                 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
@@ -473,7 +484,6 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
                             else -> R.string.title
                         }
                     )
-                    )
                 }
                 if (catSortTextView.visibility != View.VISIBLE) catSortTextView.visible()
             } else if (catSortTextView.visibility == View.VISIBLE) catSortTextView.gone()
@@ -503,38 +513,54 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
 
     override fun onFilterClicked(view: FilterTagGroup, index: Int, updatePreference:Boolean) {
         if (updatePreference) {
-            when (view) {
+            if (view == categories) {
-                categories -> {
                 preferences.showCategories().set(index != 0)
                 onGroupClicked(ACTION_REFRESH)
-                }
+            } else {
-                downloaded -> {
+                when (view) {
-                    preferences.filterDownloaded().set(index + 1)
+                    downloaded -> preferences.filterDownloaded()
-                    onGroupClicked(ACTION_FILTER)
+                    unread -> preferences.filterUnread()
-                }
+                    completed -> preferences.filterCompleted()
-                unread -> {
+                    tracked -> preferences.filterTracked()
-                    preferences.filterUnread().set(index + 1)
+                    mangaType -> preferences.filterMangaType()
-                    onGroupClicked(ACTION_FILTER)
+                    else -> null
-                }
+                }?.set(index + 1)
-                completed -> {
+                onGroupClicked (ACTION_FILTER)
-                    preferences.filterCompleted().set(index + 1)
-                    onGroupClicked(ACTION_FILTER)
-                }
-                tracked -> {
-                    preferences.filterTracked().set(index + 1)
-                    onGroupClicked(ACTION_FILTER)
-                }
-                mangaType -> {
-                    preferences.filterMangaType().set(index + 1)
-                    onGroupClicked(ACTION_FILTER)
-                }
             }
             updateTitle()
         }
+        val filters = getFilters().size
+        if (filters > 0 && clearButton.parent == null)
+            filterLayout.addView(clearButton, 0)
+        else if (filters == 0 && clearButton.parent != null)
+            filterLayout.removeView(clearButton)
+    }
+
+    private fun clearFilters() {
+        val action = if (preferences.showCategories().getOrDefault()) ACTION_REFRESH
+        else ACTION_FILTER
+
+        preferences.showCategories().set(true)
+        preferences.filterDownloaded().set(0)
+        preferences.filterUnread().set(0)
+        preferences.filterCompleted().set(0)
+        preferences.filterTracked().set(0)
+        preferences.filterMangaType().set(0)
+
+        val transition = androidx.transition.AutoTransition()
+        transition.duration = 150
+        androidx.transition.TransitionManager.beginDelayedTransition(filterLayout, transition)
+        filterItems.forEach {
+            it.reset()
+        }
+        reSortViews()
+        onGroupClicked(action)
     }
 
     fun reSortViews() {
         filterLayout.removeAllViews()
+        if (filterItems.any { it.isActivated })
+            filterLayout.addView(clearButton)
         filterItems.filter { it.isActivated }.forEach {
             filterLayout.addView(it)
         }
@@ -550,5 +576,6 @@ class FilterBottomSheet @JvmOverloads constructor(context: Context, attrs: Attri
         const val ACTION_FILTER = 2
         const val ACTION_DISPLAY = 3
         const val ACTION_BADGE = 4
+        const val ACTION_CAT_SORT = 5
     }
 }

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

@@ -22,6 +22,7 @@ class FilterTagGroup@JvmOverloads constructor(context: Context, attrs: Attribute
     private var root:ViewGroup? = null
 
     private val buttons by lazy { arrayOf(firstButton, secondButton, thirdButton) }
+    private val separators by lazy { arrayOf(separator1, separator2) }
 
     override fun isActivated(): Boolean {
         return buttons.any { it.isActivated }
@@ -76,6 +77,14 @@ class FilterTagGroup@JvmOverloads constructor(context: Context, attrs: Attribute
             toggleButton(0, false)
     }
 
+    fun reset() {
+        buttons.forEach {
+            it.isActivated = false
+        }
+        for (i in 0 until itemCount) buttons[i].visible()
+        for (i in 0 until (itemCount - 1)) separators[i].visible()
+    }
+
     private fun toggleButton(index: Int, callBack: Boolean = true) {
         if (itemCount == 0) return
         if (callBack) {

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

@@ -1,4 +1,4 @@
-<vector android:height="24dp" android:tint="#FFFFFF"
+<vector android:height="24dp" android:tint="?attr/actionBarTintColor"
     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="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>

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

@@ -0,0 +1,21 @@
+<?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="rectangle">
+            <solid android:color="@color/gray_button" />
+            <corners android:radius="13dp" />
+        </shape>
+    </item>
+
+    <item android:id="@android:id/background">
+        <shape
+            android:shape="rectangle">
+            <corners android:radius="16dp"/>
+            <size
+                android:height="32dp"
+                android:width="32dp" />
+            <stroke android:width="1dp" android:color="@color/gray_button" />
+        </shape>
+    </item>
+</ripple>

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

@@ -15,7 +15,7 @@
             <size
                 android:height="32dp"
                 android:width="32dp" />
-            <solid android:color="?android:attr/colorBackground"/>
+            <solid android:color="@android:color/transparent"/>
             <stroke android:width="1dp" android:color="@color/drawerPrimary" />
         </shape>
     </item>

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

@@ -1,12 +1,11 @@
 <?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"
-    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/bottom_sheet"
-    android:layout_width="match_parent"
     style="@style/BottomSheetDialogTheme"
-    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
+    android:layout_width="match_parent"
     android:layout_height="wrap_content"
+    android:background="@drawable/bg_bottom_sheet_dialog_fragment"
     android:clickable="true"
     android:focusable="true"
     android:orientation="vertical"
@@ -19,11 +18,11 @@
         <androidx.core.widget.NestedScrollView
             android:id="@+id/scrollView"
             android:layout_width="match_parent"
-        app:layout_constraintTop_toTopOf="parent"
+            android:layout_height="wrap_content"
             app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-        android:layout_height="wrap_content">
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -50,6 +49,20 @@
                         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>
 
@@ -60,26 +73,34 @@
                     android:layout_marginTop="6dp"
                     android:clipToPadding="false"
                     android:paddingStart="30dp"
-                android:paddingTop="10dp"
+                    android:paddingTop="0dp"
                     android:paddingEnd="20dp"
                     android:paddingBottom="10dp"
                     android:scrollbars="none">
 
                     <LinearLayout
-                    android:id="@+id/sortLayout"
+                        android:id="@+id/sideLayout"
                         android:layout_width="wrap_content"
-                    android:baselineAligned="true"
                         android:layout_height="wrap_content"
+                        android:baselineAligned="true"
                         android:gravity="center|start"
                         android:orientation="vertical">
 
+                        <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:layout_weight="1"
-                        android:layout_marginBottom="20dp"
                                 android:clickable="true"
                                 android:drawablePadding="16dp"
                                 android:focusable="true"
@@ -90,38 +111,36 @@
                                 android:textSize="15sp"
                                 android:textStyle="normal" />
 
-
                             <TextView
                                 android:id="@+id/catSortTextView"
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
                                 android:layout_marginEnd="20dp"
-                        android:layout_weight="1"
-                        android:layout_marginBottom="20dp"
                                 android:clickable="true"
                                 android:drawablePadding="16dp"
-                        android:gravity="center"
                                 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:gravity="center|start"
-                        android:layout_weight="1"
                             android:baselineAligned="false"
+                            android:gravity="center|start"
                             android:orientation="horizontal">
 
                             <TextView
                                 android:layout_width="wrap_content"
                                 android:layout_height="wrap_content"
-                            android:clickable="true"
                                 android:layout_marginEnd="14dp"
+                                android:clickable="true"
                                 android:focusable="true"
                                 android:text="@string/display_as"
                                 android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
@@ -162,8 +181,8 @@
             android:background="@drawable/bg_bottom_sheet_dialog_fragment"
             android:backgroundTint="?android:attr/colorPrimary"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintStart_toStartOf="parent">
+            app:layout_constraintTop_toTopOf="parent">
 
 
             <ImageView
@@ -184,7 +203,7 @@
                 android:layout_marginTop="15dp"
                 android:layout_marginEnd="8dp"
                 android:layout_marginBottom="15dp"
-                android:text="@string/filter_and_sort"
+                android:text="Filter &amp; Sort"
                 android:textAlignment="textStart"
                 android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                 android:textColor="?attr/actionBarTintColor"
@@ -192,19 +211,6 @@
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toEndOf="@+id/imageView2"
                 app:layout_constraintTop_toTopOf="parent" />
-
-            <TextView
-                android:id="@+id/title"
-                android:layout_width="0dp"
-                android:layout_height="wrap_content"
-                android:text="Filter &amp; Sort"
-                android:textAlignment="textStart"
-                android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
-                android:textColor="?attr/actionBarTintColor"
-                app:layout_constraintBottom_toBottomOf="@+id/sortText"
-                app:layout_constraintEnd_toEndOf="@+id/sortText"
-                app:layout_constraintStart_toStartOf="@+id/sortText"
-                app:layout_constraintTop_toTopOf="@+id/sortText" />
         </androidx.constraintlayout.widget.ConstraintLayout>
-</androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
-    </eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet>
+</eu.kanade.tachiyomi.ui.library.filter.FilterBottomSheet>

app/src/main/res/values-night/colors.xml

@@ -31,4 +31,5 @@
     <color name="selectorColor">@color/md_blue_A200_50</color>
     <color name="iconColor">@color/md_white_1000_54</color>
     <color name="button_bg">@color/md_grey_800</color>
+    <color name="gray_button">#BFBFBF</color>
 </resources>

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

@@ -22,6 +22,7 @@
     <color name="readerPrimary">#212121</color>
     <color name="readerDarkBackground">#1C1C1D</color>
     <color name="button_bg">@color/md_white_1000</color>
+    <color name="gray_button">#404040</color>
 
     <color name="textColorPrimary">@color/md_black_1000_87</color>
     <color name="textColorSecondary">@color/md_black_1000_54</color>

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

@@ -51,8 +51,6 @@
 
     <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>
@@ -631,7 +629,6 @@
     <string name="skip_this_step_next_time">Skip this step next time</string>
     <string name="pre_migration_skip_toast">To show this screen again, go to Settings -> Library.</string>
     <string name="reset_tags">Reset Tags</string>
-    <string name="filter_and_sort"><![CDATA[Filter & Sort]]></string>
     <string name="display_as">Display as:</string>
 
 </resources>