From 562dce60ee144be75434957d64ec7ab916dcce6a Mon Sep 17 00:00:00 2001
From: Soitora <simon.mattila@protonmail.com>
Date: Sat, 22 May 2021 17:55:05 +0200
Subject: [PATCH] Ripple overhaul (#5109)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Create drawables for the ripples

Temporary colors in them to aid in unifying the ripples.

The 'ripple_circular' and 'ripple_normal' are probably going to be merge as one in the end.

* Change selectableItems to drawables

Changes 'selectableItemBackgroundBorderless' to 'ripple_circular' drawable.

Changes 'selectableItemBackground' to 'selectable_item_background' drawable.

* Add temporary colors to aid in finding unstyled ripples

* Fix button sizes to not make oval ripples

* Make the chip selectable follow ripple color

* Style using the built in rippleColor when possible

* Ripple away 💸

* Set ripple color for tabs

Main activity tabs as well as sheet tabs

* Set ripple color in seekbar buttons

* Fix ripple color for the toolbar

* Round off and start to finish the ripples

* Set custom colorful ripple for bottom navigation

Makes the app a little more fun than just black and white. Took inspiration from a ton of updated Google apps.

* Revert two layout changes

These were not necessary for the ripple as it is designed now, but it was before.

Co-authored-by: Andreas E <andreas.everos@gmail.com>
---
 .../res/color/background_color_chip_state.xml |  7 +++++
 .../res/drawable/reader_seekbar_ripple.xml    |  2 +-
 app/src/main/res/drawable/ripple_dark.xml     |  5 ++++
 app/src/main/res/drawable/ripple_light.xml    |  5 ++++
 app/src/main/res/drawable/ripple_regular.xml  |  3 ++
 .../drawable/selectable_item_background.xml   |  3 ++
 .../main/res/layout/chapter_download_view.xml |  2 +-
 .../main/res/layout/common_tabbed_sheet.xml   |  3 +-
 app/src/main/res/layout/download_item.xml     |  2 +-
 .../layout/global_search_controller_card.xml  |  2 +-
 app/src/main/res/layout/history_item.xml      |  4 +--
 app/src/main/res/layout/main_activity.xml     |  1 +
 .../main/res/layout/main_activity_toolbar.xml |  3 +-
 .../main/res/layout/manga_chapters_header.xml |  4 +--
 app/src/main/res/layout/manga_info_header.xml |  3 ++
 .../res/layout/navigation_view_checkbox.xml   |  2 +-
 .../layout/navigation_view_checkedtext.xml    |  2 +-
 .../main/res/layout/navigation_view_radio.xml |  2 +-
 .../res/layout/navigation_view_spinner.xml    |  2 +-
 .../main/res/layout/navigation_view_text.xml  |  2 +-
 app/src/main/res/layout/pref_settings.xml     |  2 +-
 app/src/main/res/layout/reader_activity.xml   |  8 +++---
 app/src/main/res/layout/reader_page_sheet.xml |  6 ++--
 .../settings_search_controller_card.xml       |  2 +-
 .../source_main_controller_card_item.xml      |  4 +--
 .../main/res/layout/spinner_preference.xml    |  2 +-
 app/src/main/res/values/attrs.xml             |  1 +
 app/src/main/res/values/colors.xml            |  9 ++++--
 app/src/main/res/values/styles.xml            | 28 ++++++++++++++++---
 app/src/main/res/values/themes.xml            | 12 ++++----
 30 files changed, 95 insertions(+), 38 deletions(-)
 create mode 100644 app/src/main/res/color/background_color_chip_state.xml
 create mode 100644 app/src/main/res/drawable/ripple_dark.xml
 create mode 100644 app/src/main/res/drawable/ripple_light.xml
 create mode 100644 app/src/main/res/drawable/ripple_regular.xml
 create mode 100644 app/src/main/res/drawable/selectable_item_background.xml

diff --git a/app/src/main/res/color/background_color_chip_state.xml b/app/src/main/res/color/background_color_chip_state.xml
new file mode 100644
index 0000000000..04f3cfb2d0
--- /dev/null
+++ b/app/src/main/res/color/background_color_chip_state.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="?attr/rippleColor" android:state_selected="true" />
+    <item android:color="?attr/rippleColor" android:state_pressed="true" />
+    <item android:color="?attr/rippleColor" android:state_focused="true" />
+    <item android:color="@android:color/transparent" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/reader_seekbar_ripple.xml b/app/src/main/res/drawable/reader_seekbar_ripple.xml
index 69a3fbcf51..0c8c0e16be 100644
--- a/app/src/main/res/drawable/reader_seekbar_ripple.xml
+++ b/app/src/main/res/drawable/reader_seekbar_ripple.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <ripple xmlns:android="http://schemas.android.com/apk/res/android"
-    android:color="?attr/colorOnPrimary">
+    android:color="?attr/rippleColor">
 
     <item android:id="@android:id/mask">
         <shape android:shape="rectangle">
diff --git a/app/src/main/res/drawable/ripple_dark.xml b/app/src/main/res/drawable/ripple_dark.xml
new file mode 100644
index 0000000000..26f6902724
--- /dev/null
+++ b/app/src/main/res/drawable/ripple_dark.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple android:color="?attr/rippleColor"
+    xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:drawable="@color/backgroundDark" />
+</ripple>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ripple_light.xml b/app/src/main/res/drawable/ripple_light.xml
new file mode 100644
index 0000000000..425e6e6767
--- /dev/null
+++ b/app/src/main/res/drawable/ripple_light.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple android:color="?attr/rippleColor"
+    xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:drawable="@color/backgroundLight" />
+</ripple>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/ripple_regular.xml b/app/src/main/res/drawable/ripple_regular.xml
new file mode 100644
index 0000000000..6032d19cc3
--- /dev/null
+++ b/app/src/main/res/drawable/ripple_regular.xml
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ripple android:color="?attr/rippleColor"
+    xmlns:android="http://schemas.android.com/apk/res/android" />
\ No newline at end of file
diff --git a/app/src/main/res/drawable/selectable_item_background.xml b/app/src/main/res/drawable/selectable_item_background.xml
new file mode 100644
index 0000000000..dbaebc3253
--- /dev/null
+++ b/app/src/main/res/drawable/selectable_item_background.xml
@@ -0,0 +1,3 @@
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ripple_regular" />
+</selector>
\ No newline at end of file
diff --git a/app/src/main/res/layout/chapter_download_view.xml b/app/src/main/res/layout/chapter_download_view.xml
index f1bb020d9f..201d665f54 100644
--- a/app/src/main/res/layout/chapter_download_view.xml
+++ b/app/src/main/res/layout/chapter_download_view.xml
@@ -5,7 +5,7 @@
     android:layout_width="42dp"
     android:layout_height="42dp"
     android:padding="8dp"
-    android:background="?selectableItemBackgroundBorderless">
+    android:background="@drawable/ripple_regular">
 
     <ImageView
         android:id="@+id/download_icon"
diff --git a/app/src/main/res/layout/common_tabbed_sheet.xml b/app/src/main/res/layout/common_tabbed_sheet.xml
index b059f6c52e..59976cf09a 100644
--- a/app/src/main/res/layout/common_tabbed_sheet.xml
+++ b/app/src/main/res/layout/common_tabbed_sheet.xml
@@ -21,6 +21,7 @@
             app:layout_constraintEnd_toStartOf="@+id/menu"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent"
+            app:tabRippleColor="?attr/rippleColor"
             app:tabTextColor="@color/tabs_selector_background"
             app:tabIndicatorColor="?attr/colorAccent"
             app:tabGravity="fill"
@@ -30,7 +31,7 @@
             android:id="@+id/menu"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:background="?selectableItemBackgroundBorderless"
+            android:background="@drawable/ripple_regular"
             android:contentDescription="@string/action_menu"
             android:paddingStart="10dp"
             android:paddingEnd="10dp"
diff --git a/app/src/main/res/layout/download_item.xml b/app/src/main/res/layout/download_item.xml
index 076ed5e152..e1bd58d781 100644
--- a/app/src/main/res/layout/download_item.xml
+++ b/app/src/main/res/layout/download_item.xml
@@ -89,7 +89,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_toEndOf="@id/download_progress_text"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/action_menu"
         android:paddingVertical="16dp"
         android:paddingHorizontal="10dp"
diff --git a/app/src/main/res/layout/global_search_controller_card.xml b/app/src/main/res/layout/global_search_controller_card.xml
index 028c3f13f8..6915a1a903 100644
--- a/app/src/main/res/layout/global_search_controller_card.xml
+++ b/app/src/main/res/layout/global_search_controller_card.xml
@@ -10,7 +10,7 @@
         android:id="@+id/title_wrapper"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="?attr/selectableItemBackground">
+        android:background="@drawable/selectable_item_background">
 
         <TextView
             android:id="@+id/title"
diff --git a/app/src/main/res/layout/history_item.xml b/app/src/main/res/layout/history_item.xml
index 155d21eef0..dd97d7dd0f 100644
--- a/app/src/main/res/layout/history_item.xml
+++ b/app/src/main/res/layout/history_item.xml
@@ -56,7 +56,7 @@
         android:id="@+id/remove"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/action_resume"
         android:padding="8dp"
         app:layout_constraintBottom_toBottomOf="parent"
@@ -69,7 +69,7 @@
         android:id="@+id/resume"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/action_resume"
         android:padding="8dp"
         app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/main_activity.xml b/app/src/main/res/layout/main_activity.xml
index 5e21c8fae7..5c35cdf1c1 100644
--- a/app/src/main/res/layout/main_activity.xml
+++ b/app/src/main/res/layout/main_activity.xml
@@ -83,6 +83,7 @@
         android:layout_gravity="bottom"
         app:itemIconTint="@color/nav_selector"
         app:itemTextColor="@color/nav_selector"
+        app:itemRippleColor="?attr/rippleNavColor"
         app:labelVisibilityMode="labeled"
         app:layout_insetEdge="bottom"
         app:menu="@menu/main_nav" />
diff --git a/app/src/main/res/layout/main_activity_toolbar.xml b/app/src/main/res/layout/main_activity_toolbar.xml
index 47dedf572b..2f79067919 100644
--- a/app/src/main/res/layout/main_activity_toolbar.xml
+++ b/app/src/main/res/layout/main_activity_toolbar.xml
@@ -19,7 +19,8 @@
         android:id="@+id/tabs"
         style="@style/Theme.Widget.Tabs"
         android:layout_width="match_parent"
-        android:layout_height="wrap_content" />
+        android:layout_height="wrap_content"
+        app:tabRippleColor="?attr/rippleColor" />
 
     <FrameLayout
         android:id="@+id/downloaded_only"
diff --git a/app/src/main/res/layout/manga_chapters_header.xml b/app/src/main/res/layout/manga_chapters_header.xml
index aba65ea7ca..c17d99c063 100644
--- a/app/src/main/res/layout/manga_chapters_header.xml
+++ b/app/src/main/res/layout/manga_chapters_header.xml
@@ -4,7 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:paddingStart="16dp"
     android:paddingTop="4dp"
     android:paddingEnd="12dp"
@@ -28,7 +28,7 @@
         android:id="@+id/btn_chapters_filter"
         android:layout_width="28dp"
         android:layout_height="28dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/action_filter"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/manga_info_header.xml b/app/src/main/res/layout/manga_info_header.xml
index 3f2eaa4072..706c5cf517 100644
--- a/app/src/main/res/layout/manga_info_header.xml
+++ b/app/src/main/res/layout/manga_info_header.xml
@@ -142,6 +142,7 @@
             android:layout_marginStart="16dp"
             android:text="@string/add_to_library"
             app:icon="@drawable/ic_favorite_border_24dp"
+            app:rippleColor="?attr/rippleColor"
             app:layout_constraintEnd_toStartOf="@+id/btn_tracking"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/manga_info" />
@@ -154,6 +155,7 @@
             android:text="@string/manga_tracking_tab"
             android:visibility="gone"
             app:icon="@drawable/ic_sync_24dp"
+            app:rippleColor="?attr/rippleColor"
             app:layout_constraintEnd_toStartOf="@+id/btn_webview"
             app:layout_constraintStart_toEndOf="@+id/btn_favorite"
             app:layout_constraintTop_toBottomOf="@+id/manga_info"
@@ -168,6 +170,7 @@
             android:text="@string/action_web_view"
             android:visibility="gone"
             app:icon="@drawable/ic_public_24dp"
+            app:rippleColor="?attr/rippleColor"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toEndOf="@+id/btn_tracking"
             app:layout_constraintTop_toBottomOf="@+id/manga_info"
diff --git a/app/src/main/res/layout/navigation_view_checkbox.xml b/app/src/main/res/layout/navigation_view_checkbox.xml
index 2c36b7bf4c..d1bd53190d 100644
--- a/app/src/main/res/layout/navigation_view_checkbox.xml
+++ b/app/src/main/res/layout/navigation_view_checkbox.xml
@@ -2,7 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="?attr/listPreferredItemHeightSmall"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:focusable="true"
     android:paddingStart="?attr/listPreferredItemPaddingStart"
     android:paddingEnd="?attr/listPreferredItemPaddingEnd">
diff --git a/app/src/main/res/layout/navigation_view_checkedtext.xml b/app/src/main/res/layout/navigation_view_checkedtext.xml
index 51243946cc..c625d96a7f 100644
--- a/app/src/main/res/layout/navigation_view_checkedtext.xml
+++ b/app/src/main/res/layout/navigation_view_checkedtext.xml
@@ -2,7 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="?attr/listPreferredItemHeightSmall"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:focusable="true"
     android:paddingStart="?attr/listPreferredItemPaddingStart"
     android:paddingEnd="?attr/listPreferredItemPaddingEnd">
diff --git a/app/src/main/res/layout/navigation_view_radio.xml b/app/src/main/res/layout/navigation_view_radio.xml
index 7ac1d6687f..0cbeff65a1 100644
--- a/app/src/main/res/layout/navigation_view_radio.xml
+++ b/app/src/main/res/layout/navigation_view_radio.xml
@@ -2,7 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="?attr/listPreferredItemHeightSmall"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:focusable="true"
     android:paddingStart="?attr/listPreferredItemPaddingStart"
     android:paddingEnd="?attr/listPreferredItemPaddingEnd">
diff --git a/app/src/main/res/layout/navigation_view_spinner.xml b/app/src/main/res/layout/navigation_view_spinner.xml
index eea785cb6b..e253f4dd09 100644
--- a/app/src/main/res/layout/navigation_view_spinner.xml
+++ b/app/src/main/res/layout/navigation_view_spinner.xml
@@ -3,7 +3,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="?attr/listPreferredItemHeightSmall"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:focusable="true"
     android:paddingStart="?attr/listPreferredItemPaddingStart"
     android:paddingEnd="?attr/listPreferredItemPaddingEnd">
diff --git a/app/src/main/res/layout/navigation_view_text.xml b/app/src/main/res/layout/navigation_view_text.xml
index c9c8698c79..ca1e1d1eac 100644
--- a/app/src/main/res/layout/navigation_view_text.xml
+++ b/app/src/main/res/layout/navigation_view_text.xml
@@ -2,7 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:baselineAligned="false"
     android:focusable="true"
     android:paddingStart="?attr/listPreferredItemPaddingStart"
diff --git a/app/src/main/res/layout/pref_settings.xml b/app/src/main/res/layout/pref_settings.xml
index 9d250e327f..a747c57ceb 100644
--- a/app/src/main/res/layout/pref_settings.xml
+++ b/app/src/main/res/layout/pref_settings.xml
@@ -10,7 +10,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginEnd="8dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/label_settings"
         android:padding="8dp"
         app:srcCompat="@drawable/ic_settings_24dp"
diff --git a/app/src/main/res/layout/reader_activity.xml b/app/src/main/res/layout/reader_activity.xml
index e2c616202d..575d8181a8 100644
--- a/app/src/main/res/layout/reader_activity.xml
+++ b/app/src/main/res/layout/reader_activity.xml
@@ -156,7 +156,7 @@
                     android:id="@+id/action_reading_mode"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
-                    android:background="?selectableItemBackgroundBorderless"
+                    android:background="@drawable/ripple_regular"
                     android:contentDescription="@string/viewer"
                     android:padding="@dimen/screen_edge_margin"
                     app:layout_constraintEnd_toStartOf="@id/action_crop_borders"
@@ -169,7 +169,7 @@
                     android:id="@+id/action_crop_borders"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
-                    android:background="?selectableItemBackgroundBorderless"
+                    android:background="@drawable/ripple_regular"
                     android:contentDescription="@string/pref_crop_borders"
                     android:padding="@dimen/screen_edge_margin"
                     app:layout_constraintEnd_toStartOf="@id/action_rotation"
@@ -182,7 +182,7 @@
                     android:id="@+id/action_rotation"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
-                    android:background="?selectableItemBackgroundBorderless"
+                    android:background="@drawable/ripple_regular"
                     android:contentDescription="@string/pref_rotation_type"
                     android:padding="@dimen/screen_edge_margin"
                     app:layout_constraintEnd_toStartOf="@id/action_settings"
@@ -195,7 +195,7 @@
                     android:id="@+id/action_settings"
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
-                    android:background="?selectableItemBackgroundBorderless"
+                    android:background="@drawable/ripple_regular"
                     android:contentDescription="@string/action_settings"
                     android:padding="@dimen/screen_edge_margin"
                     app:layout_constraintEnd_toEndOf="parent"
diff --git a/app/src/main/res/layout/reader_page_sheet.xml b/app/src/main/res/layout/reader_page_sheet.xml
index c44b686949..83c3ef373f 100644
--- a/app/src/main/res/layout/reader_page_sheet.xml
+++ b/app/src/main/res/layout/reader_page_sheet.xml
@@ -11,7 +11,7 @@
         android:layout_height="56dp"
         android:clickable="true"
         android:focusable="true"
-        android:foreground="?attr/selectableItemBackground"
+        android:foreground="@drawable/selectable_item_background"
         android:gravity="center"
         android:paddingStart="16dp"
         android:paddingEnd="16dp">
@@ -37,7 +37,7 @@
         android:layout_height="56dp"
         android:clickable="true"
         android:focusable="true"
-        android:foreground="?attr/selectableItemBackground"
+        android:foreground="@drawable/selectable_item_background"
         android:gravity="center"
         android:paddingStart="16dp"
         android:paddingEnd="16dp">
@@ -63,7 +63,7 @@
         android:layout_height="56dp"
         android:clickable="true"
         android:focusable="true"
-        android:foreground="?attr/selectableItemBackground"
+        android:foreground="@drawable/selectable_item_background"
         android:gravity="center"
         android:paddingStart="16dp"
         android:paddingEnd="16dp">
diff --git a/app/src/main/res/layout/settings_search_controller_card.xml b/app/src/main/res/layout/settings_search_controller_card.xml
index 50dcf119b8..33eb822f24 100644
--- a/app/src/main/res/layout/settings_search_controller_card.xml
+++ b/app/src/main/res/layout/settings_search_controller_card.xml
@@ -4,7 +4,7 @@
     android:id="@+id/title_wrapper"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:orientation="vertical"
     android:padding="16dp">
 
diff --git a/app/src/main/res/layout/source_main_controller_card_item.xml b/app/src/main/res/layout/source_main_controller_card_item.xml
index e648403a19..5ea31cfc03 100644
--- a/app/src/main/res/layout/source_main_controller_card_item.xml
+++ b/app/src/main/res/layout/source_main_controller_card_item.xml
@@ -70,9 +70,9 @@
     <ImageButton
         android:id="@+id/pin"
         android:layout_width="40dp"
-        android:layout_height="0dp"
+        android:layout_height="40dp"
         android:layout_marginEnd="8dp"
-        android:background="?selectableItemBackgroundBorderless"
+        android:background="@drawable/ripple_regular"
         android:contentDescription="@string/action_pin"
         android:visibility="gone"
         app:layout_constraintBottom_toBottomOf="parent"
diff --git a/app/src/main/res/layout/spinner_preference.xml b/app/src/main/res/layout/spinner_preference.xml
index 000afb2ea1..d58ae3af2b 100644
--- a/app/src/main/res/layout/spinner_preference.xml
+++ b/app/src/main/res/layout/spinner_preference.xml
@@ -4,7 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="?attr/listPreferredItemHeightSmall"
-    android:background="?attr/selectableItemBackground"
+    android:background="@drawable/selectable_item_background"
     android:paddingStart="16dp"
     android:paddingEnd="16dp">
 
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index f259e821c3..b19eefd78c 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -22,5 +22,6 @@
     <attr name="colorFilterActive" format="reference|integer"/>
     <attr name="colorBackgroundSplash" format="reference|integer"/>
     <attr name="colorAccentOnPrimary" format="reference|integer"/>
+    <attr name="rippleNavColor" format="reference|integer"/>
 
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 2d914635bb..1b768fa1fe 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -18,7 +18,8 @@
     <color name="textColorSecondaryLight">@color/md_black_1000_54</color>
     <color name="textColorHintLight">@color/md_black_1000_38</color>
     <color name="dividerLight">@color/md_black_1000_12</color>
-    <color name="rippleColorLight">@color/md_black_1000_12</color>
+    <color name="rippleColorLight">@color/md_black_1000_6</color>
+    <color name="rippleNavColorLight">@color/md_blue_A400_4</color>
     <color name="backgroundLight">@color/md_grey_50</color>
     <color name="dialogLight">@color/md_white_1000</color>
     <color name="selectorColorLight">@color/md_blue_A400_38</color>
@@ -29,7 +30,8 @@
     <color name="textColorSecondaryDark">@color/md_white_1000_70</color>
     <color name="textColorHintDark">@color/md_white_1000_50</color>
     <color name="dividerDark">@android:color/transparent</color>
-    <color name="rippleColorDark">@color/md_white_1000_20</color>
+    <color name="rippleColorDark">@color/md_white_1000_6</color>
+    <color name="rippleNavColorDark">#0A3399FF</color>
     <color name="backgroundDark">@color/colorDarkPrimaryDark</color>
     <color name="dialogDark">@color/colorDarkPrimary</color>
     <color name="selectorColorDark">@color/md_blue_A200_50</color>
@@ -47,6 +49,7 @@
     <color name="md_black_1000_54">#8A000000</color>
     <color name="md_black_1000_38">#61000000</color>
     <color name="md_black_1000_12">#1F000000</color>
+    <color name="md_black_1000_6">#0F000000</color>
 
     <color name="md_white_1000">#FFFFFFFF</color>
     <color name="md_white_1000_70">#B3FFFFFF</color>
@@ -54,6 +57,7 @@
     <color name="md_white_1000_50">#80FFFFFF</color>
     <color name="md_white_1000_20">#33FFFFFF</color>
     <color name="md_white_1000_12">#1FFFFFFF</color>
+    <color name="md_white_1000_6">#0FFFFFFF</color>
 
     <!-- Material Design Colors -->
     <color name="md_black_1000">#000000</color>
@@ -71,6 +75,7 @@
 
     <color name="md_blue_A400">#2979FF</color>
     <color name="md_blue_A400_38">#612979FF</color>
+    <color name="md_blue_A400_4">#0A2979FF</color>
 
     <color name="md_blue_grey_900">#263238</color>
     <color name="md_blue_grey_800">#37474F</color>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 419959c6ef..7b158ea978 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -6,10 +6,14 @@
     <!--========-->
     <style name="Theme.Toolbar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar" />
 
-    <style name="Theme.Toolbar.Light" parent="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
+    <style name="Theme.Toolbar.Light" parent="Theme.Toolbar.Custom">
         <item name="popupTheme">@style/ThemeOverlay.MaterialComponents.Light</item>
     </style>
 
+    <style name="Theme.Toolbar.Custom" parent="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
+        <item name="android:colorControlHighlight">?attr/rippleColor</item>
+    </style>
+
     <style name="Theme.Toolbar.Navigation" parent="Widget.AppCompat.Toolbar.Button.Navigation">
         <item name="tint">?attr/colorOnPrimary</item>
     </style>
@@ -227,9 +231,13 @@
     <style name="Theme.Widget.Chip" parent="Widget.MaterialComponents.Chip.Action">
         <item name="chipStrokeWidth">1dp</item>
         <item name="chipStrokeColor">?attr/colorAccent</item>
-        <item name="chipBackgroundColor">@android:color/transparent</item>
+        <item name="chipBackgroundColor">@color/background_color_chip_state</item>
         <item name="android:textColor">?attr/colorAccent</item>
 
+        <!-- Custom chip states -->
+        <item name="android:clickable">true</item>
+        <item name="android:focusable">true</item>
+
         <!-- Smaller text/height -->
         <item name="chipCornerRadius">12dp</item>
         <item name="chipMinHeight">24dp</item>
@@ -284,14 +292,14 @@
     <!--==============-->
     <style name="Theme.Widget.Button" parent="Widget.MaterialComponents.Button.TextButton">
         <item name="android:textColor">?attr/colorAccent</item>
-        <item name="rippleColor">?attr/colorAccent</item>
+        <item name="rippleColor">?attr/rippleColor</item>
         <item name="android:textAllCaps">false</item>
     </style>
 
     <style name="Theme.Widget.Button.FilledAccent" parent="Widget.MaterialComponents.Button">
         <item name="android:textColor">?attr/colorOnSecondary</item>
         <item name="backgroundTint">?attr/colorAccent</item>
-        <item name="rippleColor">?attr/colorAccent</item>
+        <item name="rippleColor">?attr/rippleColor</item>
         <item name="android:textAllCaps">false</item>
     </style>
 
@@ -358,4 +366,16 @@
         <item name="android:textSize">15sp</item>
     </style>
 
+
+    <!--===============-->
+    <!--Custom Selector-->
+    <!--===============-->
+    <style name="PreferenceThemeLight" parent="@style/PreferenceThemeOverlay">
+        <item name="android:selectableItemBackground">@drawable/ripple_light</item>
+    </style>
+
+    <style name="PreferenceThemeDark" parent="@style/PreferenceThemeOverlay">
+        <item name="android:selectableItemBackground">@drawable/ripple_dark</item>
+    </style>
+
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
index 24e31ed5a4..4477d23f7c 100644
--- a/app/src/main/res/values/themes.xml
+++ b/app/src/main/res/values/themes.xml
@@ -37,6 +37,7 @@
         <item name="android:textColorSecondaryInverse">@color/textColorSecondaryDark</item>
         <item name="android:textColorHintInverse">@color/textColorHintDark</item>
         <item name="rippleColor">@color/rippleColorLight</item>
+        <item name="rippleNavColor">@color/rippleNavColorLight</item>
         <item name="android:colorEdgeEffect">?attr/colorAccent</item>
 
         <item name="android:divider">@color/dividerLight</item>
@@ -58,7 +59,7 @@
         <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="toolbarNavigationButtonStyle">@style/Theme.Toolbar.Navigation</item>
-        <item name="preferenceTheme">@style/PreferenceThemeOverlay</item>
+        <item name="preferenceTheme">@style/PreferenceThemeLight</item>
         <item name="dialogTheme">@style/Theme.AlertDialog.Light</item>
         <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Light</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
@@ -136,6 +137,7 @@
         <item name="android:textColorPrimaryInverse">@color/textColorPrimaryLight</item>
         <item name="android:textColorSecondaryInverse">@color/textColorSecondaryLight</item>
         <item name="android:textColorHintInverse">@color/textColorHintLight</item>
+        <item name="rippleNavColor">@color/rippleNavColorDark</item>
         <item name="rippleColor">@color/rippleColorDark</item>
         <item name="android:colorEdgeEffect">?attr/colorAccent</item>
 
@@ -152,10 +154,10 @@
         <item name="actionModeStyle">@style/Theme.ActionMode</item>
         <item name="actionModeCloseButtonStyle">@style/Theme.ActionMode.CloseButton</item>
         <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
-        <item name="actionBarTheme">@style/ThemeOverlay.MaterialComponents.Dark.ActionBar</item>
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="toolbarNavigationButtonStyle">@style/Theme.Toolbar.Navigation</item>
-        <item name="preferenceTheme">@style/PreferenceThemeOverlay</item>
+        <item name="preferenceTheme">@style/PreferenceThemeDark</item>
         <item name="dialogTheme">@style/Theme.AlertDialog.Dark</item>
         <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Dark</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
@@ -221,7 +223,7 @@
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         <item name="android:navigationBarColor">?attr/colorPrimaryVariant</item>
 
-        <item name="actionBarTheme">@style/ThemeOverlay.MaterialComponents.Dark.ActionBar</item>
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="switchStyle">@style/Theme.Widget.BasicSwitch</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>
@@ -237,7 +239,7 @@
         <item name="android:statusBarColor">?attr/colorPrimaryVariant</item>
         <item name="android:navigationBarColor">?attr/colorPrimaryVariant</item>
 
-        <item name="actionBarTheme">@style/ThemeOverlay.MaterialComponents.Dark.ActionBar</item>
+        <item name="actionBarTheme">@style/Theme.Toolbar.Custom</item>
         <item name="actionBarPopupTheme">@style/ThemeOverlay.MaterialComponents</item>
         <item name="switchStyle">@style/Theme.Widget.BasicSwitch</item>
         <item name="bottomSheetDialogTheme">@style/Theme.BottomSheet</item>