Huawei Themes Engine

With Huawei Themes Engine, you can use specific XML syntax to describe lock screens, develop various UIs as required, and change the UI style, animation, and even interaction mode by changing the skin. The Themes Engine framework supports dynamic frame rates. Therefore, the screen does not need to be continuously rendered at a fixed frame rate. When there is no animation or update, the rendering stops and only a few resources are occupied. Slow animations are rendered at a low frame rate, whereas quick animations are rendered at the full speed. During full speed rendering, the frame rate can reach up to 60 frames per second in full screen mode. You can control the frame rate appropriately to make your lock screen cool and power-saving.
In a word, Themes Engine can create dynamic effects that make lock screens more interactive and entertaining, and helps reduce development cost.

Fluid Animation

To implement a fluid animation, you need to add the FluidsView tag, and set relevant parameters such as the background, color, gravity ratio, and viscosity. The fluid animation can be applied to either lock screens or home screens. We recommend that you create a fluid animation using the developer mode of Theme Studio.

In this codelab, you will create a dynamic theme that uses the fluid animation and complies with specifications, and apply the theme to your phone.

In this codelab, you will:

Hardware Requirements

Software Requirements

Required Knowledge

Capability of creating lock screens using Theme Studio

Key Points

Development Procedure

Step 1: Import a theme package.


Start Theme Studio. Click Themes. Click Import to import the prepared fluid animation theme package shaking milk.hwt.

Step 2: Switch to the developer mode.
Choose Unlock > Dynamic. In the displayed dialog box, click Switch to enter the developer mode.

Step 3: Edit the script for the fluid animation to achieve different dynamic effects.

  1. Change the color of the fluid animation.
    In the sample script, change the value of color from argb(255,255,255,255) to argb(255,255,200,0) and click Save.
  2. Change the viscosity of the fluid animation.
    In the sample script, change the value of viscosity from 0.1 to 0.5 and click Save.
    The value of viscosity ranges from 0 to 1.
  3. Change the value of radius in CircleShape.
    In the sample script, change the value of radius in CircleShape from 1.5 to 0.8 and click Save.

Step 4: Synchronize the theme to your phone to preview its effect.

  1. Connect your phone to the laptop.
    Connect your phone to the laptop. Go to Settings > About phone on your phone, tap the Build number area multiple times to enable the developer mode. Then, go to Settings > System & updates > Developer options, and enable USB debugging.
  2. Synchronize the theme.
    Click Sync in Theme Studio to synchronize the created theme to the Themes app on your phone. A success message will be displayed if the synchronization is successful.
  3. View the effect.
    Open the Themes app, go to Me > Themes, find the theme you have created, and click Apply to view the dynamic effect.
Step 5: Export the theme.
  1. Check and edit the preview image.
    If no errors are found, click Export in Theme Studio. Check and edit the preview image if required. Then, click Next.
  2. Enter required theme information and export the theme package.
    Enter and verify the theme information, click Export, specify a path for saving the theme, and click Save.
  3. The theme is exported.

Congratulations! You have successfully completed this codelab and learned how to develop a dynamic theme using Theme Studio.

 Code copied