[launch] modify the app theme according to the wallpaper. It really comes

1、 Preface

Once the whim of a product manager , Now it can finally be realized ...

2、 effect

In effect , It was originally the red wallpaper corresponding to the red App The theme , After changing to green wallpaper ,App The theme turns green accordingly .

Simulator demo slightly small card ...

3、 Introduce

This effect mainly uses Material You Dynamic color function in .

3.1、 What is? Material You

Material You

Also known as Material3 or M3, It's the third generation Material Design Design language .

Material You Redefine color as a more personalized experience , Help build excellent and expressive applications .

3.2、 What is dynamic color

Dynamic colors （

Dynamic Color

） yes Material You Key parts of , The color scheme is derived from the user's wallpaper through the dynamic color matching extraction algorithm , And meet the standards of barrier free use , Or a customized personalized color scheme , Then applied to the system UI And Applications , This makes the device more personalized .

3.3、 What is the principle of dynamic color

• First , Extract a source color from the user's wallpaper , And calculate 5 Key colors in , such as primary、Secondary、Tertiary etc. .

• then , Convert each key color to 13 A palette of colors , And each tone will generate a corresponding light color 、 Dark scheme .

• Last , Through the system Token The color scheme and... Will be extracted from the wallpaper App Theme Connect , stay DynamicColorsActivityLifecycleCallbacks Determine whether it needs to be overwritten .

4、 Realization

4.1、 Migrate to M3

4.1.1、 to update Gradle rely on

upgrade

material

Library version to

1.5.0

And above

implementation 'com.google.android.material:material:1.5.0'


4.1.2、 Revised version

modify

compileSdkVersion

and

targetSdkVersion

To

31

And above

android {
 compileSdkVersion 31
 defaultConfig {
 applicationId "com.yechaoa.materialdesign"
 minSdkVersion 23
 targetSdkVersion 31
 ...
 }
 ...
 }


remarks ： stay

Android12

On , To enhance security , All four components need to be （ with intent-filter） add to

android:exported

attribute .

4.1.3、 modify App The theme

take

Theme.AppCompat.*

or

Theme.MaterialComponents.*

  Change it to  

Theme.Material3.*

 <style name=&quot;AppTheme&quot; parent=&quot;Theme.Material3.DayNight.NoActionBar&quot;>
 
 </style>


4.2、 Add dynamic colors

4.2.1、 Apply dynamic colors

class App: Application() {

 override fun onCreate() {
 super.onCreate()

 // apply dynamic color
 DynamicColors.applyToActivitiesIfAvailable(this)
 }
}


stay

Application

The ability to apply dynamic colors in , except applyToActivitiesIfAvailable(@NonNull Application application) Besides methods, there are mainly ：

• applyToActivitiesIfAvailable(@NonNull Application application, @StyleRes int theme)  The second parameter represents the user-defined coverage system theme

• applyIfAvailable(@NonNull Activity activity)  Or some Activity

• applyIfAvailable(@NonNull Activity activity, @StyleRes int theme)  Or just one Activity Cover

• wait

This is directly the whole App All use dynamic colors . It can also be in App Decisions are made in the form of switches .

4.2.2、 Sign up to manifest

adopt

android:name

To register our custom Application

 <application
 android:name=&quot;.App&quot;
 ...
 android:theme=&quot;@style/AppTheme&quot;>
 ...
 </application>


4.2.3、 Use dynamic colors

When we used to use color, it might be

Hard encoding

, Such as this ：

android:background="@color/colorPrimary"


Now the color value of the color is uncertain , Should be changed to

Dynamic access

The way ：

android:background="?attr/colorPrimary"


OK, So far, it can be in Android 12  Let's try the effect of dynamic color .

Author：

yechaoa

4.3、Material Theme Builder

stay

4.2.1

in , We mentioned applyIfAvailable(@NonNull Activity activity, @StyleRes int theme) , You can give only one... Through the second parameter Activity Cover Theme.

There are still many scenes , For example, a special page needs different themes , Another example is on National Day App Your home page must be red .

In fact, the official also considered this scenario , And provides

Material Theme Builder

（Figma&Web） Tools for visual customization .

Here is the main introduction

Material Theme Builder

stay Web Use on .

4.3.1、 Wallpaper Preview

The screenshot is a self-contained effect , In the lower right corner, you can click

add your wallpaper

Add your wallpaper and see how it looks .

4.3.2、 Customize Theme

Click on the top

CUSTOM

 Tab You can enter the custom page .

The core color on the left can be customized , And you can add extended colors .

In the middle is the real-time effect , On the right is the palette .

There is one in the upper right corner

EXPORT

Export button

In addition to being able to apply Android, also

Flutter

and

Web

.

The exported file contains the data of day mode and night mode Color and Theme file , Can directly copy Use... In the project .

4.3.3、Theme Cover

Based on Specification , It's best to add

overlay

Mark , such as ：

 <style name=&quot;AppTheme.Overlay&quot; parent=&quot;ThemeOverlay.Material3.DynamicColors.DayNight&quot;>
 <item name=&quot;colorPrimary&quot;>@color/overlay_colorPrimary</item>
 ...
 </style>


Code application ：

 DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme.Overlay)


You can also add a switch , Users can switch back and forth between dynamic colors and custom colors .

4.4、 Whether dynamic colors are supported

be based on Android The open source , Maybe not every manufacturer's Android12 All devices support dynamic colors .

So the official also provided Api Judge ：

 @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();
 }


So far , The following manufacturers are ：

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

in general , This function is still very useful nice Of , You can make your App stay Android12 More personalized and expressive .

But you can still identify a lot of costs , such as targetSdkVersion Upgrade to 31,Theme Migrate to Material3, And the whole package return after upgrading .

therefore , Personal advice , For old projects, it is best to apply for special projects to do , In fact, it is more recommended to try new projects .

6、Github

https://github.com/yechaoa/MaterialDesign

7、 file

• Migrating to Material Design 3

• Material Design 3

• Material Theme Builder

• DynamicColors

8、 Last

Writing is not easy to , Thank you for your support  ^ - ^

My blog will be synchronized to tencent cloud + Community , Invite everyone to join us ：https://cloud.tencent.com/developer/support-plan?invite_code=pyfutl3ynk2b