Material Design 3：如何使工具栏与主表面颜色相同？

发布于 2025-01-20 10:14:17 字数 902 浏览 0 评论 0原文

我希望我的 Android 应用程序的工具栏与主表面颜色相同（以及状态栏——这已经是干净的 Android Studio 项目中开箱即用的主表面颜色）。我的目标是 Material Design 3 UI 指南。

对于以前版本的 Android，有各种现有的答案，质量各异，涉及运行相当长的样式和主题兔子洞，以捕获工具栏中错误的 UI 部分（图标、菜单和 c）。在 Android 的各种先前版本中，存在主题覆盖以及可生成浅色/浅色工具栏或深色/深色工具栏应用程序的主题变体。但这些钩子似乎都不存在于 Material3 中——按 DESIGN 的说法，Material3 应该具有相同颜色的工具栏。

使用相对默认的配置，我的工具栏是（我认为）原色背景，白天为白色文本，晚上为白色背景上的黑色（主？）文本（相对于主表面和辅助表面相反）。而且我找不到道德上相当于日/夜主题的灯光工具栏灯光背景，希望能够尊重那些拥有 android 12++ 的壁纸匹配颜色（我确实如此）。

我觉得我在这里缺少一些简单的东西。

Fwiw，我没有使用 CoordinatoryLayout/AppLayout —— 只是一个裸露的工具栏，因为之前与 CoordinatorLayout 的不愉快争论以及在全屏模式下运行 Activites，我也将在这个项目中这样做。（CoordinatorLayout 没有给我任何我想要的东西，并且破坏了很多我想要的）。

我确实尝试在工具栏上设置明确的颜色，并且当图标没有改变颜色时运行到这里。（我以前已经走过这条路，至少在三个版本的 Android 上。:-P）。

该应用程序是一个新创建的（大约一周前）Android 应用程序，使用 Android studio 和最新的 SDK 创建。应用主题似乎已指向材料 2，尽管材料 3 的所有依赖项都是最新的。很难说；所有 Android 文档都告诉您如何迁移旧应用程序，而不是如何创建新应用程序——这是一个奇怪的遗漏。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丧 2025-01-27 10:14:17

很高兴看到你的代码。但我也遇到了类似的问题。根据文档，工具栏背景的默认值为 < code>?attr/colorSurface 并在 android:background 上设置。所以，我解决了覆盖工具栏样式的问题。

<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>

我希望这对您有帮助。

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.

回复收藏 0 原文

~没有更多了~