material-components-android
material-components-android copied to clipboard
[Material3 Colors] Version 1.11.0 Components doesnt respect the system colors
Hi. I was using version 1.10.0 and it worked perfect. My device is a Samsung S22 Ultra with One UI 6 (Android 14) So my accent color was a brownish color and with the version 1.10.0, material components was also matched to that color. Today I updated to version 1.11.0 and suddenly the component doesn't respect my system accent color. material components was in a color of blue or something. Looks like the app identified the primaryColor as light blue. How is this possible?
Also I was using the Android 14 emulator and this is not happening in that. Happens only on my device. Here are two screenshots.
Is this an issue on my end? If it is could you point me a way to fix this?
This one is with 1.10.0
this one is with 1.11.0
@pekingme can you take a look at this?
Also @ytheekshana do you have any devices other than Samsung to test on?
No. Just this Samsung. I'll try to find another.
I have noticed, Gmail, Drive, and also play store which worked perfectly before has now turned blue. May be they too have updated to 1.11.0
@ytheekshana On 1.11.0, we use the new color roles from system UI (e.g., @android:color/system_primary_dark) for dynamic colors on Android U. Samsung OneUI has this ability to adjust the "Color palettes". I believe behind the scene, they override the sysUI color roles. Could you verify if you get the desired colors by enabling the "Color palettes" (Settings --> Wallpaper and style --> Color palette --> Color palette)? Without enabling this, the system UI primary color is blue-ish by default.
yes I have enabled Color palettes and my accent color is nor a brownish color like in the first screenshot. but when updated to 1.11.0 material components are in a blueish color
Yes, not working:
android:theme="@style/Theme.Material3.DynamicColors.DayNight"
and also:
Context dynamicColorContext = DynamicColors.wrapContextIfAvailable(context, R.style.ThemeOverlay_Material3_DynamicColors_DayNight);
TypedArray ta = dynamicColorContext.obtainStyledAttributes(attrsToResolve);
Here're some captures on my Samsung Note 20 (One UI 5.1). It seems the system primary, secondary, tertiary palettes have similar hues to the bottom three colors shown in the palette thumbnail. The top three colors, though, should be Samsung color roles, which are only visible in Samsung apps. I think there could be some issues with the OEM overridden colors. Will ask around, stay tuned.
Color palette 1:
Color palette 2:
Tried my app on Note20U with One UI 5.1. The issue is not visible there. Material Components respect the system colors. So this should be a One UI 6 problem right?
Tested in my devices version 1.11.0:
Pixel 3a, Android 12 - colors are respected Pixel 6, Android 14, latest december beta - colors are respected Xiaomi 13 lite, Android 13, latest update - colors are respected Redmi Note 9 pro, Android 12, latest update - colors are respected Redmi Note 12 pro, Android 13, latest update - colors are respected OnePus 9, Android 13, latest update - colors are respected
Galaxy S21, One UI 6, Android 14, letest december update - colors are NOT respected, BUT version 1.10.0 working good!
I think I misunderstood the issue earlier. It seems that the dynamic colors don't apply properly on OneUI 6 with 1.11.0. Let me check if there's anything suspicious between 1.10 and 1.11.
@ytheekshana Could you provide the following context with your device (Samsung S22 Ultra with One UI 6 (Android 14))?
- A screenshot of the main color demo in Material's catalog (Color --> Demo)
- The clipboard contents when click the "copy" icon (top-right corner) in the dynamic palette demo (Color --> Dynamic Palette Demo).
Currently far away from my PC. do you have an APK file of this catalog. So I can give the screenshots ASAP
Hi.
- This is the Color Demo
- Dynamic Pallete Demo
Here is the copied clipboard
System accent1 #000000 @android:color/system_accent1_1000 #3d0604 @android:color/system_accent1_900 #591b15 @android:color/system_accent1_800 #773129 @android:color/system_accent1_700 #94483f @android:color/system_accent1_600 #b15e54 @android:color/system_accent1_500 #d1786d @android:color/system_accent1_400 #f09286 @android:color/system_accent1_300 #ffb4aa @android:color/system_accent1_200 #ffdad5 @android:color/system_accent1_100 #ffedea @android:color/system_accent1_50 #fffbff @android:color/system_accent1_10 #ffffff @android:color/system_accent1_0
System accent2 #000000 @android:color/system_accent2_1000 #311304 @android:color/system_accent2_900 #4b2715 @android:color/system_accent2_800 #653d29 @android:color/system_accent2_700 #80543e @android:color/system_accent2_600 #9b6b54 @android:color/system_accent2_500 #b9856d @android:color/system_accent2_400 #d69f86 @android:color/system_accent2_300 #f4b99f @android:color/system_accent2_200 #ffdbcc @android:color/system_accent2_100 #ffede6 @android:color/system_accent2_50 #fffbff @android:color/system_accent2_10 #ffffff @android:color/system_accent2_0
System accent3 #000000 @android:color/system_accent3_1000 #2e1500 @android:color/system_accent3_900 #4c2700 @android:color/system_accent3_800 #683c0f @android:color/system_accent3_700 #845325 @android:color/system_accent3_600 #9f6a3a @android:color/system_accent3_500 #bd8551 @android:color/system_accent3_400 #db9f69 @android:color/system_accent3_300 #fab981 @android:color/system_accent3_200 #ffdcc1 @android:color/system_accent3_100 #ffeee2 @android:color/system_accent3_50 #fffbff @android:color/system_accent3_10 #ffffff @android:color/system_accent3_0
System neutral1 #000000 @android:color/system_neutral1_1000 #271816 @android:color/system_neutral1_900 #3d2c2a @android:color/system_neutral1_800 #554240 @android:color/system_neutral1_700 #6e5957 @android:color/system_neutral1_600 #87716e @android:color/system_neutral1_500 #a38b88 @android:color/system_neutral1_400 #bfa5a2 @android:color/system_neutral1_300 #dcc0bd @android:color/system_neutral1_200 #f9dcd8 @android:color/system_neutral1_100 #ffedea @android:color/system_neutral1_50 #fffbff @android:color/system_neutral1_10 #ffffff @android:color/system_neutral1_0
System neutral2 #000000 @android:color/system_neutral2_1000 #291715 @android:color/system_neutral2_900 #402b29 @android:color/system_neutral2_800 #58413e @android:color/system_neutral2_700 #715855 @android:color/system_neutral2_600 #8b706c @android:color/system_neutral2_500 #a78a86 @android:color/system_neutral2_400 #c3a4a0 @android:color/system_neutral2_300 #dfbfbb @android:color/system_neutral2_200 #fddbd6 @android:color/system_neutral2_100 #ffedea @android:color/system_neutral2_50 #fffbff @android:color/system_neutral2_10 #ffffff @android:color/system_neutral2_0
I updated my phone's software version and the issue was resolved. My phone is Samsung Z Filp 4. The version used by Material3 Compose is 1.2.0-rc01, and the version of this Components is 1.11.0. The former mentioned in the update that Dynamic color now pulls from system defined color roles. This improves contrast for accessible content, and more closely aligns dynamic color to the Material spec. So it will also cause this problem.
Sorry for my poor English, I am not a native speaker.
In my Galaxy S23, latest january firmware, v1.11.0. dynamic colors not working, v1.10.0 working.
In my Galaxy S23, latest january firmware, v1.11.0. dynamic colors not working, v1.10.0 working.
I find it also not working now. If I change the scheme, the software colors will not change.
It looks like Samsung isn't overriding the new resource values properly. system_primary_dark doesn't change while system_accent1_200 does, for instance.
Tried this one one UI 6.1. The issue still exists.
I can confirm this as well in S22+ Android 14 (OneUI 6).
I also noticed the same issue in Emulator with API 34 image but with emulator re-selecting the pallet fix the issue for all apps.
Edit: Steps to reproduce in Emulator
-
Open Android 14 based emulator
-
Change wallpaper and colors from settings. (make sure the colors are applied)
-
Stop emulator and cold boot again
-
On next boot colors will be changed back to blue.
I can confirm this as well in S22+ Android 14 (OneUI 6). I also noticed the same issue in Emulator with API 34 image but with emulator re-selecting the pallet fix the issue for all apps.
Can confirm, same on S23Ultra
Same issue here, on Samsung S23 ultre, oneui 6, Android 14. All Google apps are affected and they are all displayed the default blue color, regardless of the selected color palet. Except the Gboard and Message app.
This issue is occurring since few months and Samsung is not fixing. Don't know if someone was able to find a workaround?
Still persists on 1.12.0-beta01
Same issue on Samsung s22 ultra, OneUI 6.0, Android 14.
Same problem on both Galaxy A33 and Galaxy Tab S8, on One UI 6.0. Do we really have to wait for a fix by Samsung?
Same problem on both Galaxy A33 and Galaxy Tab S8, on One UI 6.0. Do we really have to wait for a fix by Samsung?
I'm pretty sure Samsung's never going to fix it at this point, the best way around this is probably to build a workaround in the library itself
Tried 1.13.0-alpha01 with S24U latest firmware. No luck
Came across a similar issue with my Samsung A52, operating on OneUI 6.0 with Android 14
Yep, same issue on both A52s and S21FE with OneUI 6/Android 14
Same issue on Galaxy S23, Galaxy A53 both on Android 14 / OneUI 6.1 and OneUI 6.0 respectively.
This is not using material-components-android directly, but via the Jetpack Compose BOM version 2024.04.01
Same on A33. One UI 6.1 is in beta I think. I hope Samsung solves this with the update. Otherwise, a dynamic color setting is nonsense.