Material 3主题设计：Timeline Visualizer的浅色主题与自适应图标
Material 3主题设计Timeline Visualizer的浅色主题与自适应图标【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizerTimeline Visualizer是一款能把 Google 位置历史Timeline数据变成旅行视频的开源工具它的界面基于 Material 3 主题设计构建浅色主题为默认外观深色主题随系统自动切换桌面图标则采用 Android 自适应图标规范在不同设备、不同壁纸下都能保持一致的视觉识别度。浅色主题一套粉色调的 Material 3 色板Material 3Material You强调「由主题色板驱动 UI」。Timeline Visualizer 的浅色主题定义在 themes.xml 中父主题为Theme.Material3.Light.NoActionBar关键色值则集中在 colors.xml角色色值作用brand#E90064品牌主色玫红色调interactive#D0005A按钮、开关等可交互元素surface#FFF8FA窗口背景略带粉白surface_container#F7EEF1卡片等容器底色on_surface#24191D正文文字深紫灰outline#8A7078描边与分割线可以看到整张色板都围绕品牌玫红做了低饱和度的派生背景不是纯白而是#FFF8FA的粉白容器底色#F7EEF1再深一档形成 Material 3 推崇的「表面层级surface tonal elevation」——不用阴影仅靠色阶区分卡片与背景。几个值得学习的小细节状态栏配色android:windowLightStatusBar设为true浅色背景上使用深色状态栏图标保证顶部文字可读。底部导航字体单独定义了BottomNavigationTextAppearance11sp基于 Material 3 的LabelMedium字阶微调小屏上更紧凑。品牌色复用引导页路线色onboarding_route直接复用#E90064品牌色贯穿启动页到主界面。深色主题同一套主题自动切换深色主题放在 values-night/themes.xml父主题换成Theme.Material3.Dark.NoActionBar但属性名完全一致colorPrimary、colorSurface……只是引用了 values-night/colors.xml 里的一组夜色值交互色从#D0005A提亮为#FFB1C8浅粉在深色背景上更醒目表面色换成#1B1115的近黑暖调容器为#281B20android:windowLightStatusBar改为false状态栏图标反转为浅色。这就是 Material 3 主题设计的精髓主题结构只写一份颜色资源按values/values-night两套目录自动匹配开发者无需在代码里判断白天黑夜。自适应图标一张「手绘地图」的多层结构Timeline Visualizer 的桌面图标遵循 Android 的自适应图标Adaptive Icon规范入口是 mipmap-anydpi-v26/ic_launcher.xml由三层组成背景层ic_launcher_background纯色#FFF8FA与浅色主题背景一致前景层ic_launcher_foreground.xml一幅手绘风格的小地图——米色街区块面、一条玫红#E90064的旅行路线以及一枚定位图钉正是「用位置历史可视化旅行」这一功能的图形化表达单色层ic_launcher_monochrome.xml仅用黑色描边勾勒地图、路线与图钉轮廓供 Android 13 的「主题图标」功能使用——系统可把它染成壁纸主题色。兼容旧设备也不遗漏mipmap-anydpi/ic_launcher.xml 与 drawable/ic_launcher.xml 提供了 108dp 的静态矢量图标Android 7.x 及以下同样能显示完整图案。设计要点自适应图标的前景必须控制在外框 66dp 的安全区内108dp 画布的中心区域这样圆形、圆角方形等各种图标掩罩裁剪后地图与路线都不会被切掉。快速上手克隆仓库查看主题资源想亲手翻一翻这套 Material 3 主题设计可以克隆仓库后浏览app/src/main/res/下的资源目录git clone https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer建议按以下路径阅读主题定义app/src/main/res/values/themes.xml浅色色板app/src/main/res/values/colors.xml深色色板app/src/main/res/values-night/colors.xml图标组合app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml品牌规范文档docs/brand.md小结Timeline Visualizer 的主题设计展示了 Material 3 在小型项目中的落地范式一套色板两个世界浅色粉白 深色暖黑靠values/values-night目录自动切换️主题属性结构统一深浅两套主题属性名一致只换颜色引用维护成本极低三层自适应图标背景、前景、单色分层兼容从 Android 7 到 13 的全部设备与主题图标功能。对新手来说这套「色板先行、目录切换、图标分层」的做法几乎可以直接照搬到你自己的 App 主题设计中。【免费下载链接】google-timeline-visualizerVisualize your year in travel using your Google Location History (Timeline) data项目地址: https://gitcode.com/GitHub_Trending/go/google-timeline-visualizer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考