[TUTORIAL] Complete and Comprehensive Guide for Creating 4.3 Themes

Search This thread

Ayush Singh

Senior Member
Nov 1, 2012
331
1,603
India
www.ayushsingh.net


Comprehensive Guide for Beginners to Create 4.3 Xperia Themes



Hello Friends!

As we all know Android 4.3 brought for us the capability to customise our Xperias with soothing themes and adding custom flavor to it
I am creating this tutorial to teach you how to create your own themes ;)
1621964_619674534754622_1152769396_n.jpg




Pre Requisites--

NotePad++
7Zip/Winrar or equivalent zip manager
Apktool or Virtuous Ten Studio or equivalent apk decompiler
Paint.net tool for editing pngs or equivalent editor
Java JDK installed
Sign++ for signing themes (only applicable if you use other than vts)
Basic windows knowledge
A creative Mind :)

So lets start!


STEP 1 - DECOMPILING AND SETUP


Download this 4.3 theme apk and decompile it using apktool
(Dont worry, visit this thread if you dont know how to decompile apks)

64182_619674544754621_344477588_n.jpg




STEP 2 - ADDING WALLPAPERS


Go to res/values/drawable-xxhdpi folder

1545763_619674531421289_1210958974_n.jpg


Here you will find the images which are the default wallpapers for lockscreen and launcher
Also change the preview of your theme as desired
Replace them according to your desired theme

Repeat the same for res/values/drawable-sw720dp-hdpi folder (these are wallpapers for tablet theme users)



STEP 3 - CHANGING THE NAME


Open the AndroidManifest.xml

Here you will find this in 2nd line

Code:
<manifest android:versionCode="1" android:versionName="1.0" package="[COLOR="Red"]somc.theme.xxx.xxxx[/COLOR]"

Change the package name as desired

1620380_619674561421286_1082580672_n.jpg


Now go to res/values/strings.xml using Notepad++

And edit the theme name as desired

Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="semc_theme_title">Xperia Example™</string>
</resources>




STEP 4 - ADDING/REMOVING/CREATING ASSETS

-> What are assets?


Well they are the resources (pngs, xmls and other things which make your themes beautiful)
These can be found in assets folder in zip format

1239380_619674564754619_1137325_n.jpg



-> How to create assets?


Assets are basically the apks itself

To create assets I am giving you an example for Settings.apk

1. First decompile your Settings.apk
2. Go to res folder inside decompiled Settings and delete all the folders except the drawable-xxhdpi and values folder (as icon pngs are present in it)
3. Delete the smali and assets folder inside the decompiled Settings
4. Go to drawable-xxhdpi folder and delete the unwanted pngs which you do not wish to theme
5. Edit the pngs as desired using Paint.net or equivalent advanced png editor
6. Now go to values folder and and delete all the xml files except public.xml
7. Now open the public.xml in Notepad++ and paste the following code-

Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
</resources>

8. Now open the AndroidManifest.xml of the Settings
Select all and paste the following code-

Code:
<?xml version="1.0" encoding="utf-8"?>
<manifest android:versionCode="1" android:versionName="1.0" package="com.sonymobile.dummy"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:label="None" />
</manifest>

9. Now recompile the Settings folder
10. Open the recompiled apk and delete the MATA-INF folder (if present)
11. Now rename the recompiled Settings.apk to its package name i.e. com.android.settings.zip
12. Now paste the com.android.settings.zip to assets folder of the theme
13. Scroll down to learn how to add your newly created asset in the theme

1517650_619674578087951_79535693_n.jpg


The above steps can be used for any of the apk you wish to create assets for :)



-> How to add the assets?


I recommend you to add more and more custom assets to make your theme unique
For example you wish to add Settings.apk assets

1. Create the asset zip as explained above
2. Open the AndroidManifest.xml of the theme

and add this code-

Code:
        <asset path="com.android.settings.zip" target="com.android.settings">
            <laf-version-filter from="1" to="1" />
        </asset>

between these tags

Code:
    <runtime-skin version="1">
....
....
....
    </runtime-skin>

So new code will look like this

12703_619674601421282_948507653_n.jpg




-> How to remove specific app assets?


You need to do this when you do not wish any resource to be modified
For example if you do not want the modifications to statusbar in your theme
Then go to assets folder and delete the com.android.systemui.zip

Then open the AndroidManifest.xml of the theme

and find this code-

Code:
    <runtime-skin version="1">
        <asset path="com.sonyericsson.uxp.zip" target="com.sonyericsson.uxp">
            <laf-version-filter from="1" to="1" />
        </asset>
        [COLOR="Red"]<asset path="com.android.systemui.zip" target="com.android.systemui"> 
            <laf-version-filter from="1" to="1" />
        </asset>[/COLOR]
        <asset path="com.sonyericsson.home.zip" target="com.sonyericsson.home">
            <laf-version-filter from="1" to="1" />
        </asset>
    </runtime-skin>

Delete the highlighted code ONLY

So new code will look like this

1017408_619674608087948_1912805657_n.jpg




STEP 5 - MODIFYING THE EXISTING (DEFAULT) ASSETS OF THEME

In my example theme I have 4 basic assets (SystemUI, Android, Home and SemcGeneric Accent)
So I am explaining one by one



1. The SystemUI and Home assets


Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
Rename the com.sonyericsson.home.zip to com.sonyericsson.home.apk
Then decompile it using apktool or vts
Modify the decompiled folder pngs as desired using Paint.net or other and recompile it
Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
Now rename the com.sonyericsson.home.apk to com.sonyericsson.home.zip
Paste it to assets folder of the decompiled theme

The above procedure can be repeated for systemui asset too :)



2. The Android assets


These are the most important assets of the theme
These decide the most of the UI as they are framework-res resources

To modify these-

Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
Rename the android.zip to android.apk
Then decompile it using apktool or vts
Modify the decompiled folder pngs as desired using Paint.net or other and recompile it
Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
Now rename the android.apk to android.zip
Paste it to assets folder of the decompiled theme



3. The Theme Accent assets


These decide the theme accent of the Sony Apps

To change the theme accent-

-> Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
-> Rename the com.sonyericsson.uxp.zip to com.sonyericsson.uxp.apk
-> Then decompile it using apktool or vts
-> Go to res/values/colors.xml

And modify the highlighted hex code ONLY!

Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="somc_theme_accent_color_dark">#ff[COLOR="Red"]4038ff[/COLOR]</color>
    <color name="somc_theme_accent_color_light">#ff[COLOR="Red"]4038ff[/COLOR]</color>
    <color name="somc_accent_color_neutral">#ff[COLOR="Red"]4038ff[/COLOR]</color>
</resources>

I recommend you to keep the hex code according to theme wallpapers and framework-res assets color
To know the hex codes of the different colors visit ColorHexa website
More information about hex codes of colors

-> After finishing this edit recompile the asset
-> Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
-> Now rename the com.sonyericsson.uxp.apk to com.sonyericsson.uxp.zip
-> Paste it to assets folder of the decompiled theme



STEP 6 - RECOMPILE THE THEME APK


Recompile the theme apk and sign it using Sign++

1623725_619674624754613_1418643395_n.jpg




STEP 7 - TEST ON YOUR PHONE


Install your theme apk like normal app or push it to system/app
Make sure you have SuperUser Mod installed!
Enjoy and do share your themes with us :)

1546202_619674634754612_1219259526_n.jpg



 
Last edited:

funky0308

Inactive Recognized Themer
Aug 27, 2012
7,029
5,681
Osijek
Very nice mate...

I thought you will repeat stuff we already said but you did awesome job.

Great new things - very nice.

One thing only, it's not necessary to rename assets for decompiling.
Apk and Zip files are similar packages and you can easily decompile and recompile zip files.

But that's not important, it'll work in both ways.

One question, have you tried to add that line I was talking about in mine thread in systemUI asset?

I found one line in drawable.xml and we could easily add status bar transparency through whole OS.

I'll have more free time today to try again, I tried yesterday and got some errors in decompiling systemUI so couldn't check that.

My plan was to edit systemUI for all guys who can't use custom theme but want to have transparent status bar.

Sent from my C6903 using Tapatalk
 
  • Like
Reactions: Ayush Singh

funky0308

Inactive Recognized Themer
Aug 27, 2012
7,029
5,681
Osijek
I think I could add transparency to whole status bar (in all apps) but can't decompile systemui.zip.

I found line in systemUI\res\values\drawables.xml line #ff000000>/item>

I think if we change ff00000 to #00000000 we could get transparency in all apps.
(#00000000 is for 100% transparency,
50% transparency is #80000000 and full opaque is #ff00000000)
But as I just said - can't decompile properly.

We should try to make this...

I'm at work now but if you have time, PM me and we could talk (maybe to join and create our little group on hangouts) and work on some projects together...

We could build nice things for everyone...

Or you try that...
If you delete that line drom systemUI and add it in drawable.xml in systemUI assets it could work in themes as well...

Sent from my C6903 using Tapatalk
 
Last edited:

Ayush Singh

Senior Member
Nov 1, 2012
331
1,603
India
www.ayushsingh.net
We should try to make this...

I'm at work now but if you have time, PM me and we could talk (maybe to join and create our little group on hangouts) and work on some projects together...

We could build nice things for everyone...

Or you try that...
If you delete that line drom systemUI and add it in drawable.xml in systemUI assets it could work in themes as well...

Sent from my C6903 using Tapatalk


Yes I had tried this once

But the results arent good

It appeared like this for a second

attachment.php


and then again goes back to its normal state

attachment.php



I have exams at my school, will carry on this later, I will try to add kitkat like systemui gradient soon! :)
 

Attachments

  • Screenshot_2014-01-27-16-06-07.png
    Screenshot_2014-01-27-16-06-07.png
    31.6 KB · Views: 65,170
  • Screenshot_2014-01-27-16-09-17.png
    Screenshot_2014-01-27-16-09-17.png
    13.9 KB · Views: 64,855

funky0308

Inactive Recognized Themer
Aug 27, 2012
7,029
5,681
Osijek
Yes I had tried this once

But the results arent good

It appeared like this for a second

attachment.php


and then again goes back to its normal state

attachment.php



I have exams at my school, will carry on this later, I will try to add kitkat like systemui gradient soon! :)

Are you sure you had deleted that line from systemUI?
SystemUI have advantage over themes and it probably change color back.

If you got transparency for a sec, that's it.

Sent from my C6903 using Tapatalk
 

Zippy1

Senior Member
Jul 27, 2013
150
18
Could I carry out step one using a theme apk of my own? ( some of it is already how I want it so it would mean less work ) could I get apk using romtool box and then move it to my pc?

Sent from my C6903 using Tapatalk
 

funky0308

Inactive Recognized Themer
Aug 27, 2012
7,029
5,681
Osijek
Could I carry out step one using a theme apk of my own? ( some of it is already how I want it so it would mean less work ) could I get apk using romtool box and then move it to my pc?

Sent from my C6903 using Tapatalk

That's the whole purpose of all TUTs, to create your own themes or apk.

You can, of course, just use your systemUI.

Sent from my C6903 using Tapatalk
 

funky0308

Inactive Recognized Themer
Aug 27, 2012
7,029
5,681
Osijek
Hi mate...

One more thing.

When someone is changing/editing theme it shoud edit smali and in apktool.yml as well (name and path)

Smali files should be edited for "telling" system new path (if you changed path for smali files)
And apktool.yml to add here new name so it'll compile new theme with right name and won't overwrite in themes (if you have previouse version)

It's easy to change names there too (name of theme)

So , maybe to add that to OP as well in step "chaniging name"..

see ya
 
Last edited:

nicholician

Member
Dec 23, 2013
14
0
Toronto
Does This Method Work With CyanogenMod?

I am wondering if this theming method works with custom ROMs with theming engines, such as CyanogenMod.
 

Top Liked Posts

  • There are no posts matching your filters.
  • 65


    Comprehensive Guide for Beginners to Create 4.3 Xperia Themes



    Hello Friends!

    As we all know Android 4.3 brought for us the capability to customise our Xperias with soothing themes and adding custom flavor to it
    I am creating this tutorial to teach you how to create your own themes ;)
    1621964_619674534754622_1152769396_n.jpg




    Pre Requisites--

    NotePad++
    7Zip/Winrar or equivalent zip manager
    Apktool or Virtuous Ten Studio or equivalent apk decompiler
    Paint.net tool for editing pngs or equivalent editor
    Java JDK installed
    Sign++ for signing themes (only applicable if you use other than vts)
    Basic windows knowledge
    A creative Mind :)

    So lets start!


    STEP 1 - DECOMPILING AND SETUP


    Download this 4.3 theme apk and decompile it using apktool
    (Dont worry, visit this thread if you dont know how to decompile apks)

    64182_619674544754621_344477588_n.jpg




    STEP 2 - ADDING WALLPAPERS


    Go to res/values/drawable-xxhdpi folder

    1545763_619674531421289_1210958974_n.jpg


    Here you will find the images which are the default wallpapers for lockscreen and launcher
    Also change the preview of your theme as desired
    Replace them according to your desired theme

    Repeat the same for res/values/drawable-sw720dp-hdpi folder (these are wallpapers for tablet theme users)



    STEP 3 - CHANGING THE NAME


    Open the AndroidManifest.xml

    Here you will find this in 2nd line

    Code:
    <manifest android:versionCode="1" android:versionName="1.0" package="[COLOR="Red"]somc.theme.xxx.xxxx[/COLOR]"

    Change the package name as desired

    1620380_619674561421286_1082580672_n.jpg


    Now go to res/values/strings.xml using Notepad++

    And edit the theme name as desired

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="semc_theme_title">Xperia Example™</string>
    </resources>




    STEP 4 - ADDING/REMOVING/CREATING ASSETS

    -> What are assets?


    Well they are the resources (pngs, xmls and other things which make your themes beautiful)
    These can be found in assets folder in zip format

    1239380_619674564754619_1137325_n.jpg



    -> How to create assets?


    Assets are basically the apks itself

    To create assets I am giving you an example for Settings.apk

    1. First decompile your Settings.apk
    2. Go to res folder inside decompiled Settings and delete all the folders except the drawable-xxhdpi and values folder (as icon pngs are present in it)
    3. Delete the smali and assets folder inside the decompiled Settings
    4. Go to drawable-xxhdpi folder and delete the unwanted pngs which you do not wish to theme
    5. Edit the pngs as desired using Paint.net or equivalent advanced png editor
    6. Now go to values folder and and delete all the xml files except public.xml
    7. Now open the public.xml in Notepad++ and paste the following code-

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    </resources>

    8. Now open the AndroidManifest.xml of the Settings
    Select all and paste the following code-

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <manifest android:versionCode="1" android:versionName="1.0" package="com.sonymobile.dummy"
      xmlns:android="http://schemas.android.com/apk/res/android">
        <application android:label="None" />
    </manifest>

    9. Now recompile the Settings folder
    10. Open the recompiled apk and delete the MATA-INF folder (if present)
    11. Now rename the recompiled Settings.apk to its package name i.e. com.android.settings.zip
    12. Now paste the com.android.settings.zip to assets folder of the theme
    13. Scroll down to learn how to add your newly created asset in the theme

    1517650_619674578087951_79535693_n.jpg


    The above steps can be used for any of the apk you wish to create assets for :)



    -> How to add the assets?


    I recommend you to add more and more custom assets to make your theme unique
    For example you wish to add Settings.apk assets

    1. Create the asset zip as explained above
    2. Open the AndroidManifest.xml of the theme

    and add this code-

    Code:
            <asset path="com.android.settings.zip" target="com.android.settings">
                <laf-version-filter from="1" to="1" />
            </asset>

    between these tags

    Code:
        <runtime-skin version="1">
    ....
    ....
    ....
        </runtime-skin>

    So new code will look like this

    12703_619674601421282_948507653_n.jpg




    -> How to remove specific app assets?


    You need to do this when you do not wish any resource to be modified
    For example if you do not want the modifications to statusbar in your theme
    Then go to assets folder and delete the com.android.systemui.zip

    Then open the AndroidManifest.xml of the theme

    and find this code-

    Code:
        <runtime-skin version="1">
            <asset path="com.sonyericsson.uxp.zip" target="com.sonyericsson.uxp">
                <laf-version-filter from="1" to="1" />
            </asset>
            [COLOR="Red"]<asset path="com.android.systemui.zip" target="com.android.systemui"> 
                <laf-version-filter from="1" to="1" />
            </asset>[/COLOR]
            <asset path="com.sonyericsson.home.zip" target="com.sonyericsson.home">
                <laf-version-filter from="1" to="1" />
            </asset>
        </runtime-skin>

    Delete the highlighted code ONLY

    So new code will look like this

    1017408_619674608087948_1912805657_n.jpg




    STEP 5 - MODIFYING THE EXISTING (DEFAULT) ASSETS OF THEME

    In my example theme I have 4 basic assets (SystemUI, Android, Home and SemcGeneric Accent)
    So I am explaining one by one



    1. The SystemUI and Home assets


    Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
    Rename the com.sonyericsson.home.zip to com.sonyericsson.home.apk
    Then decompile it using apktool or vts
    Modify the decompiled folder pngs as desired using Paint.net or other and recompile it
    Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
    Now rename the com.sonyericsson.home.apk to com.sonyericsson.home.zip
    Paste it to assets folder of the decompiled theme

    The above procedure can be repeated for systemui asset too :)



    2. The Android assets


    These are the most important assets of the theme
    These decide the most of the UI as they are framework-res resources

    To modify these-

    Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
    Rename the android.zip to android.apk
    Then decompile it using apktool or vts
    Modify the decompiled folder pngs as desired using Paint.net or other and recompile it
    Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
    Now rename the android.apk to android.zip
    Paste it to assets folder of the decompiled theme



    3. The Theme Accent assets


    These decide the theme accent of the Sony Apps

    To change the theme accent-

    -> Firstly go to assets folder of theme and copy the asset zip to main folder from where you can decompile it
    -> Rename the com.sonyericsson.uxp.zip to com.sonyericsson.uxp.apk
    -> Then decompile it using apktool or vts
    -> Go to res/values/colors.xml

    And modify the highlighted hex code ONLY!

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="somc_theme_accent_color_dark">#ff[COLOR="Red"]4038ff[/COLOR]</color>
        <color name="somc_theme_accent_color_light">#ff[COLOR="Red"]4038ff[/COLOR]</color>
        <color name="somc_accent_color_neutral">#ff[COLOR="Red"]4038ff[/COLOR]</color>
    </resources>

    I recommend you to keep the hex code according to theme wallpapers and framework-res assets color
    To know the hex codes of the different colors visit ColorHexa website
    More information about hex codes of colors

    -> After finishing this edit recompile the asset
    -> Open the recompiled apk with winzip, 7z and delete the META-INF folder if present
    -> Now rename the com.sonyericsson.uxp.apk to com.sonyericsson.uxp.zip
    -> Paste it to assets folder of the decompiled theme



    STEP 6 - RECOMPILE THE THEME APK


    Recompile the theme apk and sign it using Sign++

    1623725_619674624754613_1418643395_n.jpg




    STEP 7 - TEST ON YOUR PHONE


    Install your theme apk like normal app or push it to system/app
    Make sure you have SuperUser Mod installed!
    Enjoy and do share your themes with us :)

    1546202_619674634754612_1219259526_n.jpg



    4
    Thanks to @funky0308 for his Guides- This and This

    And @saqib nazm :)



    FAQ Soon!

    Press thanks and rate my thread 5 stars if you liked it :)
    2
    Nice Tutorial Brother. Will Nominate it for the Portal.
    Cheers!
    2
    A very nice & definitive explanation :)
    +1 vote for this thread for portal :good:
    1
    Nice one Ayush ! :)