Feature request: Tell Material 3 to please stop screwing with my app's colors

[martymiller]

I think most Android developers will be shocked when they upgrade from Material Design 2 to Material Design 3. All of a sudden, your app is a different color. The background colors of your bottom bar, calendar, cardview, etc is now a variant of your primary color. So if the primary color is Red, Guess what! Your app is now Pink. Someone actually thought this was a good idea.

The bottom bar now looks like this. Do you see the improvement? Yeah, me neither. It now takes up more vertical space and there is a pill behind the icon. I recommend not using this bottom bar style at all. There was absolutely nothing wrong with the previous version.

Do the makers of this SDK realize that professional developers have design requirements? We can't just change the bottom bar specs because Material 3 decided to. Upgrading to Material 3 means figuring out how to set the colors back to how they looked before. I still haven't figured out how to change the calendar background color.

Why would anyone want this? As a user, I don't want my apps to change color just because I changed my phone's wallpaper. The apps and the OS should be separate. Every time I change my wallpaper, my virtual keyboard changes colors. That's not cool, that's annoying.

As a developer, I don't want Material 3 to decide what color my UI components are and then make it really hard (or impossible) to change. I have specific design docs that I'm following. My calendar can't be Pink.

I labeled this as a Feature Request, but I know it won't happen because this is what Material 3 is meant to do. This is fine if you are working on an app from Google or a demo app that no one is going to see. Everyone else is screwed because Material Design 3 will screw over your app. And this is not about Dynamic Color. Although, if your app supports Dynamic Color, it's probably a personal project because most companies have specific UI requirements that would never allow this. This is about Material 3 using the app's primaryColor to set the entire theme of your app without your permission.

So you have two choices:

• stick with Material 2 which means you have an outdated library that will need to be updated eventually
• upgrade to Material 3 and figure out how to make it look like it did with Material 2

Great choices there! I actually posted on Stack Overflow if you'd like to see some examples. I'm sure nothing will change, and this will be Closed immediately, but thanks for reading this far!

https://stackoverflow.com/questions/71929841/material-design-3-uses-colorprimary-for-actionbar-navbar-and-calendar-backgroun

[patzly]

I'm not a Material Components developer, but I think it is highly recommended that you ask your team/company if it is an option for the app to use Material You and dynamic colors. Almost every user of devices with Android 12+ will be very grateful for your decision.

Why would anyone want this? As a user, I don't want my apps to change color just because I changed my phone's wallpaper. The apps and the OS should be separate. Every time I change my wallpaper, my virtual keyboard changes colors. That's not cool, that's annoying.

I think that's a rare view. From my experience regarding the feedback of many users of my apps, I can only say that the vast majority of users strongly prefer this behavior and find it rather annoying when companies insist on their static color theme instead of using the preferred system colors. It simply gives the user an unified experience where the device matches the wallpaper's colors, because the wallpaper mainly matches the user's preferred colors. Even if it doesn't, the user can select another color theme in system's style settings.

So if your team decides to follow these guidelines, there is a very helpful option for companies for their brand colors: color harmonization (6th section on the page).

If your team doesn't want to follow these guidelines, there is the following option: don't apply dynamic colors with the official command. Instead define the following attributes in your app theme (two versions for light and dark). You have to replace the color references, they are in my projects for backward compatibility so users with Android versions lower than 12 can select a static theme in the app's settings. You can use the theme builder to generate a color theme that matches the company's brand colors. Instead of the tinted background color you could use white, but be aware that the tinted light color matches better into the theme than just white.

<item name="colorPrimary">@color/red_primary_40</item>
<item name="colorOnPrimary">@color/white</item>
<item name="colorPrimaryContainer">@color/red_primary_90</item>
<item name="colorOnPrimaryContainer">@color/red_primary_10</item>
<item name="colorPrimaryInverse">@color/red_primary_80</item>

<item name="colorSecondary">@color/red_secondary_40</item>
<item name="colorOnSecondary">@color/white</item>
<item name="colorSecondaryContainer">@color/red_secondary_90</item>
<item name="colorOnSecondaryContainer">@color/red_secondary_10</item>

<item name="colorTertiary">@color/red_tertiary_40</item>
<item name="colorOnTertiary">@color/white</item>
<item name="colorTertiaryContainer">@color/red_tertiary_90</item>
<item name="colorOnTertiaryContainer">@color/red_tertiary_10</item>

<item name="colorError">@color/red_error_40</item>
<item name="colorOnError">@color/white</item>
<item name="colorErrorContainer">@color/red_error_90</item>
<item name="colorOnErrorContainer">@color/red_error_10</item>

<item name="android:colorBackground">@color/red_neutral_99</item>
<item name="colorOnBackground">@color/red_neutral_10</item>

<item name="colorSurface">@color/red_neutral_99</item>
<item name="colorOnSurface">@color/red_neutral_10</item>
<item name="colorSurfaceInverse">@color/red_neutral_20</item>
<item name="colorOnSurfaceInverse">@color/red_neutral_90</item>

<item name="colorSurfaceVariant">@color/red_neutral_variant_90</item>
<item name="colorOnSurfaceVariant">@color/red_neutral_variant_30</item>

<item name="colorOutline">@color/red_neutral_variant_50</item>

If you don't want tintend navigation bars and other tinted components (this is how elevation is expressed in Material 3 and the higher navbar layout is simply a redesign) then you'll have to stay with the MaterialComponents themes instead of Material3. Material3 follows the new guidelines with the new color mappings.

[drchen]

Thanks Patrick, your reply is pretty accurate.

The Material library is meant to help developers implement the Material design guidelines, which helps apps have consistent look and feel, and color schemes are a (critical) part of it.

If you'd like to highlight your branding, you can feel free to override the color schemes by yourself like Patrick's comment suggests, and the Material theme builder is a very good helper tool of doing that.

BTW for the very specific question regarding stop using colorPrimary on surfaces and bars - you can override ?attr/elevationOverlayColor in your themes, which is stated here in our dev doc.

Also you don't really have to use M3 themes/styles to enjoy most of the new features/bug fixes of the components - just keep your library updated and using M2 themes, though it's not recommended but it should work.

[martymiller]

Thanks @patzly, I will try the things that you recommended. But I don't think it's a rare view. Material Design does too much assuming. Most people don't change the phone wallpaper because they like the color scheme of the image and want all of their apps to match that color scheme. If you look at major apps like Facebook, Spotify, Doordash, etc. they don't allow you to change the colors of the app because they want to maintain consistency and their branding colors. Just think, every screenshot of the app would always look different. Do you think Facebook wants their app to be purple for some people and green for others instead of their traditional "Facebook blue"? Of course not.

I'm not going to convince anyone here, but I think your library should be a tool to help developers implement design decisions that were made by their company, instead of overriding everything because it thinks it knows better. If I can't do something as simple as manually change the background color of the nav bar, then that's a major step backwards.

[patzly]

I think the Material Design Components for Android library is meant to help developers to properly implement Material Design guidelines as they were intended by the design team at Google, not to build any user interface to any taste. If the design team at Google decides to release a new version of their design guidelines, the separate developer teams for Android/Flutter/Web try to implement these new guidelines into their libraries as close as possible like they have done it for Android, so it is likely more of a design question ("Should we follow Material Design guidelines and make use of the latest design features in Android?") rather than a feature request for Android.

Also the color of each element can indeed be changed manually, that's a fundamental feature of Material Design Components. Simply visit the implementation pages of the components, e. g. for Navigation bar. Scroll down to Container attributes and Theming a bottom navigation bar, there is all you want. That applies to each component, you can always customize everything. But whether it makes sense is another question, to follow Material 3 guidelines monstly nothing is required to be modified.