Ripple overhaul (#5109)

* 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>
This commit is contained in:
Soitora
2021-05-22 17:55:05 +02:00
committed by GitHub
parent 569df39fb8
commit 562dce60ee
30 changed files with 95 additions and 38 deletions

View File

@@ -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"

View File

@@ -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"

View File

@@ -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"

View File

@@ -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"

View File

@@ -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"

View File

@@ -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" />

View File

@@ -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"

View File

@@ -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"

View File

@@ -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"

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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"

View File

@@ -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"

View File

@@ -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"

View File

@@ -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">

View File

@@ -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">

View File

@@ -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"

View File

@@ -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">