How to create your own Sense Skin

The most asked question I get is, (Hey Mcluvn, can you make a base skin for me?) or (How do I make a base skin?).  Now that we have VTS with a working decoder for SENSE 3.5, 3.6 and the newer 4.x, this will only bring up the question even more. This is the first tutorial that I know of that will walk you through the steps in creating your own skin.

I’ll be using the matte.apk from SENSE 4.0 in this tutorial. You can use whatever stock skin you would like. So let’s get started.


STEP ONE:  Things you will need from your ROM zip

  • Fusion.apk
  • Matte.apk or any other stock skin.
  • com.htc.resources.apk

STEP TWO: Putting the pieces together

  • Open fusion.apk with 7zip or any other zip program
  • Open matte.apk with in another 7zip window.
  • Highlight and drag the matte folder from fusion.apk/assets/ and drop it into matte.apk/assets/
  • Now you should have these two folders (Images and Matte) in the assets folder of matte.apk.
  • Close the two 7zip windows.
  • Your matte.apk is now ready for VTS.
  • (You can avoid this whole step with using downloadable skins from HTC, they already contain everything in one apk)

1.matte.fusion.assets2.matte.assets.moved

STEP THREE: Adding Framework Tag

  • Open VTS
  • Select File (top left of screen) and click on Open Settings.
  • On the left side of the settings window you need to select Frameworks. To bring up the settings for editing your framework tags.
  • At the bottom there is a button that says Add Framework with a text box that has “tag”. You can change the name of your tag to something simple so you know what apk we tag.
    Since we will be using the com.htc.resources.apk that we got from a sense 4.0 ROM zip earlier, I’ll name my tag “4.0-tag”.
  • Next we click on the Add Framework button.
  • In the local file Path field we will type the location of our com.htc.resources.apk. mine is in a folder called 4.0 roms in downloads, so I’ll type this- C:UsersMcLuvnDownloads4.0 romscom.htc.resources.apk (or simply click on the button next to the box and select the file you want to use)
  • Select Import. Then select OK.

4.Name.Framework.Tag5.Add.Framework.Tag.Settings6.Framework.Tag.Added.OK

STEP FOUR: Decompile your skin

  • Select File (top left of screen) and click on New Project
  • Make sure to select the Apk-Project from project type list
  • Enter a Solution name and a Project name (or leave the project name empty to use the filename of your base skin)
  • Now select Import from the left side
  • Here you will need to type the location of your matte.apk or simply select the little box with the three dots and find your matte.apk.
  • Next select Apk-Tool from the left side.
  • Here you need to select your Framework tag 4.0-tag that we added earlier.
  • Switch to M10-Engine, check the little checkbox twhich says Use M10Tools [..] and select your Sense version
  • Select OK at the bottom to start decompiling the apk.

7.Selecting.Framework.Tag8.Import.matte.apk9.Solution.name

STEP FIVE: Editing the Manifest

  • Double click on AndroidManifest.xml in the Solution Explorer to open the file.
  • You will be editing line #2 (exact number may differ) were it says package=”com.htc.skin.Matte” to the name you want to give your skin.
    I’m calling this skin My Own Skin, so it will look like this package=”com.htc.skin.MyOwnSkin”.Also in line #2 there is android:versionCode=”xyz”.

    For most people this won’t need to be edited, as long as you use a skin from your rom.zip that you are making the skin for.
    For the people that are making skins for multiple devices we will need to change this a bit. Every sense version has its own version code. 
    If this number isn’t right it will not show up in the skin chooser. 

    This is also the reason why skins cannot be cross compatible with devices. Even though the One X and the Incredible 4g both have sense 4.0 they still  have different version codes. 
    Two examples: android:versionCode=”289406976″ for qHD (Inc4g)
    and android:versionCode=”287309824″ for HD (One X/XL). 

  • Close the file and save your changes by clicking on the little “x” on the tab. 

10.Manifest.Before.And.After

STEP SIX: Assets Folder

  • Right click on assets folder and select Open in Explorer.
  • In explorer rename matte folder to the name that you put in the AndroidManifest.xml.
    It has to be spelled exactly the way it is in the AndroidManifest.xml but without the com.htc.skin.
    My line #2 will look like this:
    ([..] android:versionCode=”287309824″ [..] package=”com.htc.skin.MyOwnSkin” [..]),
    so I will rename the folder to MyOwnSkin.
  • Close the explorer window and return to VTS.
  • Right click on your Project and select Reload Project.
  • Now VTS should show your newly renamed folder.

11.Assets.Folder.Name12.Assets.Folder.Name.Changed

STEP SEVEN: Skin Chooser Name

  • Go to res/values/ and double click on the strings.xml to open the file in VTS.
  • You will change where it says “Matte” to whatever name you want to show up on the skin chooser screen on the phone. This can be anything you want.
    It does not have to be exactly like the AndroidManifest.xml. For this mine will be “My Own Skin”.
  • Close the file and save your changes by clicking on the little “x” on the tab.

13.Skin.Chosser.Name14.Skin.Chosser.Name.Changed

STEP EIGHT: Editing Your Images

  • You can now edit all the images in your skin to give it a personalized look and feel.
  • Normal android images can be found i nthe usual locations (res/drawable-xyz) and m10 images can be found in this folder (in this case): assets/MyOwnSkin/drawable/shared/images
  • Edit the two images (preview_land.jpg and preview.jpg) in assests/image to add your own screen shots to the skin choosers preview. You can also find the wallpaper for the skin here.

STEP NINE: Project Settings

  • You can have VTS install the skin automatically via ADB if you want to test the it fast and easily.
  • Right click your project in the Solution Explorer and select Properties.
  • At the top in Project Settings you can change the output binary apk name by editing the text field where it says APK-Name.
  • Scroll down to ADB at the bottom.
  • Select Use adb install and then click OK.

15.Project.settings.Use.adb.Install

STEP TEN: Building Your New Skin

  • In the Solution Explorer you will right click on your project and select Build Project.
  • Wait for VTS to finish building your new apk.
  • If you set up ADB install in the previous step, right click your project and select Push to device
  • If you want to transfer and install your apk manually, just click on the button called Binary in the Home tab and select your current project
  • The folder which contains your compiled apk will open.

15.Building.Project

STEP ELEVEN: You’re Finished

  • If you didn’t do the adb install in settings then you will have to manually transfer your apk to your device.
  • Install the apk.
  • Apply the skin from your skin chooser on your phone. You can do this by going to your Settings/Personalize/Skin and finding your skin.
  • Click apply and you’re done.

You now have your very own skin that you can edit and theme any way you choose to. Enjoy!!