mirror/mihon
1
0
Fork 0
mirror of https://github.com/mihonapp/mihon.git synced 2025-11-02 23:28:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Ripple overhaul (#5109)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/main/res/values/attrs.xml
View File

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

9
app/src/main/res/values/colors.xml
View File

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

28
app/src/main/res/values/styles.xml
View File

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

12
app/src/main/res/values/themes.xml
View File

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