Dynamic lock screen tutorial

Dynamic lock screen, the production is divided into five steps:

  1. Design& Slicing or maping (tacking separate images from project) project
  2. The establishment of the Project
  3. Write the manifest (lock screen script)
  4. Support personalization (optional)
  5. Test..

1 Design & Map

To be able to in a variety of resolutions have perfect display device, it is recommended respectively 480P, 720P, 1080P resolution and other equipment cutting plans.

2. Establish project

Under the theme editor generates the project directory, create lockscreen / directory(Folder) , all files related to the lock screen are placed in this directory (Folder). File Structure lockscreen / directory as follows, which, in addition manifest.xml (lock screen script) is mandatory, and other documents are optional.

lockscreen /
| - advance /
| – manifest.xml                (lock screen script /lock screen code )
| – default resolution (depends on your code in manifest.xml) image file
| – Sound files
| –  sw480 /                        (pictures are placed in the directory is used by 480P device)
| –  sw720 /                        (pictures are placed in the directory is used by 720P device)
| –  sw1080 /                      (pictures are placed in the directory is used by 1080P device)
| –  strings /                       (if you want let lock screen supports multi-language, add a string        where the appropriate language)
| – strings.xml                        (default language)
| – strings_en.xml                  (English)
| – strings_zh_TW.xml          (Traditional Chinese – Taiwan)
| – theme_values.xml            (theme relevant configuration write here)

1) A description of the multi ratio (screen width) adaptation

Multi resolution adaptation is automatically completed by system, specifically: In lock screen  application, the system will go to advance / to find the appropriate resolution of the picture (swXXX / or the default resource) to display on device, for ex. We have 720P device so system will look for sw720 / Corresponding If there is no resolution of the Directory, the system Will Use the resolution with the MOST Close to the resolution of the Resources, for example : you have sw720, sw1080 Two Directory for 800P device , 800P and Because 720P closest to the picture, system will use 720P in the 800P device, 500P and 480P (default resolution) is the closest, so it will use the default picture resources (advance / directory), will be stretched to fit 500P device.

// TODO screenWidth, extraResourcesScreenWidth description

2)Multi-language support

Some words are not the same in different countries or regions, so you may need to support multiple languages.

For Example: the China “紧急呼叫”(Emergency Call)  in English is “Emergency Call”, in Taiwan is the “緊急撥號.” Multi Language Steps:

A.Create strings / directory(Folder), create strings.xml, strings_en.xml, strings_zh_TW.xml

B.Edit the file

strings.xml (default) :

<strings>
<string name = “EMERGENCY_CALL” value = “Emergency Call” />
</strings>

strings_en.xml (English):

<strings>
<string name = “EMERGENCY_CALL” value = “Emergency Call” />
</strings>

strings_zh_TW.xml (Tiwan) :

<strings>
<string name = “EMERGENCY_CALL” value = “Emergency dial” />
</strings>

C.Use @emergency_call to refer to the string in manifest.xml.

3)Theme_values.xml

Configuration in the lock screen mode, the status bar shows which information. File demo is as follows:

<MIUI_Theme_Values>

<! — whether the status bar displays the battery. – >

Name= config_show_status_bar_battery_for_keyguard “<bool” >true</bool>

<! — whether the status bar displays the operator – >

Name= config_show_status_bar_carrier_for_keyguard “<bool” >true</bool>

<! — whether the status bar displays the date. – >

Name= config_show_status_bar_date_for_keyguard “<bool” >true</bool>

<! — whether the status bar displays time. – >

Name= config_show_status_bar_time_for_keyguard “<bool” >false</bool>

<! — if the status bar is displayed. ->

Name= config_show_status_bar_notification_for_keyguard “<bool” >false</bool>

<! — whether the status bar displays the status TODO – >

Name= config_show_status_bar_status_for_keyguard “<bool” >false</bool>

</MIUI_Theme_Values>

3. Write a Manifest

//TODO

4. Supports personalization (optional)

//TODO

5. Test

Using the theme editor, import the theme into the phone, you can preview lock screen effect.