Use elevated overlay on reader menu (#6347)

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

@@ -13,7 +13,7 @@ import android.graphics.Color
 import android.graphics.ColorMatrix
 import android.graphics.ColorMatrixColorFilter
 import android.graphics.Paint
-import android.graphics.PorterDuff
+import android.graphics.drawable.RippleDrawable
 import android.os.Build
 import android.os.Bundle
 import android.view.Gravity
@@ -76,6 +76,7 @@ import eu.kanade.tachiyomi.util.system.hasDisplayCutout
 import eu.kanade.tachiyomi.util.system.isNightMode
 import eu.kanade.tachiyomi.util.system.logcat
 import eu.kanade.tachiyomi.util.system.toast
+import eu.kanade.tachiyomi.util.view.copy
 import eu.kanade.tachiyomi.util.view.popupMenu
 import eu.kanade.tachiyomi.util.view.setTooltip
 import eu.kanade.tachiyomi.widget.listener.SimpleAnimationListener
@@ -389,23 +390,32 @@ class ReaderActivity : BaseRxActivity<ReaderActivityBinding, ReaderPresenter>()
 
         initBottomShortcuts()
 
-        val alpha = if (isNightMode()) 230 else 242 // 90% dark 95% light
+        val toolbarBackground = (binding.toolbar.background as MaterialShapeDrawable).apply {
-        val toolbarColor = ColorUtils.setAlphaComponent(getThemeColor(R.attr.colorToolbar), alpha)
+            elevation = resources.getDimension(R.dimen.m3_sys_elevation_level2)
-        listOf(
+            alpha = if (isNightMode()) 230 else 242 // 90% dark 95% light
-            binding.toolbarBottom,
+        }
-            binding.leftChapter,
+        binding.toolbarBottom.background = toolbarBackground.copy(this@ReaderActivity)
-            binding.readerSeekbar,
+
-            binding.rightChapter
+        binding.readerSeekbar.background = toolbarBackground.copy(this@ReaderActivity)?.apply {
-        ).forEach {
+            setCornerSize(999F)
-            it.backgroundTintMode = PorterDuff.Mode.DST_IN
+        }
-            it.backgroundTintList = ColorStateList.valueOf(toolbarColor)
+        listOf(binding.leftChapter, binding.rightChapter).forEach {
+            it.background = binding.readerSeekbar.background.copy(this)
+            it.foreground = RippleDrawable(
+                ColorStateList.valueOf(getThemeColor(android.R.attr.colorControlHighlight)),
+                null,
+                it.background
+            )
         }
 
+        val toolbarColor = ColorUtils.setAlphaComponent(
+            toolbarBackground.resolvedTintColor,
+            toolbarBackground.alpha
+        )
         window.statusBarColor = toolbarColor
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O_MR1) {
             window.navigationBarColor = toolbarColor
         }
-        (binding.toolbar.background as MaterialShapeDrawable).fillColor = ColorStateList.valueOf(toolbarColor)
 
         // Set initial visibility
         setMenuVisibility(menuVisible)

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

@@ -3,7 +3,9 @@
 package eu.kanade.tachiyomi.util.view
 
 import android.annotation.SuppressLint
+import android.content.Context
 import android.graphics.Point
+import android.graphics.drawable.Drawable
 import android.text.TextUtils
 import android.view.Gravity
 import android.view.Menu
@@ -25,6 +27,7 @@ import androidx.viewpager.widget.ViewPager
 import com.google.android.material.chip.Chip
 import com.google.android.material.chip.ChipGroup
 import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
+import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.snackbar.Snackbar
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.util.system.getResourceColor
@@ -245,3 +248,14 @@ fun ViewPager.getActivePageView(): View? {
         false
     }
 }
+
+/**
+ * Returns a deep copy of the provided [Drawable]
+ */
+inline fun <reified T : Drawable> T.copy(context: Context): T? {
+    return (constantState?.newDrawable()?.mutate() as? T).apply {
+        if (this is MaterialShapeDrawable) {
+            initializeElevationOverlay(context)
+        }
+    }
+}

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

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

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

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@drawable/reader_seekbar_ripple" android:state_pressed="true" />
-    <item android:drawable="@drawable/reader_seekbar_ripple" android:state_focused="true" />
-    <item android:drawable="@drawable/reader_seekbar_ripple" android:state_selected="true" />
-    <item android:drawable="@drawable/reader_seekbar_background" />
-</selector>

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

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<ripple xmlns:android="http://schemas.android.com/apk/res/android"
-    android:color="?attr/colorControlHighlight">
-
-    <item android:id="@android:id/mask">
-        <shape android:shape="rectangle">
-            <solid android:color="?attr/colorControlActivated" />
-            <corners android:radius="?attr/actionBarSize" />
-        </shape>
-    </item>
-
-    <item android:drawable="@drawable/reader_seekbar_background" />
-
-</ripple>

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

@@ -78,7 +78,6 @@
                     android:layout_width="48dp"
                     android:layout_height="48dp"
                     android:layout_marginEnd="8dp"
-                    android:background="@drawable/reader_seekbar_button"
                     android:contentDescription="@string/action_previous_chapter"
                     android:padding="@dimen/screen_edge_margin"
                     app:srcCompat="@drawable/ic_skip_previous_24dp"
@@ -89,7 +88,6 @@
                     android:layout_width="0dp"
                     android:layout_height="match_parent"
                     android:layout_weight="1"
-                    android:background="@drawable/reader_seekbar_background"
                     android:clickable="true"
                     android:paddingStart="8dp"
                     android:paddingEnd="8dp"
@@ -132,7 +130,6 @@
                     android:layout_width="48dp"
                     android:layout_height="48dp"
                     android:layout_marginStart="8dp"
-                    android:background="@drawable/reader_seekbar_button"
                     android:contentDescription="@string/action_next_chapter"
                     android:padding="@dimen/screen_edge_margin"
                     app:srcCompat="@drawable/ic_skip_next_24dp"
@@ -145,7 +142,6 @@
                 android:layout_width="match_parent"
                 android:layout_height="?attr/actionBarSize"
                 android:layout_gravity="bottom"
-                android:background="?attr/colorToolbar"
                 android:clickable="true"
                 tools:ignore="KeyboardInaccessibleWidget">