[DynamicColors] Generated Colors are not precise

[Yamenher]

Description: passing a seed color in DynamicColorsOptions.Builder has some colors that are not precise compared to regular DynamicColors

Expected behavior: Notice the switch icon tint and the FAB colors

now here's the outcome with a custom seed color, focus on the switch icon color on checked state and the FAB color

Source code:

DynamicColorsOptions.Builder options = new DynamicColorsOptions.Builder();
options.setContentBasedSource([color int here]);
DynamicColors.applyToActivityIfAvailable(this, options.build());

Minimal sample app repro: Please consider attaching a minimal sample app that reproduces the issue. This will help narrow down the conditions required for reproducing the issue, and it will speed up the bug fix process. You may attach a zip file of the sample app or link to a GitHub repo that contains the sample app.

Main Layout

<androidx.coordinatorlayout.widget.CoordinatorLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@null"
    android:orientation="vertical">
<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/FAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_shuffle" 
        style="@style/Widget.Material3.FloatingActionButton.Small.Primary"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

package com.example.app

public class MainActivity extends AppCompatActivity{

 @Override

	protected void onCreate(Bundle bundle) {
DynamicColorsOptions.Builder options = new DynamicColorsOptions.Builder();
                    options.setContentBasedSource(0xffff0000);                   DynamicColors.applyToActivityIfAvailable(this, options.build()); 
}
}

Android API version: SDK 36

Material Library version: v1.13.0 (stable)

Device: Redmi Note 13 Pro 5G, AOSP based Custom ROM

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[Yamenher]

Apologies for bad indentation, I'm on mobile

[dsn5ft]

Hi @Yamenher I have some questions:

1. Are you using the default color roles / attributes for the switch thumb icon tint?

• ?attr/colorSurfaceContainerHighest (unchecked)
• ?attr/colorOnPrimaryContainer (checked)

2. Can you provide more specific details? Like the hex colors for the seed colors which cause the problems for Switch and FAB. All I see in your code example is options.setContentBasedSource(0xffff0000);. Is it happening with multiple seed colors?

3. I see the issue with the Switch thumb icon not having enough contrast, but not sure what the FAB issue is. Can you explain?

4. Can you try with the latest library version (1.14.0-alpha08) to see if this is still an issue? It's possible there have been updates to the color algo.

[pekingme]

This is work as intended. The reason it's different from the system dynamic colors is that the dynamic color calculated from the seed color using the MCU in Material Design library is the ContentScheme, which has different color specs. We are also receiving feature requests from other sources to add the API to support generating other schemes from the content-based seed color. The update is in planning phase now.

Regardless, it seems the current behavior of content-based dynamic colors in switch is broken in dark mode (for some hues). The icon color is onPrimary and the thumb color is onPrimaryContainer. The contrast ratio between them is not guaranteed. Here are some screenshots from my side. Need to follow up with our UX.

Contrast ok.

Contrast not ok.

[Yamenher]

Hi @Yamenher I have some questions:

1. Are you using the default color roles / attributes for the switch thumb icon tint?

• ?attr/colorSurfaceContainerHighest (unchecked)
• ?attr/colorOnPrimaryContainer (checked)

2. Can you provide more specific details? Like the hex colors for the seed colors which cause the problems for Switch and FAB. All I see in your code example is options.setContentBasedSource(0xffff0000);. Is it happening with multiple seed colors?
3. I see the issue with the Switch thumb icon not having enough contrast, but not sure what the FAB issue is. Can you explain?
4. Can you try with the latest library version (1.14.0-alpha08) to see if this is still an issue? It's possible there have been updates to the color algo.

Thanks for replying!

1.Yes I absolutely don't touch any of the default attributes
2.Yes the problem is across all colors.
3. That was my bad, They used different opposed tints due to different Color Schemes
4. Nope I checked commit history, looks like no fixes regarding this has been pushed

But, as @pekingme said, looks like the Normal DynamicColors generation relies on SchemeTonalSpot while the seed-based palette is built with SchemeContent, However colors still look broken and this Scheme generation needs to be calibrated a little bit, while the lib anyways has to make it possible for user to set a specific Scheme for color generation, since the current implementation is very limited in my case and it represents a problem for me, Hope this gets fixed soon! :)

[Yamenher]

This is work as intended. The reason it's different from the system dynamic colors is that the dynamic color calculated from the seed color using the MCU in Material Design library is the ContentScheme, which has different color specs. We are also receiving feature requests from other sources to add the API to support generating other schemes from the content-based seed color. The update is in planning phase now.

Regardless, it seems the current behavior of content-based dynamic colors in switch is broken in dark mode (for some hues). The icon color is onPrimary and the thumb color is onPrimaryContainer. The contrast ratio between them is not guaranteed. Here are some screenshots from my side. Need to follow up with our UX.

Contrast ok.

Contrast not ok.

Yes!
it's absolutely needed to make specifying Color Scheme possible, since this is actually a problematic for me, so for the time being, is it possible to change it in any way?

[pekingme]

I don't think any temporary workaround should be applied to library without UX approval or guidance atm. If it's an urgent issue to your app, my recommendation is to consider temporarily styling the active icon color of Switch in your layout / style with some other color role, which can guarantee enough contrast ratio over onPrimary, to address the contrast issue in Switch. The easiest choice is to use primary, which is the same as the track color. Will get some feedback early next week.

[Yamenher]

I don't think any temporary workaround should be applied to library without UX approval or guidance atm. If it's an urgent issue to your app, my recommendation is to consider temporarily styling the active icon color of Switch in your layout / style with some other color role, which can guarantee enough contrast ratio over onPrimary, to address the contrast issue in Switch. The easiest choice is to use primary, which is the same as the track color. Will get some feedback early next week.

Alright, thanks for help!

[pekingme]

Update from our UX. This would be likely a fix in the Switch component by remapping the active icon color to primary (same as my workaround). The feature request of having different color schemes using content-based seed is tracked in a separate internal bug.