Add better library item selectors (#5240)

* Add better library item selectors

Inspired by the J2K method of library item selection.

* Tweak theme selection colors

It was missing for Hot Pink and Midnight Dusk.

The selector color is 75% alpha of the color accent, this looked fitting for all themes.
This commit is contained in:
Soitora 2021-06-01 23:56:36 +02:00 committed by GitHub
parent 5113c78ab6
commit 88d9ffe92e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 16 deletions

View File

@ -3,16 +3,39 @@
android:color="?attr/colorLibrarySelection"> android:color="?attr/colorLibrarySelection">
<item> <item>
<selector> <selector>
<item android:state_selected="true"> <item
<color android:color="?attr/colorLibrarySelectionActive" /> android:state_selected="true"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="@dimen/card_radius" />
<solid android:color="?attr/colorLibrarySelectionActive" />
</shape>
</item> </item>
<item android:state_activated="true"> <item
<color android:color="?attr/colorLibrarySelectionActive" /> android:state_activated="true"
android:top="2dp"
android:right="2dp"
android:bottom="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="@dimen/card_radius" />
<solid android:color="?attr/colorLibrarySelectionActive" />
</shape>
</item> </item>
<item> <item
<color android:color="?android:attr/colorBackground" /> android:top="2dp"
android:right="2dp"
android:bottom="2dp"
android:left="2dp">
<shape android:shape="rectangle">
<corners android:radius="@dimen/card_radius" />
<solid android:color="?android:attr/colorBackground" />
</shape>
</item> </item>
</selector> </selector>
</item> </item>

View File

@ -4,6 +4,7 @@
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="@drawable/library_item_selector" android:background="@drawable/library_item_selector"
android:padding="4dp"> android:padding="4dp">

View File

@ -3,6 +3,7 @@
xmlns:tools="http://schemas.android.com/tools" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="@drawable/library_item_selector" android:background="@drawable/library_item_selector"
android:padding="4dp"> android:padding="4dp">

View File

@ -26,12 +26,12 @@
<color name="rippleToolbarColorLight">@color/rippleColorLight</color> <color name="rippleToolbarColorLight">@color/rippleColorLight</color>
<color name="backgroundLight">@color/md_grey_50</color> <color name="backgroundLight">@color/md_grey_50</color>
<color name="dialogLight">@color/md_white_1000</color> <color name="dialogLight">@color/md_white_1000</color>
<color name="selectorColorLight">@color/md_blue_A400_38</color> <color name="selectorColorLight">@color/md_blue_A400_75</color>
<!-- Strawberry Daiquiri Theme --> <!-- Strawberry Daiquiri Theme -->
<color name="colorAccentStrawberry">#ED4A65</color> <color name="colorAccentStrawberry">#ED4A65</color>
<color name="rippleSecondaryColorStrawberry">#0AED4A65</color> <color name="rippleSecondaryColorStrawberry">#0AED4A65</color>
<color name="selectorColorStrawberry">#6FED4A65</color> <color name="selectorColorStrawberry">#BFED4A65</color>
<!-- Dark Theme --> <!-- Dark Theme -->
<color name="colorAccentDark">#3399FF</color> <color name="colorAccentDark">#3399FF</color>
@ -50,7 +50,7 @@
<color name="colorAccentApple">#48E484</color> <color name="colorAccentApple">#48E484</color>
<color name="colorOnSecondaryApple">@color/md_black_1000</color> <color name="colorOnSecondaryApple">@color/md_black_1000</color>
<color name="rippleSecondaryColorApple">#0A48E484</color> <color name="rippleSecondaryColorApple">#0A48E484</color>
<color name="selectorColorApple">#8048E484</color> <color name="selectorColorApple">#BF48E484</color>
<!-- Midnight Dusk Theme --> <!-- Midnight Dusk Theme -->
<color name="colorAccentDusk">#F02475</color> <color name="colorAccentDusk">#F02475</color>
@ -61,7 +61,7 @@
<color name="rippleSecondaryColorDusk">#0FF02475</color> <color name="rippleSecondaryColorDusk">#0FF02475</color>
<color name="backgroundDusk">#16151D</color> <color name="backgroundDusk">#16151D</color>
<color name="dialogDusk">#201F27</color> <color name="dialogDusk">#201F27</color>
<color name="selectorColorDusk">#80F02475</color> <color name="selectorColorDusk">#BFF02475</color>
<!-- AMOLED Theme --> <!-- AMOLED Theme -->
<color name="colorAccentAmoled">#3399FF</color> <color name="colorAccentAmoled">#3399FF</color>
@ -74,7 +74,7 @@
<color name="rippleToolbarColorAmoled">@color/rippleColorAmoled</color> <color name="rippleToolbarColorAmoled">@color/rippleColorAmoled</color>
<color name="backgroundAmoled">@color/colorAmoledPrimary</color> <color name="backgroundAmoled">@color/colorAmoledPrimary</color>
<color name="dialogAmoled">@color/colorAmoledPrimary</color> <color name="dialogAmoled">@color/colorAmoledPrimary</color>
<color name="selectorColorAmoled">@color/md_blue_A200_50</color> <color name="selectorColorAmoled">@color/md_blue_A200_75</color>
<!-- Hot Pink Theme --> <!-- Hot Pink Theme -->
<color name="colorAccentPink">#FF3399</color> <color name="colorAccentPink">#FF3399</color>
@ -82,7 +82,7 @@
<color name="textColorSecondaryPink">@color/md_white_1000_70</color> <color name="textColorSecondaryPink">@color/md_white_1000_70</color>
<color name="textColorHintPink">@color/md_white_1000_50</color> <color name="textColorHintPink">@color/md_white_1000_50</color>
<color name="rippleSecondaryColorPink">#0AFF3399</color> <color name="rippleSecondaryColorPink">#0AFF3399</color>
<color name="selectorColorPink">#80FF69B4</color> <color name="selectorColorPink">#BFFF69B4</color>
<!-- Reader Theme --> <!-- Reader Theme -->
<color name="readerColorDarkPrimary">@color/colorDarkPrimary</color> <color name="readerColorDarkPrimary">@color/colorDarkPrimary</color>
@ -122,9 +122,11 @@
<color name="md_grey_900_75">#BF212121</color> <color name="md_grey_900_75">#BF212121</color>
<color name="md_blue_A200">#448AFF</color> <color name="md_blue_A200">#448AFF</color>
<color name="md_blue_A200_75">#BF448AFF</color>
<color name="md_blue_A200_50">#80448AFF</color> <color name="md_blue_A200_50">#80448AFF</color>
<color name="md_blue_A400">#2979FF</color> <color name="md_blue_A400">#2979FF</color>
<color name="md_blue_A400_75">#BF2979FF</color>
<color name="md_blue_A400_38">#612979FF</color> <color name="md_blue_A400_38">#612979FF</color>
<color name="md_blue_A400_4">#0A2979FF</color> <color name="md_blue_A400_4">#0A2979FF</color>

View File

@ -307,9 +307,8 @@
<!-- Themes --> <!-- Themes -->
<item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Dark.MidnightDusk</item> <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Dark.MidnightDusk</item>
<!-- Custom Attributes --> <!-- Custom Attributes-->
<item name="colorLibrarySelection">@color/selectorColorDark</item> <item name="colorLibrarySelectionActive">@color/selectorColorDusk</item>
<item name="colorLibrarySelectionActive">@color/selectorColorDark</item>
</style> </style>
<!--===============--> <!--===============-->
@ -392,7 +391,7 @@
<item name="md_corner_radius">@dimen/dialog_radius</item> <item name="md_corner_radius">@dimen/dialog_radius</item>
<!-- Custom Attributes--> <!-- Custom Attributes-->
<item name="colorLibrarySelection">@color/selectorColorAmoled</item> <item name="colorLibrarySelection">?attr/colorAccent</item>
<item name="colorLibrarySelectionActive">@color/selectorColorAmoled</item> <item name="colorLibrarySelectionActive">@color/selectorColorAmoled</item>
<item name="colorFilterActive">@color/filterColorAmoled</item> <item name="colorFilterActive">@color/filterColorAmoled</item>
@ -421,6 +420,9 @@
<!-- Themes --> <!-- Themes -->
<item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Amoled.HotPink</item> <item name="materialAlertDialogTheme">@style/Theme.AlertDialog.Amoled.HotPink</item>
<!-- Custom Attributes-->
<item name="colorLibrarySelectionActive">@color/selectorColorPink</item>
</style> </style>
<!--===============--> <!--===============-->