FORUMS

XDA Picks: Best Apps of the Week (Apr 17 – 24)

Apps are at the front and center of any smartphone experience, and with over a … more

Glimpse Notifications: Easier Lockscreen Notifications

Lollipop brought a revamp to the lockscreen, taking away custom widgets but … more

What Are the Best Looking Apps on Android?

As more developers are updating their apps with Material Design elements, we’re … more

Cyngn Explained: Who’s Cyanogen, What’s Cyanogen OS?

While Cyanogen, Inc has been the source of many headlines lately, there … more
Post Reply Subscribe to Thread Email Thread

[GUIDE][THEME][BASICS] Getting started on theming for CM12 Theme Engine! [w/Template]

Announcement from nicholaschum: Please try and contribute findings, we're looking to expand each other's knowledge here~!
18th January 2015, 05:41 PM |#1  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Let's get ready and theme CM12 Theme Engine themes!


Hey all, it's me again. I might as well be posting my entire workstation/methods here for people to learn how to get into the theming world. This time for CM12 Theme Engine. If you are looking for the traditional method of theming, this would be more useful for prospective themers/ROM developers: Here

NOTE: I'll be doing this on an AOSP/CM/Google based ROM, and if you are wondering if it works on TW/Sense, I do not know, but it should work the same.

In this guide, I won't be going so in depth like @Vivek_Neel, so you can go check out his thread: http://forum.xda-developers.com/andr...guide-t2978121 I'll be going over the BASICS of getting started to theme and how to go to his theme thread and start contributing.

Table of Contents
  1. Setting up the Java SE Runtime Environment
  2. Picking a template APK (with permissions)
  3. Setting up and using Virtuous Ten Studio
  4. Setting up ADB and Push to Install
  5. Error? Logcat time!
  6. Recovery Methods

Please do note, this IS for beginners, so I'll try and respond to errors and problems when setting up your environment and using my compiling packages.

XDA:DevDB Information
Getting started on theming for CM12 Theme Engine!, Theme for the Android General

Contributors
nicholaschum, BellaxMiu, Khizar, fahadali2315

Version Information
Status: Stable

Created 2015-01-18
Last Updated 2015-02-18
The Following 52 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
 
 
18th January 2015, 05:49 PM |#2  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Setting up the Java SE Runtime Environment
Setting up the Java SE Runtime Environment

First of all, to make sure everything goes well, it is recommended that you set up your entire JRE on your computer.
I'm on Windows 8.1 so I'll be using screenshots from an 8.1 setup.

STEP 1: Install these two files:
- JRE7 (This is what I use): http://www.oracle.com/technetwork/ja...s-1880261.html
- JDK (Install just in case): http://www.oracle.com/technetwork/ja...s-2133151.html

STEP 2: Setting up JDK JAVA_HOME environment variable:
  1. After installing the two files above, locate your JDK location, in my case, mine is C:\Program Files\Java\jdk1.8.0_20.
  2. Then open up your Control Panel and click into System (Control Panel\All Control Panel Items\System)
  3. Click on Advanced system settings in the sidebar.
  4. A popup will appear, click on the Advanced tab, then click on "Environment Variables..."
  5. Another smaller popup, Environment Variables, will open up. Click on "New..."
  6. According to the screenshot, click type in the Variable name (JAVA_HOME) and Variable value (Location of your JDK set up).
  7. After everything is done, click OK on all popups, then reboot your computer.
  8. You are now ready for apps like Virtuous Ten Studio and Android Studio, futureproofing yourself for now.
Last edited by nicholaschum; 18th January 2015 at 05:52 PM.
The Following 27 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:49 PM |#3  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Picking a template APK (with permissions)
Picking a template APK (with permissions)

So, I'm not like many themers where I would go berserk when you "steal" my work. My time is often spent on XDA and whatever benefit I get, I will provide back to the community for educational purposes.

STEP 0: Pick your template!!
CM12 Git Template for Android Studio (02/12/14): http://goo.gl/xwTTQw
CM12 Git Template for Virtuous Ten Studio (02/12/14): http://goo.gl/BBiUr7
CM12 cdt's (Nicholas) Alpha Template [DARK] (17/01/15) [OLD]: http://goo.gl/4kGlUk
CM12 cdt's (Nicholas) Beta Template [DARK] (18/02/15) [NEW]: http://goo.gl/RDqg9q
CM12 cdt's (Nicholas) Gamma Template [LIGHT] (18/02/15) [NEW]: http://goo.gl/Yw1p7Y
To all those people who decompile my public Play Store release APK, you have NO permission to do so. Those who follow my template must stick to the alpha template. Unless I have given you explicit grants, you have no permission to kang or decompile my APK for resale and/or redistribution. Those found kanging my base and are not on this list, I will find you, and I will report you:

List of people with granted permissions allowed to use the Play Store release as a base for their themes:
@Khizar (cdt), @fahadali2315 (cdt)

Those found kanging my Play Store base, I shall repeat, will be dealt with to XDA moderators (to shut down your thread) and Play Store (to shut down your Play Dev Console account).
My template was built for themers and developers alike, it's quite easy to theme as I do not define dozens of new variables and cross link them in files. My theme doesn't have framework-res themed yet, but over time that will change.
Framework-res is in the "android" folder in the overlays folder, so if you don't have one, make one.

Please respect other users and DON'T kang their themes. VTS allowed for this in their app for CM11, but this is disrespectful to hard working users who spend countless hours on their themes.
I on the other hand spent 18 hours on the first day making a clean template with 406 APK recompiles, but was making it to share so that's a difference.

Once you're done picking your template, move on to the next step. If you're starting new, you'd have to work with Gradle, which takes much longer than the VTS way. In this guide I will be teaching you how to break my APK and use it within VTS (Virtuous Ten Studio).
Last edited by nicholaschum; 18th February 2015 at 09:08 AM.
The Following 36 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:49 PM |#4  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Setting up and Using Virtuous Ten Studio
Setting up and Using Virtuous Ten Studio

STEP 1: Download and install Virtuous Ten Studio
Virtuous Ten Studio: http://virtuous-ten-studio.com/downloads/


STEP 2: Download and install Notepad++
If you don't have it already, install Notepad++ for external editing: http://notepad-plus-plus.org/download/v6.7.4.html


STEP 3: Setting up Virtuous Ten Studio's APKTool Binary
  1. Once you have VTS downloaded and installed, you have to navigate to the program's APK directory, in my case: C:\Program Files (x86)\Virtuous Ten Studio\External\ApkTool
  2. You may see many APKTool.jar's depending on when you installed VTS. I have 4 as I installed it months ago.
  3. As you may notice, the latest does not appear there, so you will have to download the latest apktool from ibotpeaches: https://bitbucket.org/iBotPeaches/apktool/downloads
  4. Download and place "apktool_2.0.0rc3.jar into C:\Program Files (x86)\Virtuous Ten Studio\External\ApkTool
  5. To get VTS to recognize that 2.0.0rc3 is the latest, you will have to CREATE a new text file on your desktop named "apktool_2.0.0rc3.txt" and inside the txt file, type in a decimal binary anywhere (e.g. type 2.0.0.3 inside)
  6. Save the text file, then rename the text file from "apktool_2.0.0rc3.txt" to "apktool_2.0.0rc3.version", overwriting the original extension.
  7. From the desktop, drag the .version file into C:\Program Files (x86)\Virtuous Ten Studio\External\ApkTool
  8. You can now open Virtuous Ten Studio


STEP 4: Setting up your framework-res binary for use in VTS (NOTE: IF THIS FAILS, MOVE ON TO STEP 5 FIRST, AFTER YOU GET THE DECOMPILE ERROR, COME BACK TO THIS STEP)
  1. Extract your framework-res.apk from /system/framework/framework-res.apk on your phone, then place it on your desktop.
  2. In VTS, click File (The blue button at the top left) and click "Open Settings"
  3. Under External Tools, click ApkTool
  4. Click on "Add Single Framework" and when a popup comes up, type in a tag, this can be anything, but in my case, I'll use "CM12"
  5. After finishing your framework tag, another popup will appear to pick the location of your framework-res.apk.
  6. Click Import, then close out of the window.
  7. Restart VTS.


STEP 5: Import my APK file into VTS
  1. Click on New Project
  2. A popup will appear to pick an APK file, navigate to where you downloaded my apk file, then press Import
  3. Another bigger popup will appear and it will come with my APK's name under Project name, change that into a theme name that you want, I'll name it "Dark Theme"
  4. Solution name should be empty, but it has to be filled as a solution is like a portfolio, so in this case, I would type "CM12 Theme Engine Theme Template"
  5. After typing in a Solution name, press Next, then a new popup will appear for Configurations. Pick "Basic Theming" then press Next.
  6. The last window will appear to configure your settings. Type in your framework tag you did above, in my case, "CM12" into FrameworkTag's empty box.
  7. Under ApkToolType choose UseCustom, then under CustomApkToolVersion pick "2.0.0.3"
  8. For ease of use, under "Transfer file via USB", pick Install under TransferMethod, and PushPath being "/data/app".
  9. Click Finish


STEP 6: Start Theming!
This step will be self explanatory, but the structure goes like this (I will only list out the files that people would be interested in changing):

res -> drawable-xhdpi: 96x96 icon for your installer
res -> drawable-xxhdpi: 144x144 icon for your installer
res -> drawable-xxxhdpi: 192x192 icon for your installer

res -> values -> colors.xml: global variables, good for keeping/storing
res -> values -> public.xml: global public variables
res -> values -> strings.xml: CM12 Theme Engine variables, pick your theme_name and theme_author
res -> values -> styles.xml: defines how this gets laid out in Theme Engine.

assets -> overlay: folder containing changes to the UI for a specific app
assets -> overlay -> android: framework-res.
assets -> overlay -> com.android.appname: changes to a system app, for example com.android.systemui.
assets -> bootanimations -> a bootanimation.zip with STORE compression and no junk files like Thumbs.db (check after compressing)
assets -> ringtones
assets -> lockscreen
assets -> wallpapers
assets -> notifications

STEP 7: Compiling your project!
  1. Once you're done with your project, click Build All on top, and press Push All.
  2. This will connect to your phone via ADB, so if you haven't used adb before, move to the Post 5..
  3. Notice that this automatically install it on your phone, and if there would be an error shown in the notification bar, go check out the Post 6.
  4. You're done!
Last edited by nicholaschum; 22nd January 2015 at 03:59 AM.
The Following 27 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:49 PM |#5  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Setting up ADB and Push to Install
Setting up ADB and Push to Install

I have guided you to set up ADB and Push to Install in the previous step, so if it all works for you, great, you can skip this step. This step is only for those who can't get ADB set up on their phones.

This actually is a pretty easy process.

STEP 1: Ensure ADB is installed on your computer
If you do not have drivers correctly installed, go to this thread: http://forum.xda-developers.com/show....php?t=2588979
Install ADB and Fastboot, as well as Google USB drivers.

STEP 2: Ensure ADB is correctly set up
  1. Navigate to C:\adb\ and Shift Right Click on a blank empty spot
  2. Click on "Open command window here..."
  3. Type this code into the CMD window:
    Code:
    adb shell
  4. On your phone, a popup may appear "Allow USB debugging", tick "Always allow from this computer", then press OK:
  5. ADB should be set up if done everything correctly.

STEP 3: Click on Push All in VTS

Your phone should now install the apk automatically.
Last edited by nicholaschum; 18th January 2015 at 07:16 PM.
The Following 22 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:50 PM |#6  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Error? Logcat time!
Error? Logcat time!

To theme for CM12, it gets complicated because you have to first install it on your device to see if the theme is good or not. If it doesn't work, it will not install, as shown by a notification saying "Failed to install theme: THEMENAME has failed to install"



REQUIREMENTS:
- Catlog already installed on your device

STEP 0: Assuming you got a notification saying it failed to install
  1. Immediately open Catlog
  2. Scroll up till you find the red E's, then locate the InstallTheme activity
  3. It will tell you that there was a problem with the overlay, as usual. But if not, it will still tell you the problematic file.
  4. Read the InstallTheme messages and pick out the problems (These could be laid out like styles.xml:45, and a brief description on the error variables. This means in styles.xml, line 45, there is a Syntax error. So you have to fix it.
Last edited by nicholaschum; 18th January 2015 at 07:37 PM.
The Following 20 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:50 PM |#7  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
Recovery Methods
Recovery Methods



RECOVERY METHOD 1: Safe Mode
To enter safe mode, you must have access to your Power Menu, usually this happens when you flash a bad layout/drawable/style and now you need to get it uninstalled from your phone. To do this:
  1. Open the Power Menu
  2. Hold on to "Power Off" for 2 seconds
  3. If a reboot menu comes out, ALWAYS click Reboot, not Soft Reboot
  4. If a reboot menu doesn't come out, just click OK.
  5. Your phone will now boot into Safe Mode, shown on the bottom left of your screen
  6. Uninstall that app/Deactivate it from Theme Engine
  7. Reboot back to normal system by just doing a reboot

RECOVERY METHOD 2: The Power of Patience
If you cannot get into safe mode, your screen isn't responding and hung on an FC dialog, spam the power keys, and spam your nav bar/hardware keys. Wait a minute or two, and your FC dialog is able to be closed. Uninstall afterwards.

RECOVERY METHOD 3: Push a new, fixed APK if you know the issue
As per the title, use VTS to push a fixed APK, or revert all your commits so that on your next reboot, it will reload the theme and fix your phone.
Last edited by nicholaschum; 18th January 2015 at 07:46 PM.
The Following 21 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:50 PM |#8  
nicholaschum's Avatar
OP Recognized Themer
Flag University of Toronto St. George (Hometown: Hong Kong)
Thanks Meter: 6,847
 
Donate to Me
More
HOLD!
The Following 11 Users Say Thank You to nicholaschum For This Useful Post: [ View ]
18th January 2015, 05:51 PM |#9  
fahadali2315's Avatar
Senior Member
Flag Nottingham
Thanks Meter: 5,958
 
Donate to Me
More
Superb Guide bro 👍👍👍
Last edited by fahadali2315; 18th January 2015 at 05:55 PM.
The Following 3 Users Say Thank You to fahadali2315 For This Useful Post: [ View ]
18th January 2015, 05:51 PM |#10  
Khizar's Avatar
Senior Member
Thanks Meter: 8,791
 
More
Good thing I learned how to make flashable themes, now need to make time for this... 😄
Last edited by Khizar; 18th January 2015 at 06:11 PM.
The Following 2 Users Say Thank You to Khizar For This Useful Post: [ View ]
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes