Material Design 3: How to make Toolbars the same color as primary surface?

4.5k Views Asked by At

I'd like my Android app to have toolbars the same color as the primary surface (and the status bar -- which is already the primary surface color out of the box on a clean Android Studio project). I'm targeting Material Design 3 UI guidelines.

There are various existing answers for previous versions of android, of varying quality, that involve running down a fairly lengthy rabbit hole of styles and themes to capture errant pieces of UI in a toolbar (icons, menus &c). In various previous incarnations of android there have been theme overlays, and theme variants that produce light/light-toolbar or dark/dark-toolbar apps. But none of those hooks seem to be there for Material3 -- which by DESIGN is supposed to have same-color toolbars.

With relatively default configuration, my Toolbars are (I think) primary color background, with white text during the day, and black (primary?) text on white background at night (inverted with respect to primary and secondary surfaces). And I can't find a moral equivalent of light-toolbar light background for Day/Night themes that will hopefully respect wallpaper matched colors for those that have android 12++ (I do).

I feel like I'm missing something simple here.

Fwiw, I'm NOT using CoordinatoryLayout/AppLayout -- just a naked Toolbar, due to previous unpleasant wrangles with CoordinatorLayout and running Activites in full-screen mode, which I will be doing with this project as well. (CoordinatorLayout gives me nothing I want, and breaks a lot that I do want).

I did try setting explicit colors on the toolbar, and came running here when the icon didn't change color. (I've been down this road before, on at least three versions of Android. :-P).

The app is a freshly created (about a week old) Android app, created using Android studio with latest SDK. App themes seem to have been pointed at material 2, although all dependencies are up to date for Material 3. Hard to say; all of the Android docs tell you how to migrate old apps, not how to create new ones -- a curious omission.

1

There are 1 best solutions below

2
On

Would by nice to see your code. But I was with a similar problem. According with documentation, the default value for a Toolbar background is ?attr/colorSurface and it is set on android:background. So, I solved overriding toolbar style.

<style name="Theme.Custom" parent="Theme.Material3.Dark">
    <item name="toolbarStyle">@style/Theme.Custom.Toolbar</item>
</style>

<style name="Theme.Custom.Toolbar" parent="Widget.Material3.Toolbar">
    <item name="android:background">@color/your_color</item>
</style>

I hope that this help you.