In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Themes

[Theme tutorials] How to Design MIUI Themes For MIUI 10: Learn the easy way here

2019-05-06 15:14:35
7012 2
Hello Mi Fans!
Everyone starts somewhere, and for our all new designers stepping into the world of MIUI Theme Designing, we have created the below small easy tutorial to follow and come up with their first every MIUI theme for MIUI 10.

Prerequisites:
  • Xiaomi Phone with 1080p resolution with MIUI 10 installed (Must).
  • Latest Theme Editors.
  • Connect PC to Phone via USB cable.

Steps for PC to Phone connection:
  • Enable Developer options: Open “Settings”—About Phone –Click on MIUI version (7 Times)
  • Enable USB Debugging: “Settings” --“More”--“Developer Options” -- "USB Debugging”

Download Latest Theme Editors:

Additional Tools:



Basic Introduction:
MIUI Theme folder consists of a folder ending with “MTZ” package. There are different packages in the folder which include different functioning parts of the theme
  • com.android.contacts- contact page with dialer
  • com.android.mms-SMS app
  • com.android.systemui-notification bar with multitasking background
  • com.android.settings-settings pages
  • com.miui.Home desktop
  • framework-miui-res:  miui global
  • framework-res: android global icons
  • icon, wallpaper, Mi wallpaper, live wallpaper (changeable via maml frame codes)
  • lockscreen- lockscreen  (changeable via maml frame codes)
  • clock_2x4 desktop 2*4 clock  (changeable via maml frame codes)
  • clock_3x4 desktop 3*4 clock  (changeable via maml frame codes)
  • description.xml-description file (including subject name, version number and other information) created automatically, not necessary to modify



Other Good to have features:
1. Maml Variety frame part needs code implementation: Maml tutorial
2. desktop clock 2x4, 3x4, refers to the icon area occupied by the clock, a row of 4 app icons, a total of 2 rows, that is 2x4 clock area;  This is viewed differently in different models,  you should try to avoid using absolute parameters to avoid issues.
3. desktop dynamic icons are included in the icon module
4. wallpaper size:  recommended to use 1080*2160 size, you can also use 16:9 or 18:9 resolution. With the new variety of models, the current screen size is 1080*1920, 1080*2040, 1080*2160, 1080*2248, 1080*2340, etc. (If the wallpaper size does not match the screen, it will be enlarged or reduced to fit the screen, which might not look good.)
5. icon size:  The latest development version has used 168*168 size icon, it is recommended to use the same size.  

Possible Problems you might face:

WINDOWS
After connecting the phone, if you open the editor for the first time or create a new theme, you need to wait a little time, If you get this error: "Import failed, unable to synchronize modules"
troubleshooting steps:
  • Check if the phone is a development version, and if USB debugging is turned on,
        Checking steps: System Settings - All Settings - Developer Options - USB debugging (on),
        And if the phone has a lock screen password, please unlock it when importing.
  • In USB options: select “Transfer File (MTP)” or unplug the USB and reconnect.
  • Open the task manager to see if there are multiple adb processes, find and close them. It is recommended to uninstall or close other processes that use adb.
  • Click "Repair adb" in the theme editor menu (available only under Windows)
  • replace the USB cable and check

MAC
  • First, install the MAC version of the Java environment, and then perform the steps to debug the Android phone under the MAC.
  • After the mobile phone is connected to the MAC, in the “System Report” in “About This Machine”, the query “ Vendor ID ” under “ USB ”.
  • Then under "Terminal", type: echo " Vendor ID "  ~/.android/adb_usb.ini
  • Note: The Vendor ID (vendor ID) here fills in the ID just queried.
  • Such as Xiaomi 4 model input: echo 0×2717  ~/.android/adb_usb.ini
  • After completing the above steps, search for the file in the theme editor:  run- mac.command and open it.


Refer these links for more information:


If you face any issue, please let us know in the comments below.

Rate

Number of participants 1 Experience +5 Pack Reason

View Rating Log

2019-05-06 15:14:35
Favorites26 RateRate
Well detailed Guide1
2019-05-13 22:52:43
Thanks for sharing this tutorial with us :)
2019-05-14 15:01:52
please sign in to reply.
Sign In Sign Up

wrony1119

Moderator

MIUI 8
Prisma
India 2nd year
Mi Max
Power At Last
AP2 Livestream
100 threads in a Month
2016 Diwali with Mi
3 Days Check-In
7 Days Check-In
21 Days Check-In
Shake!!Shake!!
2016 Christmas
Mi Explorers
App Review
Resources Star
Resources guru
Fitness Guru
June-100 replies in a month
Aug-100 replies in a month
Sep-100 replies in a month
Oct-100 replies in a month
Nov-100 replies in a month
Dec-100 replies in a month
100 ответов в декабре
1st Anniversary
Columnist
71st Independence Day
My Poster My Life
MIUI 7th Anniversary
2 million registered members
Newbie Member
Diwali
Twitter Medal
New Home Medal
Mi Apps
2018 New Year Medal
ThrowBackWithMiCommunity
Mi Community Updater
The Motivator
Golden Mi Bunny
MIUI Subscriber
MIUI 8th Anniversary
Ringtones Mania
App Review Team
10 Million Downloads
2019
Throwback With Mi 2018
Xiaomi's 9th Birthday
9 Years of MIUI
MIUI 11

Read moreGet new
Copyright©2016-2019 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list