Monthly Archives: November 2015

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.

Online Theme Editor Guide

Prerequisites for developing a theme online 

  • Registered Account on designer.xiaomi.com .
  • Working Internet Connection.
  • Design Ideas and Files (Like:wallpaper, Icons etc.)

You are ready to go.

Step 1:-Go to online web tool theme.mi.com/editor onlinedocumentation_1

  • Click on Get Started Button.

Step 2:-Login in your mi account which has already got the designer permissions. onlinedocumentation_log-in

  • See how to apply designer permissions.

Step 3:-  After Login you will get Editor Home Page.

onlinedocumentation_2

  • Click On Create a Theme (For Create New Theme)
  • Click MIUI Theme Account (For Your Theme Status Uploaded Earlier )

Step 4 :-  Now You are in the Theme Tool Editor

onlinedocumentation_3

Lock Screen Template

Select one of three Lock (Different unlocking Patterns).

5-point unlocker

  • Four app unlock (Home,Call,Messaging,Camera)
  • Music player on lockscreen in built.
  • Multifunction at same screen 
  • Unlock MethodYou need to drag circle which is in center to the app icon which you wants to unlock.

3-swipe unlocker

  • Three app unlock (Home,Camera,Call).
  • You can put any Quote / Notice on Lockscreen (Text).
  • Unlock Method:Swipe up from desired app icon for unlock/open app.

Slide right to unlock

  • Very simple unlocker style.
  • Unlock Method:Simply Slide the lock button on screen and follow the given path.

Select Any Unlocker style and click Next buttononlinedocumentation-next

onlinedocumentation_LockscreenSelect

Step 5:-  Edit Lockscreen

1.  Lock screen Wallpaper

onlinedocumentation_4

  • Click on Change button. 
  • Upload your Lockscreen wallpaper.
  • Dimension should be 720×1280 px & JPG format
  • Click next button.

2.  Add lock screen text (Optional if you don’t want any text you can left it blank) onlinedocumentation_5 3.  Now upload unlocker icons & mask

  • Mask is a layer on unlocker(Optional,can put blank png)

onlinedocumentation_6

Step 6:- Home screen wallpaper

onlinedocumentation_7

Click on Change and Upload Wallpaper

  • Wallpaper Dimension should be 1440x1280px.
  • Format should be JPG. 

Wait for upload and click next.

Step 7:-  Home screen Icons

onlinedocumentation_8

  Click on edit button visible bellow the icons and upload your icon.

  • There are 32 icons to be changed.
  • Each icon format is .png.
  • Dimension should be  192x192px (not more neither less).
  • You cannot skip any icons (should change all icons ).

After finishing all  click on next button.

Step 8 :- Other Icons

onlinedocumentation_9

Change Icons for downloaded apps.Click on edit button visible bellow the icons and upload your icon.

  • There are 4 type of icons to be change.
  • Icon background ( cover visible background of app ).
  • Icon pattern ( pattern for downloaded app icon).
  • Icon mask (visible area for user (black color filled area is only visible ) ).
  • Folder background (this will be the background for icon folder).

onlinedocumentation_other-icons2

Step 9:- System UI colors

onlinedocumentation_10

Change UI colors 

  • Choose the foreground and background colors and images that are displayed.
  • Change will reflect in (notification shade, Phone, and Messaging apps).
  • Chose colors from color picker or you can directly enter color value in the textbox.
  • 1st Color will reflect in Navigation bar (top and bottom bar used for navigation) .
  • 2nd color will reflect in elements & text which will appear on Navigation bar.

Step 10 :- System UI Images

onlinedocumentation_11

Change UI  Images

  • Upload the Top-bar and Bottom-bar images which will be reflect inside apps.
  • Upload image will be in .png format and dimension should be exact.
  • Here background image will reflect in lots of places in theme so color of background should be compatible with font colors and other UI components.

After finishing all the uploads click  next button.

Step 11 :- Dialer UI

onlinedocumentation_13

Dialer UI Change

  • Dialer Background (720x484px & .png format).
  • Bottom Bar image (720x160px & .png format ).
  • Dial button Normal/Pressed both condition (388x162px). 

Click on upload button for each image and upload your image.

After finishing all the uploads click  next button.

Step 12 :- Messaging UI

Here you need to change only one image which is edit button (compose).

Dimension should be 80x90px & .png format.

*Note :- better if you will not give any background to button image like in above image.

Step 13 :- Notification Shade

onlinedocumentation_15

Here you will Change

  • Toggels color using color picker or can directly enter value in textbox. 
  • Upload  notification shade background (720x1060px & .png format).

After finishing all the uploads click  next button   .

Here You are done with all theme development . Now check all the changes you made by clicking

On icons visible on left side of tool editor and confirm your theme design. 

*Check all the  dots under left side icons of tool  are Blue or not 

Step 14 :- Final Publish Step

onlinedocumentation_16

 Fill up all the fields.

  1. Theme Name.
  2. Designer Name (Your name / Your group name).
  3. Description of your theme based on your theme name or theme idea.

Congratulations You are done !!!!!!!!

Here you can see Preview of your theme by clicking on Save & Preview button

You can save your Theme .mtz file by clicking Download beta button.

When you done with all of these you can submit your theme for review

By clicking on button Submit for review button.

Theme package introduction

The theme package is a file with extension .MTZ, its nothing but the MIUI Theme Zip.

To open or create a new MTZ file you need MIUI theme editor tool
(Download here: http://en.miui.com/thread-37054-1-1.html
)

Basic modules in a MIUI theme

clock_2x4 (Clock Widget)

com.android.contacts  (Contacts and Dialer)

com.android.fileexplorer (File Explorer)

com.android.mms (Messaging)

com.android.providers.downloads.ui  (Downloads)

com.android.settings  (Settings)

com.android.systemui (Notifications and Recent tasks manager)

com.android.updater (Updater)

com.miui.antispam (Ant spam or do not disturb)

com.miui.backup (Backup)

com.miui.home (Home screen)

com.wali.miui.networkassistant (Network Flow)

framework-miui-res (MIUI framework)

framework-res (Android framework)

icons (Icons)

Files from MIUI framework are mainly used for storing file various interfaces of UI will be invoked to something, such as a button, pop, the progress bar, each will be used small icon, and so on, such as the current module did not want to modify the material, you can go to find a global.

Optional Theme Modules:

Miwallpaper (Dynamic Wallpaper)

icons\fancy_icons (Dynamic Icons)

com.miui.home.freestyle (Free Desktop)

Preparation for theme development

Before you start with developing a theme you need to do some preparation.

  1. You should have a MIUI device equipped with at least 720P or 1080P screen resolution.
    ( Devices equipped with 720P or 1080P are preferred because it will help you develop a theme without any bugs and with better adaptation on both resolutions)
  2. MIUI system needs to be MIUI V6 version or above, You can download and also find tutorial for flashing  latest version of MIUI here :  http://en.miui.com/download.html 
  3. Download the MIUI theme editor for Windows PC here : http://en.miui.com/thread-37054-1-1.html 
  4. Download and install ‘Mi PC Suit’ : http://pcsuite.mi.com/  (Available only for windows)
  5. Activate developer mode in your phone. Go to settings- about phone- click on MIUI version for few times to unlock developer options. After that go to Additional settings-Developer options-USB debugging mode and make sure that the USB debugging mode is on in developer settings.  
  6. Now connect the phone to Mi PC suite and the computer will automatically install the drivers, then you can connect on a Theme Editor.
  7. Other software tools: Photoshop, NOTEPAD ++.

NOTE:

1] Using it on MAC: 

First install JAVA on your mac
(Download here: http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html )

Then install Android file transfer(Download here:  https://www.android.com/filetransfer/)

Download the theme editor and run.

2] “Import failed”  troubleshooting steps:

  1. First check whether the USB debugging mode is on, steps to check:  settings – additional settings – developer options – USB debugging mode.
  2. Open Mi PC suite and check if your phone is connected properly.
  3. Open Task Manager to see if there are more than one ADB processes running, find and close it. Recommended to uninstall or disable other process of adb.
  4. In the Theme Editor menu click on “Fix adb” (windows only)
  5. Try different USB or replace the cable.

Develop Notes(Beginngers)

Hello Everyone,

For your convenience, we are trying to summarize some of the common problems you may face while developing a theme, and we’ll continue to update this QA.Hope this article will help you.

Q1: What are the prerequisites for developing a theme?

Q.2:  I’ve heard that Xiaomi developed a tool where we can develop MIUI themes at pixel level,where can I download it?

  • Advanced version: MIUI theme editor tool supports developing icons, Home Screen, Dialer interface, contacts, SMS, Notifications and toggles, Settings and other system interface.
    You can refer this forum link to download MIUI theme editor.
  • Basic Edition: This is an online theme editor that supports three pre-sets of lock screen templates, icons, dialer interface, contacts, notification and toggles, SMS
    Link for online theme editor tool

Q.4: How to troubleshoot “import failed” error?

  • This error occurs mainly due to ADB drivers, find solution here.

Design Notes (Beginners)

Introduction to the lock screen

MIUI “dynamic lockscreen” technology enables changing the lock screen style, you don’t have to worry about your ideas for lock screen pattern, and nothing can limit your imagination.

In addition, lock screen also supports direct access to different applications after unlocking like Dialer, text messaging, camera, browser, etc., and even music playback controls on the lock screen.
So it’s completely your choice whether to design a simple lock screen or add more advanced features.

1

When designing the lock screen, you need to pay attention to:

  1. There must be an effective and user friendly method to unlock, such as a slide unlock.
  2. There must be a clock on the lock screen (Analog or Digital).
  3. The lock screen size is: 1080 * 1920 pixels (width * height).

Introduction to the Home screen:

Home screen consists of two basic components namely wallpaper and icons.
Wallpaper Requirements:

  • lock screen wallpaper size: 1080 * 1920 pixels (width * height)
  • Home screen wallpaper size: 2160 * 1920 pixels (width * height)2

Icons and Clock widget:

  1. Clock Widget: maximum 564 pixels height, and maximum 996 pixels width. It can be arbitrarily designed within this region.
  2. Icon design:
    Size of icons: 192 * 192 pixels (width * height).

Icons listed below are the default must design icons, apart from these icons you can also design optional icons for any third party apps like Whatsapp,Wechat etc.

1.pic_hd副本

Introduction to system interface:

A theme must include following system interface: 

Dialer:
 5

Messaging:

6

Notification Panel:

7

Recent tasks manager:

9

 Contacts:

10

Settings:

11