Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,742,650 Members 38,348 Now Online
XDA Developers Android and Mobile Development Forum

[Tutorial][NICS Themer] Create Your Own Themed apk & Become a Themer - 06.10.13

Tip us?
 
Saqib Nazm
Old
(Last edited by Saqib Nazm; 26th November 2013 at 10:49 AM.)
#1  
Saqib Nazm's Avatar
Forum Moderator / Recognized Themer - OP
Thanks Meter 7699
Posts: 2,892
Join Date: Oct 2012
Location: Dhaka

 
DONATE TO ME
Default [Tutorial][NICS Themer] Create Your Own Themed apk & Become a Themer - 06.10.13


Now Featured in XDA Portal. Thanks for the support



http://www.xda-developers.com/androi...reation-guide/


***This Themer guide should work in any device running android 4.0.4 & +

About NICS Themer

NICS Themer works with Xposed App & X-Themer Engine. It is intended to serve the same purpose as T-Mobile/CM10 Theme Engine. NICS lets you to create own themed apk, my friend neroyoung first develop the idea of it & implemented in his NICS Rom. I am writing a complete guide here to share with you cause I think it's a really useful thing

Requirement

1. X-posed App by rovo89
2. X-Themer Engine by ruqqq
3. My Base.apk
4. Virtuous Ten Studio (VTS) - Official Website
5. A Editing Software like Paint.NET - Download Link

Note: # 1,2,3 are available in 2nd post attachment
Note: for more information about X-posed App & X-Themer Engine visit the official thread.


Main Guide

1. Download & install VTS in default directory & place Base.apk in Desktop

2. Open VTS & click on File>New Project (Right hand top corner). Click on Import tab & locate the Base.apk from Desktop, then click Import. Now click on Project tab & you will see the Project name as "Base", give a Solution name or just name it to "Base" as well. Then press Ok. For better understanding I am providing screenshot with serial number to the task you have to do.



3. You will see now task is running & in some seconds your apk will be decompile successfully. It will look like this, minimize VTS



4. Now go to there where VTS keeps projects. For me it is in C:\Documents and Settings\USER\My Documents\Virtuous Ten Studio\Projects
Now go inside your project "Base\Data folder.
Inside drawable folder there is a png which is the icon of the apk
Inside xml folder there is a redirection.xml, we have to redirect the packages which we will theme & other xmls need to be write here.
Go inside values folder & delete Public.xml

5. Now lets begin with the guide. As framework, systemUI & Settings are the three most important component of Rom, I will show how to theme & redirect them.

6. Now, 1st decompile Settings.apk which you want to theme to get the resources & pngs from there. Use another tool like Apktool, Xda Auto Apktool or Apk Multitool. Here is a Guide on Apk Multi Tool.

7. Open AndroidManifest.xml of Settings.apk, we need android version & package name of it. Like for my Settings.apk it is
android:versioncode="15"
pacakge="com.android.settings" Remember those or note it down somewhere



Also go to the drawable-hdpi folder of Settings.apk & copy the pngs you want to theme. Note that, according to your phone this drawable folder can be drawable-ldpi/mdpi/hdpi/xhdpi. So according to it make a drawable folder in Data\Res of the decompiled Base.apk
I am creating it in Data\res\drawable-hdpi, & adding the pngs in the folder which I have copied from Settings.apk

8. Now, inside the drawable-hdpi folder rename the pngs with anything you like. To avoid all conflicts I would suggest to add the package name infront of every png. For example, I have taken three pngs from settings. Here are the original & renamed name of them--
ic_settings_wireless.png -------------- com_android_settings_ic_settings_wireless.png
ic_settings_bluetooth2.png ---------- com_android_settings_ic_settings_bluetooth2.png
ic_settings_data.png ------------------- com_android_settings_ic_settings_data.png
9. Now go to xml folder & write a new xml named "com_android_settings.xml" & write according to how many pngs you have taken,
Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<resource-redirections>
    <item name="drawable/ic_settings_bluetooth2">@drawable/com_android_settings_ic_settings_bluetooth2</item>
    <item name="drawable/ic_settings_data_usage">@drawable/com_android_settings_ic_settings_data_usage</item>
    <item name="drawable/ic_settings_wireless">@drawable/com_android_settings_ic_settings_wireless</item>
</resource-redirections>
Save it.
Here, item name="drawable/ic_settings_bluetooth2" - is the original png name which is inside Settings.apk
@drawable/com_android_settings_ic_settings_bluetooth2 - is the renamed pngs which will replace the original png
So it will look like this,



10. Now decompile SystemUI.apk the same way & get android version & package name from AndroidManifest.xml. For me it is,
android:versioncode="15"
package="com.android.systemui"
Copy the pngs you want to edit from drawable folder & add it to Data\res\drawable-hdpi folder of Base.apk. Now rename the pngs you have copied with the package name attached to the front. Like for a png the original & renamed is-
stat_bluetooth_on.png ---------- com_android_systemui_stat_bluetooth_on.png

11. Write a new xml in xml folder named "com_android_systemui.xml" & write according to how many pngs you have taken-
Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<resource-redirections>
    <item name="drawable/stat_2g3g_off">@drawable/com_android_systemui_stat_2g3g_off</item>
    <item name="drawable/stat_2g3g_on">@drawable/com_android_systemui_stat_2g3g_on</item>
    <item name="drawable/stat_3g_on">@drawable/com_android_systemui_stat_3g_on</item>
    <item name="drawable/stat_airplane_on">@drawable/com_android_systemui_stat_airplane_on</item>
    <item name="drawable/stat_bluetooth_on">@drawable/com_android_systemui_stat_bluetooth_on</item>
    <item name="drawable/stat_brightness_auto">@drawable/com_android_systemui_stat_brightness_auto</item>
    <item name="drawable/stat_brightness_mid">@drawable/com_android_systemui_stat_brightness_mid</item>
    <item name="drawable/stat_brightness_on">@drawable/com_android_systemui_stat_brightness_on</item>
    <item name="drawable/stat_data_on">@drawable/com_android_systemui_stat_data_on</item>
    <item name="drawable/stat_flashlight_on">@drawable/com_android_systemui_stat_flashlight_on</item>
    <item name="drawable/stat_gps_on">@drawable/com_android_systemui_stat_gps_on</item>
    <item name="drawable/stat_lock_screen_on">@drawable/com_android_systemui_stat_lock_screen_on</item>
    <item name="drawable/stat_orientation_on">@drawable/com_android_systemui_stat_orientation_on</item>
    <item name="drawable/stat_reboot">@drawable/com_android_systemui_stat_reboot</item>
    <item name="drawable/stat_ring_on">@drawable/com_android_systemui_stat_ring_on</item>
    <item name="drawable/stat_screen_timeout_1m">@drawable/com_android_systemui_stat_screen_timeout_1m</item>
    <item name="drawable/stat_screen_timeout_2m">@drawable/com_android_systemui_stat_screen_timeout_2m</item>
    <item name="drawable/stat_screen_timeout_10m">@drawable/com_android_systemui_stat_screen_timeout_10m</item>
    <item name="drawable/stat_screen_timeout_30m">@drawable/com_android_systemui_stat_screen_timeout_30m</item>
    <item name="drawable/stat_screen_timeout_15s">@drawable/com_android_systemui_stat_screen_timeout_15s</item>
    <item name="drawable/stat_screen_timeout_30s">@drawable/com_android_systemui_stat_screen_timeout_30s</item>
    <item name="drawable/stat_shutdown">@drawable/com_android_systemui_stat_shutdown</item>
    <item name="drawable/stat_sync_on">@drawable/com_android_systemui_stat_sync_on</item>
    <item name="drawable/stat_wifi_on">@drawable/com_android_systemui_stat_wifi_on</item>
</resource-redirections>
Save it.



12. Now decompile framework-res.apk get the package name & android version from AndroidManifest.xml & get the pngs from drawable folder & add them in Data\res\drawable-hdpi folder of Base.apk. My framework's package & version is -
android:versioncode="15"
package="android"
Now rename the framework-res pngs with package name "android" or like I have done. The original & renamed png name is like this for me-
switch_bg_on_disabled_holo_dark.png ------------ framework_res_switch_bg_on_disabled_holo_dark.png
Now open a new xml in xml folder named "android.xml" & write according to how many pngs you have taken to modify
Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<resource-redirections>
    <item name="drawable/switch_bg_on_disabled_holo_dark">@drawable/framework_res_switch_bg_on_disabled_holo_dark</item>
    <item name="drawable/switch_bg_on_disabled_holo_light">@drawable/framework_res_switch_bg_on_disabled_holo_light</item>
    <item name="drawable/switch_bg_on_holo_dark">@drawable/framework_res_switch_bg_on_holo_dark</item>
    <item name="drawable/switch_bg_on_holo_light">@drawable/framework_res_switch_bg_on_holo_light</item>
    <item name="drawable/switch_thumb_disabled_focused_holo">@drawable/framework_res_switch_thumb_disabled_focused_holo</item>
    <item name="drawable/switch_thumb_focused_holo">@drawable/framework_res_switch_thumb_focused_holo</item>
</resource-redirections>
Save it.


Note that for .9 pngs we won't add .9 to the xml

13. Open redirections.xml in xml folder & we have to write all the package redirections here. In my case I have three packages to redirect.
for Settings --
Code:
Select Code
    <package-redirections android:name="com.android.settings" android:resource="@xml/com_android_settings" android:minSdkVersion="15" />
for SystemUI --
Code:
Select Code
    <package-redirections android:name="com.android.systemui" android:resource="@xml/com_android_systemui" android:minSdkVersion="15" />
for framework --
Code:
Select Code
    <package-redirections android:name="android" android:resource="@xml/android" android:minSdkVersion="15" />
Here android:name is the main package which will be themed
android:resources is the xml from where png's will be redirected & replaced
android:minSdkVersion is the android:versioncode which we got from the main packages
So, the complete redirections.xml is may case will be -
Code:
Select Code
<?xml version="1.0" encoding="utf-8"?>
<theme-redirections
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pluto="http://www.w3.org/2001/pluto.html">
    <package-redirections android:name="com.android.settings" android:resource="@xml/com_android_settings" android:minSdkVersion="15" />
    <package-redirections android:name="com.android.systemui" android:resource="@xml/com_android_systemui" android:minSdkVersion="15" />
    <package-redirections android:name="android" android:resource="@xml/android" android:minSdkVersion="15" />
</theme-redirections>
Save it. Note that, you need to close redirections with </theme-redirections> to the end.
Also, Remove "/" from the 3rd end of the line. So the 3rd line will be,
Code:
Select Code
  xmlns:android="http://schemas.android.com/apk/res/android" xmlns:pluto="http://www.w3.org/2001/pluto.html">




14. Now go to drawable-hdpi folder where all the renamed pngs are. Open them with Paint.NET & change hue/saturation to the color you want to theme them. crtl+shift+U gives you the option in Paint.NET. When theming is done save all pngs. My drawable-hdpi folder looks like this-



15. Now check once again in Data\res folder.
In drawable folder there should be icon.png which will be the icon for your apk
In values folder there will be nothing as we have deleted public.xml earlier
In xml folder there should be redirections.xml with other xmls you have created
In drawable hdpi folder there will be all the renamed & themed pngs

16. Now maximize VTS window & open AndroidManifest.xml of the Base.apk. In android:label write something you want it to be shown as the apk name. In package name give name according to your color theme. Like for me it is "saqib.themer.green". If you make another one which is orange in color name it to "saqib.themer.orange" so that it doesn't replace the earlier apk when installing. After this, save the xml. For better understanding, I have marked screenshot with serial number-


When you are done press "Build all", it will run a process & create your new apk. CONGRATULATIONS now you have successfully built your own themed apk. Get it from Data\Binary folder of VTS Project.

The Following 32 Users Say Thank You to Saqib Nazm For This Useful Post: [ Click to Expand ]
 
Saqib Nazm
Old
(Last edited by Saqib Nazm; 12th October 2013 at 06:24 PM.)
#2  
Saqib Nazm's Avatar
Forum Moderator / Recognized Themer - OP
Thanks Meter 7699
Posts: 2,892
Join Date: Oct 2012
Location: Dhaka

 
DONATE TO ME
Default Attachments


* Download Xposed App & X-Themer Engine from attachment & install them as a normal apk in your device.
* Go to Xposed Installer App click on Install/Update, then go to Modules & tick mark on XTheme Engine. Reboot your device
* Install the newly created apk by yourself as a normal apk. You will find it inside XThemeEngine App. Apply it, it will ask for a soft reboot. After reboot you will see the changes that the app has made.

Here, I am sharing a screenshot after applying my Green themed apk via XTheme Engine




For automated batch file renaming & redirections go to this post by Madaditya - Link to Post

Credits

** neroyoung
** rovo89
** ruqqq
** Diamondback


For any more support, I am also attaching the Green_Hulk.apk I have made in the process. If you need to know more or have any confusion download that & decompile it. Your idea & conception will get more clear.
Attached Files
File Type: apk Base.apk - [Click for QR Code] (12.6 KB, 277 views)
File Type: apk XposedInstaller.apk - [Click for QR Code] (537.0 KB, 101 views)
File Type: apk XThemeEngine.apk - [Click for QR Code] (1,020.1 KB, 178 views)
File Type: apk Green_Hulk.apk - [Click for QR Code] (252.1 KB, 175 views)
The Following 18 Users Say Thank You to Saqib Nazm For This Useful Post: [ Click to Expand ]
 
stanlin salu
Old
#3  
stanlin salu's Avatar
Recognized Contributor
Thanks Meter 2186
Posts: 1,744
Join Date: Apr 2012
Location: New Delhi

 
DONATE TO ME
Nice Guide Mate...
Its really helpful for beginner
The Following User Says Thank You to stanlin salu For This Useful Post: [ Click to Expand ]
 
neroyoung
Old
#4  
neroyoung's Avatar
Senior Member
Thanks Meter 2380
Posts: 828
Join Date: Oct 2011
Location: Pusad, MH
Nice work saqib,
Nicely written well mannered guide! Detailed enough to make even a beginner themer as pro
The Following 4 Users Say Thank You to neroyoung For This Useful Post: [ Click to Expand ]
 
Aneel
Old
#5  
Aneel's Avatar
Senior Member
Thanks Meter 1947
Posts: 966
Join Date: Nov 2012
Location: Temporarily Unavailable.. :p

 
DONATE TO ME
Thumbs up Awesome!!

nicely written bro... definitely a beginner would understand it with ease


The Following User Says Thank You to Aneel For This Useful Post: [ Click to Expand ]
 
Abhinav2
Old
#6  
Abhinav2's Avatar
Recognized Contributor / Themer
Thanks Meter 4451
Posts: 2,255
Join Date: Jul 2012
Awesome guide, bro...
Just a doubt... is it necessary to use vts? Can't I simply use apktool for decompiling the base apk? Im on linux and I dont think vts is for linux..

AJ
The Following User Says Thank You to Abhinav2 For This Useful Post: [ Click to Expand ]
 
Ghostfreak NB
Old
#7  
Ghostfreak NB's Avatar
Recognized Contributor
Thanks Meter 3162
Posts: 4,586
Join Date: Aug 2012
Location: Mumbai
Amazing stuff there..Mate..
Keep it up ..Will link in my threads so as more people notice it..
The Following User Says Thank You to Ghostfreak NB For This Useful Post: [ Click to Expand ]
 
mihahn
Old
#8  
mihahn's Avatar
Recognized Contributor
Thanks Meter 2162
Posts: 3,187
Join Date: May 2012
Great guide mate! Keep it up! I'm sure even beginners are able to follow the steps


Devices/Links/Information:
 

Device:Google Nexus 4 8gb
ROM:Stock Android 4.4.2 [KOT49H]

Device:Google Nexus 7 32gb
ROM:Stock Android 4.4.2 [KRT16O]

Device:Xperia Mini Pro SK17i
ROM: Super Jelly Bean 8.0
Kernel:nAa 2.6 [CWM]

Device:Raspberry Pi Model B
OS: Arch Linux

For a Rooting Guide for xperia 2011 devices, click me! | To unlock the Bootloader, click me! | How to install a custom kernel/rom? Click me | Super Jelly Bean 8.0 for xperia mdpi
The Following User Says Thank You to mihahn For This Useful Post: [ Click to Expand ]
 
Saqib Nazm
Old
#9  
Saqib Nazm's Avatar
Forum Moderator / Recognized Themer - OP
Thanks Meter 7699
Posts: 2,892
Join Date: Oct 2012
Location: Dhaka

 
DONATE TO ME
Quote:
Originally Posted by Abhinav2 View Post
Awesome guide, bro...
Just a doubt... is it necessary to use vts? Can't I simply use apktool for decompiling the base apk? Im on linux and I dont think vts is for linux..
AJ
Thanks..Yes you can use other apk tools too for Base.apk. I have suggested VTS because with VTS when you change AndroidManifest you don't need to sign them or compile with old signature etc..If you use apktool then don't forget to re-sign the base apk
The Following User Says Thank You to Saqib Nazm For This Useful Post: [ Click to Expand ]
 
dywerd
Old
#10  
dywerd's Avatar
Senior Member
Thanks Meter 20
Posts: 103
Join Date: Jul 2012
Location: Bátonyterenye/Kisterenye
Default help

Hi saqib!
For first thank you for the gide!! It was really helpfull for me! But I got an error while I try to build my apk. I dont't know what is the problem, 'cause I did everything as you said (but change my android version to 16). The log says that I have some junk after document element, and I don't know what to do. Any suggestion?
Attached Thumbnails
Click image for larger version

Name:	Virtuous Ten Studio 2013-10-10 18-55-03-84.jpg
Views:	311
Size:	167.7 KB
ID:	2315887  
Device: Xperia L (C2105)
Kernel: Stock
Rom: Stock 4.2.2 (.17)
Bootloader Unlock: Not Allowed
CWM by Rachit Rawat & NUT

Tags
guide, nics themer, saqib nazm
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes