【首发】根据壁纸修改App主题,它真的来了
1、前言
曾经产品经理的奇思妙想,现在终于可以实现了…
2、效果
效果中,原本是红色壁纸对应的红色App主题,在改成绿色壁纸之后,App主题也相应的变成绿色了。
模拟器演示略微小卡…
3、介绍
这个效果主要是使用了Material You中的动态颜色功能。
3.1、什么是Material You
Material You
也称Material3或M3,是第三代Material Design设计语言。
Material You将颜色重新定义为更加个性化的体验,助力于构建出色且富有表现力的应用。
3.2、什么是动态颜色
动态颜色(Dynamic Color
)是Material You的关键部分,通过动态配色提取算法从用户的壁纸中派生出颜色方案,且符合无障碍使用的标准,亦或是自定义的个性化颜色方案,然后应用于系统UI和应用程序,从而让设备变得更加个性化。
3.3、动态颜色的原理是什么
- 首先,从用户的壁纸上提取一种源颜色,并推算出5中关键颜色,比如primary、Secondary、Tertiary等。
- 然后,将每个关键颜色转化为由13种色调组成的调色板,且每种色调会生成对应的浅、深色方案。
- 最后,通过系统Token将从壁纸提取的颜色方案和App Theme关联起来,在DynamicColorsActivityLifecycleCallbacks中判断是否需要覆盖。
4、实现
4.1、迁移到M3
4.1.1、更新Gradle依赖
升级material
库版本到1.5.0
及以上
implementation 'com.google.android.material:material:1.5.0'
4.1.2、修改版本
修改compileSdkVersion
和targetSdkVersion
到31
及以上
android {compileSdkVersion 31defaultConfig {applicationId "com.yechaoa.materialdesign"minSdkVersion 23targetSdkVersion 31...}...}
备注:在Android12
上,为增强安全性,需要对所有的四大组件(带有intent-filter)添加android:exported
属性。
4.1.3、修改App主题
将Theme.AppCompat.*
或Theme.MaterialComponents.*
改为 Theme.Material3.*
<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar"></style>
4.2、添加动态颜色
4.2.1、应用动态颜色
class App: Application() {override fun onCreate() {super.onCreate()// apply dynamic colorDynamicColors.applyToActivitiesIfAvailable(this)}
}
在Application
中应用动态颜色能力,除applyToActivitiesIfAvailable(@NonNull Application application)方法之外主要还有:
- applyToActivitiesIfAvailable(@NonNull Application application, @StyleRes int theme) 第二个参数表示自定义的覆盖系统的theme
- applyIfAvailable(@NonNull Activity activity) 或是某一个Activity
- applyIfAvailable(@NonNull Activity activity, @StyleRes int theme) 或是只有某一个Activity覆盖
- 等等
这里直接整个App都使用动态颜色。也可以在App中通过开关的形式来决策。
4.2.2、注册到manifest
通过android:name
来注册我们自定义的Application
<applicationandroid:name=".App"...android:theme="@style/AppTheme">...</application>
4.2.3、使用动态颜色
我们过去在使用颜色时可能是硬编码
,比如这样:
android:background="@color/colorPrimary"
现在颜色的色值不确定了,应改为动态访问
的方式:
android:background="?attr/colorPrimary"
OK,至此已经可以在Android 12 上试试动态颜色的效果了。
Author:yechaoa
4.3、Material Theme Builder
在4.2.1
中,我们提到applyIfAvailable(@NonNull Activity activity, @StyleRes int theme) ,可以通过第二个参数只给某一个Activity覆盖Theme。
场景还是有很多的,比如某个特殊的页面就是需要不一样的主题,再比如在国庆节这天App的首页一定要是红色的。
官方其实也考虑到了这种场景,并提供了Material Theme Builder
(Figma&Web)工具进行可视化自定义。
下面主要介绍Material Theme Builder在Web上的使用。
4.3.1、壁纸预览
截图是自带的效果,在右下角可以点击add your wallpaper
添加你的壁纸并查看显示效果。
4.3.2、自定义Theme
点击顶部的CUSTOM
Tab可以进入自定义页面。
左边的核心颜色可以自定义修改,并可以添加扩展颜色。
中间是实时效果,右边是调色板。
在右上角有一个EXPORT
导出按钮
除了可以应用Android,还有Flutter
和Web
。
导出的文件包含日间模式和夜间模式的Color和Theme文件,可以直接copy到项目中使用。
4.3.3、Theme覆盖
基于规范,覆盖的主题最好是加上overlay
标示,比如:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"><item name="colorPrimary">@color/overlay_colorPrimary</item>...</style>
代码应用:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme.Overlay)
也可以添加一个开关,让用户可以在动态颜色和自定义颜色来回切换。
4.4、是否支持动态颜色
基于Android的开源,可能并不是每个厂商的Android12设备都支持动态颜色。
所以官方也提供了Api进行判断:
@SuppressLint("DefaultLocale")@ChecksSdkIntAtLeast(api = VERSION_CODES.S)public static boolean isDynamicColorAvailable() {if (VERSION.SDK_INT < VERSION_CODES.S) {return false;}DeviceSupportCondition deviceSupportCondition =DYNAMIC_COLOR_SUPPORTED_MANUFACTURERS.get(Build.MANUFACTURER.toLowerCase());if (deviceSupportCondition == null) {deviceSupportCondition = DYNAMIC_COLOR_SUPPORTED_BRANDS.get(Build.BRAND.toLowerCase());}return deviceSupportCondition != null && deviceSupportCondition.isSupported();}
截止目前,跟进的厂商有:
deviceMap.put("oppo", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("realme", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("oneplus", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("vivo", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("xiaomi", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("motorola", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("itel", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("tecno mobile limited", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("infinix mobility limited", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("hmd global", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("sharp", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("sony", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("tcl", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("lenovo", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("lge", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("google", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("robolectric", DEFAULT_DEVICE_SUPPORT_CONDITION);deviceMap.put("samsung", SAMSUNG_DEVICE_SUPPORT_CONDITION);
5、总结
总的来说,这个功能还是非常nice的,可以让你的App在Android12上表现的更加个性化且富有表现力。
但还是能识别出很多成本的,比如targetSdkVersion升级到31,Theme迁移到Material3,以及升级后的整包回归。
所以,个人建议,对于老项目最好是申请专项来做,其实更建议用新项目来尝鲜。
6、Github
https://github.com/yechaoa/MaterialDesign
7、文档
- Migrating to Material Design 3
- Material Design 3
- Material Theme Builder
- DynamicColors
8、最后
写作不易,感谢点赞支持 ^ - ^
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=pyfutl3ynk2b
【首发】根据壁纸修改App主题,它真的来了相关推荐
- android设置主题背景为壁纸_主题壁纸美化app下载-主题壁纸美化安卓版(DIY定制) - 超好玩...
主题壁纸美化是一款非常实用的手机壁纸软件,海量图片素材可以包揽你的桌面.头像.背景图等等,主题壁纸美化安卓版(DIY定制)还有特殊的透明壁纸,可以设置个性挂件,让你的桌面动起来,感兴趣的小伙伴快来下载 ...
- vue+vite+element-plus修改全局主题颜色
vue3+vite+element-plus修改全局主题颜色 新建修改全局的样式文件 配置vite.config.ts文件 修改APP.vue 最近在研究Vue3+vite+element-plus项 ...
- 超级壁纸android,超级壁纸大全app
超级壁纸大全app是一款非常优秀的手机上更换壁纸的软件,使用超级壁纸大全app能非常方便地将您的聊天背景,桌面背景,锁屏壁纸都能换成您心仪的壁纸,这些壁纸都是非常精美好看的,画质高清是作为壁纸的最基本 ...
- Wallpaper:基于Typecho的壁纸头像站主题
简介: 该主题是本人的一个头像壁纸站点的主题,这个站最初是女朋友要让和她用情侣头像和壁纸,跑到网上转了一圈都没找到一个专门的情侣头像壁纸站,只在知乎某个答案下找到一些情侣头像,而情侣壁纸就更难找了,找 ...
- android仿QQ优雅的修改App字体大小
最近公司有需求需要在App里提供修改应用字体大小的功能,网上查了下资料,感觉都不是和理想,后决定自己实现功能. 实现原理 根据Activity的主题动态修改,在主题中添加自定义的字体大小属性,满足不同 ...
- android如何app主题更换,通过EventBus更换android app主题
在设置界面切换主题,是许多app必备的功能,可以在style.xml文件中写好样式,然后在代码中使用setTheme()可以动态切换整个application的主题.具体步骤: 1.准备好要切换的st ...
- 超级壁纸android,超级壁纸大全app下载-超级壁纸大全 安卓版v1.1.0-PC6安卓网
超级壁纸大全app是一款免费好用的主题美化软件,超级壁纸大全app专为喜欢更换手机桌面和锁屏壁纸的用户打造,通过超级壁纸大全软件随时找到自己想要的美图. 软件介绍 ?超级壁纸大全,超清壁纸资源整合下载 ...
- iOS动态修改app图标
动态修改app的图标,就是在不重新安装app的情况下,可以修改当前的icon图标:在某些情况下,是有这个需求的:例如,可以更换主题的app中,一般都会有一套完整的主题包含相应的icon:还有就是一些节 ...
- extjs 修改官方主题
1.在用sencha命令创建的Extjs6项目中只能使用一种界面主题(Theme),如果要换一个界面风络需要重新修改app.json中的theme配置项,然后再用cmd命令重新编译生成 方法一:修改a ...
最新文章
- 对order by的理解
- 业务库负载翻了百倍,我做了什么来拯救MySQL架构?
- PLM系统的成功实施
- python做些什么-学会Python后都能做什么?网友们的回答简直不要太厉害
- 计算机网络基础中职学校,浅谈中职学校计算机网络基础教学
- sklearn快速入门教程 -- 机器学习工具的快速入门指引
- 无缝融入 Kubernetes 生态 | 云原生网关支持 Ingress 资源
- [Unity优化]overdraw01:不可见遮罩
- python带通滤波_python中的fft带通滤波器
- 泰晤士报下载_《泰晤士报》和《星期日泰晤士报》新闻编辑室中具有指标的冒险活动-第1部分:问题
- c语言发牌小游戏,大家想想怎么用c实现我们经常玩的斗地主游戏的发牌过程呢?...
- 计算机硬盘不识别u盘启动,快启动U盘启动pe系统无法识别硬盘怎么办?
- java(8) HashMap源码
- 解决CSDN免登陆复制问题
- ojdbc7、8在maven环境中的配置异常及处理
- 计算机算法分析与设计(第五版)
- JAVA 实现《萝卜勇者》游戏
- java线上文件图片资源存储方案,定时清理垃圾文件
- uniapp 图片上传与展示
- GetKeyState函数详解
热门文章
- valuable的用法_关于valuable的用法总结大全
- 上海理工大学本科毕业论文答辩PPT模板
- 华为交换划分vlan以及三层交换机配置原理(超详细)
- 赛马娘全自动刷初始脚本配置指南
- (附源码)springboot基于微信小程序的运动软件前端的设计与实现 毕业设计100932
- CVPR21最佳检测:不再是方方正正的目标检测输出(附源码)
- 企业应如何选择协同办公软件
- mapbox js map监听on off 匹配问题
- dw打开主页index.html,崇文[SEO优化]如何去掉网站主页的index.html_常见问题_知了网络...
- 数据治理的 “独孤九剑”