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] MIUI Theme Editor Tutorial | 7 easy steps to create MIUI 11 themes

2020-02-25 14:31:48
68236 151

Hola Mi Fans!
We’ve prepared something you all were eagerly demanding. Designers design in their way, but MIUI is known for its emancipation of Customization. Hence, all our Mi Fans can design & develop themes as per their own choice. But, a question arises - we don’t know how to use the MIUI Theme Editor!? To solve this query, the team has prepared a detailed tutorial for you to learn to make themes easily.

Pre-requisites
  • Download and Install MIUI Theme Editor | Full Tutorial Here: Click here to download
  • The Editor works on both Windows and Mac.
  • Java Development Kit (JDK) is needed to be installed on Mac before using it on the system.
  • Extract the zip file and run the application directly, there is no need to install it.
  • Keep your computer updated with the latest software to ensure the smooth running of the Editor.

Taking no more time let’s start with how to design your theme.   This thread will walk you through the process of theme making for MIUI 11 Themes in 7 steps.   

Step 1: Start


Open theme editor and choose New ​ or choose to ​Open​ a theme that you might have​ previously worked on.
Step 2: Introduction


  • If you open a new​ theme, make sure to choose a suitable theme name.​
  • Check the V11​ box for the UI version. (very important).​
  • Save the theme in a suitable path for future modifications.
  • Choose your Designer name under the ‘Theme Designer’ section to tag all your themes under the same nametag. The name tag will be visible in the app.

Step 3: (The Lockscreen)

  
Static Wallpapers:  
  • If you have decided to use a static wallpaper, upload the appropriate copyright-free picture to the highlighted area in 1080x2340​ resolution.​
  • Make sure that the wallpaper image is not pixelated.


Dynamic Wallpapers:  
  • If you choose to make a dynamic wallpaper, there are 5​ options to choose from as​ shown in the image.
  • Whichever option you choose will be shown on the top right corner​ of the MIUI Theme​ Editor.
  • Once you choose that option, the editor will display the option to edit the Image​ and the​ Parameters.​
  • Please remember to delete the modules you do not require from the bottom right part of the MIUI Theme Editor.

Step 4: Modifying the Lockscreen
There are 8 available elements to modify the Lockscreen.


The Frame: Choose from 4 different frame modules that include the Swipe Up and Swipe Right​ options.  


The Clock: Choose from 5 clock elements, wherein, every element of the clock can be​ modified with well-designed png files in the image section and moved to the desired place in the parameter section.  


The Notifications: The notification panel on the lock screen can also be modified by replacing​ custom-designed PNG files.  




The Music: There are 7 different music widgets built into the editor which can be modified​ according to the designers' creative liking.  




The Weather: From Analog to Digital Weather widgets, there are 5 preset weather modules for​ the designer to work with and modify.  



The Calendar: If the designer chooses to add a calendar module to the lock screen there are 2​ options to add calendars, for which only the parameter can be modified.  



The Charge Module: There are 7 different charge modules built into the theme editor. The​ images and the parameters can be changed according to the designer’s creativity.  



The Extras: The theme can be further modified by using, extra modules like Marquee lamp and​ App Icons on Lockscreen to give it a unique touch.  

Step 5: Modifying the Homescreen  
Like the Lockscreen, the Homescreen also has Static Wallpapers and Dynamic wallpapers, and in addition to that, the Icons on the UI can also be designed and modified.  


  • The resolution for the static wallpaper will be the same as the lock screen.
  • The dynamic wallpaper can be modified only with particles as of now, more features will be added in later versions.
  • The image and the parameters of the dynamic wallpapers can be modified accordingly.


The Desk Clock: The main clock on the Lockscreen has 8 different widget modules to choose​         from. Ranging from Analog to Digital. Each element in the clock module can be designed according to the designer’s creativity.  

Step 6: Modifying the Icons  
The icon module consists of two types of the icon. Dynamic and Static.  


Dynamic Icons:  Dynamic icons include Calendar, Weather and Clock modules that change​ actively daily. There are many options available to choose in the following 3 modules. They can also be modified using the image and parameter editors.  

Note:​ It is very important to add these modules, otherwise icons like Calendar/Clock/Weather will use the app default icon which won't change according to date/time/weather change.  

Static Icons: Static icons are divided into Common Icons, Other Icons, and Filter Icons.​         
  • Each icon can be replaced with a custom made PNG image that is suitable for that icon.
  • The icons have to upload in 720P and 1080P formats.
  • The icons have to maintain a 1:1 ratio. (192x192 preferred)
  • Masks can be used for icons that are not fully designed.

Step 7: Deep Theming  

7.1: Home

In this section, the theme layout can be further modified. Small elements on the home screen can be modified to make the theme look good.  
Light template & Dark template:  
  • A theme can be used only in one mode, dark or light.
  • If the theme is light, when the user phone turns to dark mode, the theme used will reset to default.
  • If the theme is dark, when the user phone turns to light mode, the theme used will reset to default.
  • Delete the ‘Home’ module to change from light to dark templates.


7.2: Phone  
1. Contact GlobalToolbar
- Search Tab
- Settings List
2. Contact
- Contact List
- Contact Details
- New Contact
- Bottom-Up
3. Dialpad
- Single SIM Dialpad
- Dual SIM Dialpad


There are 9 elements that can be modified in the Phone module.  
  • All images should be in (.9.PNG) for them to work.
  • The alignment of the PNGs can be corrected in Dimensions.
  • The press animation can be chosen through Boolean properties.
  • The color of the fonts can be corrected through Color properties.  


7.3: Messaging  
Apart from the search bars, the message module can be further modified as follows.  
  •   Homepage
  •   Conversation Windows
  •   Conversation buttons
  •   Telecom Carrier
  •   New Message
  •   Favorites
  •   Quick Reply


  •   All images should be in (.9.PNG) for them to work.
  •   The alignment of the PNGs can be corrected in Dimensions.
  •   The press animation can be chosen through Boolean properties.
  •   The color of the fonts can be corrected through Color properties.

7.4: Settings  
Apart from the search bars, the settings module can be further modified as follows.
  •   Home page
  •   Wi-Fi
  •   About phone
  •   Full-screen display
  •   Sound & Vibration
  •   Text size
  •   Dark Mode

  • All images should be in (.9.PNG) for them to work.
  • The alignment of the PNGs can be corrected in Dimensions.
  • The press animation can be chosen through Boolean properties.
  • The color of the fonts can be corrected through Color properties.

7.5: Notification Bar  
  •   Homepage
  •   WiFi/ Bluetooth
  •   Mobile Data
  •   Recent
  •   Full-Screen Display

  •   All images should be in (.9.PNG) for them to work.
  •   The alignment of the PNGs can be corrected in Dimensions.
  •   The press animation can be chosen through Boolean properties.
  •   The color of the fonts can be corrected through Color properties.

That's all for today

Download the Full Tutorial
File: MIUI Theme Editor Guidelines.pdf (1.83 MB, Downloads: 630)

Download Theme Editor

Start your Theme designing journey here :

Useful Links :

Rate

Number of participants 2 Experience +17 Pack Reason

View Rating Log

2020-02-25 14:31:48
Favorites388 RateRate

Master Bunny

PRASAD89 | from app

#1

Nice update and sharing
2020-02-25 22:53:02
G.Prasad.

Rookie Bunny

5175058019 | from Redmi Note 5 Pro

#2

my note 5 Pro software not update work any rickshaw any request please response mobile number 888 50 666 19
2020-02-25 23:51:33

Rookie Bunny

5175058019 | from Redmi Note 5 Pro

#3

not update your system
2020-02-25 23:52:19
It's great tutorial
2020-02-26 00:10:42
Thanks for sharing!
2020-02-26 00:13:49

Master Bunny

deepak_soni_91 | from Redmi Note 5

#6

duniya bar ka laag hai nhi chaiye pehle up-to-date updates do Redmi note 5 😠
2020-02-26 00:19:25

Master Bunny

deepak_soni_91 | from Redmi Note 5

#7

5175058019
my note 5 Pro software not update work any rickshaw any request please response mobile number 888 50 666 19

go to service centre bro kyu ki waha jaao ge tuh tumhaari problm solved hogi
2020-02-26 00:20:03

Pro Bunny

Alka2 | from Redmi Note 7S

#8

nice
2020-02-26 00:26:11

Master Bunny

ABHISHEK 1718992580 | from Redmi 4

#9

Thanks for the information
2020-02-26 00:37:39

Master Bunny

rajenkondaveeti | from Redmi 4

#10

Thanks for the explanation
2020-02-26 00:39:35
please sign in to reply.
Sign In Sign Up

Manvesh Kajale

Moderator

  • Followers

    6954

  • Threads

    120

  • Replies

    821

  • Points

    13625

3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
Aug-100 replies in a month
1st Anniversary
Columnist
71st Independence Day
My Poster My Life
MIUI 9
2 million registered members
Newbie Member
Diwali
2018 New Year Medal
2017 Xiaomi Annual Bill
MIUI Beta Tester
Color Your Planet
Color Our Planet Game
The Motivator
MIUI 10
Golden Mi Bunny
MIUI Subscriber
MIUI 8th Anniversary
Eid Mubarak
Ringtones Mania
10 Million Downloads
Message in a bottle
2019
Throwback With Mi 2018
Xiaomi's 9th Birthday
9 Years of MIUI
MIUI 11
Dark Mode
Mi-stery Box Game
2020
We Help!
#AnswerMi Vol 1

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