Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

[Guide] MIUI Theme Editor user Guide in detail

OP hadron

23rd February 2013, 04:07 AM   |  #1  
OP Member
Thanks Meter: 42
 
56 posts
Join Date:Joined: Jan 2009
This is a user guide for MIUI Latest Theme Editor Released on 2013.1.31
Some times you really like a theme but you don't like some parts of it then you can edit it very easily using MIUI theme editor or want to creat your own theme from scratch then this guide is for you.

For always upto date guide check this

Things you need
MIUI Theme Editor.
Working ADB Drivers on your PC.
Android Phone with MIUI on it.
Image Editor (GIMP,Photshop etc )
NinePatchEditor (Optional)

Aditional Material
V4_Templete


Setting up English Language.
Download the Theme Editor and Run it.
first time it may have the interface in chinese. So here is how to change it

Guide Screenshot 1


Creating an New theme
Go to Fle > New Theme
and you will see the window below. In put the name of your theme and save it.

Guide Screenshot 2

Then you will see the following window. ( Description in screen shot )

Guide Screenshot 3


Buttons

All the buttons are self explanatory but i will add some description where needed

Save : This is to save the changes made to the projects.
Generate full MTZ : This is used to compress and make the mtz file of the theme project to be used in phone
Apply Recent Changes : For this and next option to work your phone must be connected to PC. this option apply the recent theme changes to your connected phone (Useful when testing a smal change).
Full apply: This option apply the Full theme to your Phone.
Reload: This option will discard unsaved changes and will load the theme from theme directory (added PNG's Will stay there, will be explained later)
Setting: Have only option to copress the font if you want.(Have'nt used it).

Differents Tabs and their Functions
Now Some information about diffrent Tabs and options on them.
Description Tab: Already explained in screen shot shown above.
Icons Tab: This tab is used to add icons to theme. When you click on the icon tab it have three further tabs, System icons, Default theme icons and Others. Before you proceed further Click on Sync button at the bottom of the icons. (Your phone must be connected in debug mode to the PC) This sync option will get all default icons from your phone including 3rd party apps. Now to change any Icons check below.

Guide Screenshot 4


on the default theme icons tab there are some default 3rd party icons avialable in theme editor and others tab have the icons repalcement option for apps installed in your phone. procedure is same for all three tabs
Note. you dont need to rename your icon, Progran will do it for you! just drop it to the proper place.

Thats it if you just want to creat new icon pack. Just click on create full MTZ button and copy the mtz file to your phone and import it to theme manager or just click complete apply to your theme. But if you want to theme your Apps and change text colors then read on

Modules tab: This tab is the most important tab for themeing MIUI.

Guide Screenshot 5


Creating New App Module

Here is how to create the App's theme module.

Guide Screenshot 6


As an example I have selected the Contacts module (only one module at a time). you will see screen shown below , if different then click "change edit mode" button.

Guide Screenshot 7


Now click on the first item in the folder view and follow the screen shot. again names of your png's doesnt matter. you have to go through all the view and find the red boxes, click on it and repalce the png's you want to change. If you want to keep the system default png just leave it blanck.

Guide Screenshot 8


For modifying PNG's you can use the V4_templete (link at top) png's as a refrence. you can edit them to your requirements and then use them.

Changing the text Color
To change the text colors of the module items, click on the "change edit mode" button while contacts module is stille open. see bellow.

Guide Screenshot 9

Guide Screenshot 10


Do the same procedure for all the Modules and PNG's and color's in it. Framework-miui-res and Framework-res are most important modules. Changes in Framework-miui-res effects all the MIUI applications, especially colors and Changes in Framework-res module can effect both MIUI apps and any other 3rd party app so be careful !!!! you might get white on white color problem.
Note: You dont need to recompile your 9.png's. just add contents and strech borders using the "NinePatchEditor" or sdk Draw9Tool. and thats it put it in the theme and compress the theme and it will do the rest.

Testing

Now its time to test your theme before release/share. You should test all the MIUI apps for proper theming as well as 3rd party apps for color problems. If you find any problem then just reopen or drag drop you theme directory on Theme Editor to reopen /edit your theme.

Credits:
Official MIUI Team for Theme Editor Tool and V4 Templete
NinePatchEditor Dont know the Auther (Will add when I know)

Questions and Suggestions are Welcome
Last edited by hadron; 25th August 2013 at 08:49 AM. Reason: Link to guide at MIUI official forum added
The Following 12 Users Say Thank You to hadron For This Useful Post: [ View ]
23rd February 2013, 02:48 PM   |  #2  
iximages's Avatar
Senior Member
Flag Dublin, Belfast, California
Thanks Meter: 303
 
452 posts
Join Date:Joined: Aug 2011
Donate to Me
More
Sooooo many thanks mate!!!!
24th February 2013, 12:20 PM   |  #3  
Ivant 1968's Avatar
Senior Member
Minsk
Thanks Meter: 1,337
 
215 posts
Join Date:Joined: Mar 2012
Super!
25th February 2013, 06:42 AM   |  #4  
OP Member
Thanks Meter: 42
 
56 posts
Join Date:Joined: Jan 2009
Re: [Guide] MIUI Theme Editor user Guide in detail
Glad you guys like it

hadron

Sent from my Xiaomi M2
The Following User Says Thank You to hadron For This Useful Post: [ View ]
28th February 2013, 11:38 AM   |  #5  
OP Member
Thanks Meter: 42
 
56 posts
Join Date:Joined: Jan 2009
MIUI V5 is going to be released tomorrow. I will update this for V5 the moment it get released the new Theme Editor
The Following 2 Users Say Thank You to hadron For This Useful Post: [ View ]
4th March 2013, 08:22 PM   |  #6  
Junior Member
Flag Beograd
Thanks Meter: 1
 
23 posts
Join Date:Joined: Apr 2010
Just wonderful mate, exactly what I was looking for. Keep it going please!
5th March 2013, 02:53 AM   |  #7  
Junior Member
Flag St. Clairsville
Thanks Meter: 1
 
3 posts
Join Date:Joined: Aug 2012
More
Thumbs up
Great job this looks amazing. Just installed, going to read up, and play.
24th March 2013, 01:53 AM   |  #8  
OP Member
Thanks Meter: 42
 
56 posts
Join Date:Joined: Jan 2009
Re: [Guide] MIUI Theme Editor user Guide in detail
*bump*

Sent from my MI 2 using Tapatalk 2
4th April 2013, 09:23 AM   |  #9  
Junior Member
Flag Caracas
Thanks Meter: 0
 
14 posts
Join Date:Joined: Aug 2012
More
thanks. i'm going to try it.

if it's not much to ask, can you upload a V5 template, only if it's exists.

otherwise no problem. thanks for the guide.
7th May 2013, 06:52 AM   |  #10  
Raadius's Avatar
Senior Member
Flag Los Angeles
Thanks Meter: 1,199
 
2,435 posts
Join Date:Joined: Mar 2010
Donate to Me
More
Is there a v5 template or will this one work for it?

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes