【首发】根据壁纸修改App主题,它真的来了

简介: 【首发】根据壁纸修改App主题,它真的来了

1、前言

曾经产品经理的奇思妙想,现在终于可以实现了…


2、效果

image.png


效果中,原本是红色壁纸对应的红色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 31
    defaultConfig {
        applicationId "com.yechaoa.materialdesign"
        minSdkVersion 23
        targetSdkVersion 31
        ...
    }
    ...
 }

全性,需要对所有的四大组件(带有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() {


 class App: Application() {
override fun onCreate() {
        super.onCreate()
        // apply dynamic color
        DynamicColors.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


<application
        android: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、壁纸预览

image.png

截图是自带的效果,在右下角可以点击add your wallpaper添加你的壁纸并查看显示效果。


4.3.2、自定义Theme

点击顶部的CUSTOM Tab可以进入自定义页面。

image.png

左边的核心颜色可以自定义修改,并可以添加扩展颜色。

image.png

中间是实时效果,右边是调色板。


在右上角有一个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、最后

写作不易,感谢点赞支持 ^ - ^


目录
相关文章
|
移动开发 安全 前端开发
2021年最新最全APP各大安卓市场应用首发规则
2021年最新最全APP各大安卓市场应用首发规则
2021年最新最全APP各大安卓市场应用首发规则
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
797 1
|
6天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
66 17
|
2天前
|
JSON 供应链 搜索推荐
淘宝APP分类API接口:开发、运用与收益全解析
淘宝APP作为国内领先的购物平台,拥有丰富的商品资源和庞大的用户群体。分类API接口是实现商品分类管理、查询及个性化推荐的关键工具。通过开发和使用该接口,商家可以构建分类树、进行商品查询与搜索、提供个性化推荐,从而提高销售额、增加商品曝光、提升用户体验并降低运营成本。此外,它还能帮助拓展业务范围,满足用户的多样化需求,推动电商业务的发展和创新。
17 5
|
2天前
|
移动开发 安全 搜索推荐
圈子社交系统APP,同城本地圈子论坛开发,让身边的人沟通更加紧密
圈子社交系统APP是一款基于社交网络的移动应用,用户可创建、加入和管理兴趣圈子。主要功能包括:动态分享与交流、实时聊天、会员体系与身份认证、活动策划等。该APP注重个性化定制、社交关系深化、隐私安全及跨平台互联,提供丰富的社交体验。
|
5天前
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
鸿蒙语言开发 几十套鸿蒙ArkTs app毕业设计及课程作业
15 1
|
14天前
|
JSON 缓存 前端开发
HarmonyOS NEXT 5.0鸿蒙开发一套影院APP(附带源码)
本项目基于HarmonyOS NEXT 5.0开发了一款影院应用程序,主要实现了电影和影院信息的展示功能。应用包括首页、电影列表、影院列表等模块。首页包含轮播图与正在热映及即将上映的电影切换显示;电影列表模块通过API获取电影数据并以网格形式展示,用户可以查看电影详情;影院列表则允许用户选择城市后查看对应影院信息,并支持城市选择弹窗。此外,项目中还集成了Axios用于网络请求,并进行了二次封装以简化接口调用流程,同时添加了请求和响应拦截器来处理通用逻辑。整体代码结构清晰,使用了组件化开发方式,便于维护和扩展。 该简介概括了提供的内容,但请注意实际开发中还需考虑UI优化、性能提升等方面的工作。
71 11
|
11天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)