[Guide] Create a CM Theme: From environment setup to publishing on Google Play

upndwn4par · Oct 26, 2014

This thread was created by @EnricoD, and everything except post #6 is his work. I took over this thread when he decided to discontinue support. All credit goes to him.

*****************************************
*****************************************

Build Your First CM11 Theme (or APP!!!)

- SETTING UP THE BUILD ENVIRONMENT -

WINDOWS INSTRUCTIONS

1) Download, Install and set up the Java JDK

- Download and install the JDK (32 or 64bit)

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

- Navigate to

System Properties --> Advanced system settings --> Evironmental variables

and create a new variable called "JAVA_HOME" where we'll add the JDK path:

2) Eclipse Setup

- Download Eclipse ADT and Extract to C:\

http://developer.android.com/sdk/index.html

LINUX INSTRUCTIONS

1) We need the JDK!

- Open the terminal! roftl

- Install the OpenJDK running:

Code:

sudo apt-get install openjdk-7-jre

Let's make sure the correct version of Java is running on our PC. To do this just run

Code:

java -version

2) SDK setup

- Download the Standalone SDK Package from here:

DOWNLOAD: http://dl.google.com/android/android-sdk_r23.0.2-linux.tgz

- Install the SDK Package

Let's create a folder in your Home called "development" (You can also call it pincopallino, gino, pippo, Giovanni, Lemonpie, Material, Mathias Duarte... if You want lol)

Code:

mkdir ~/development

Navigate to (your) downloads folder (cd Scaricati for example if You're Italian like Me xD or a custom one... you know!)

Code:

cd ~/Downloads

Extract the SDK package

Code:

tar -zxvf android-sdk_r23.0.2-linux.tgz

move the folder inside development's one. We are already inside the downloads folder! so just run:

Code:

mv android-sdk-linux ~/development/

LINUX & WINDOWS INSTRUCTIONS

3) Setup ADB/FASTBOOT in Linux and Update Developers Tools in Linux&Windows

- Linux [You can do this step after Eclipse installation also (like in Windows), it's the same]

cd to the Android SDK tools folder by running this command:

Code:

cd ~/development/android-sdk-linux/tools

Run the SDK Manager:

Code:

./android

- Windows

Open Eclipse ADT and Navigate to/Open

Window --> Android SDK Manager

At this point the SDK should come up

and .. and... you will need to download all the tools and all the extras files already selected by default.

1. Be sure to select at least Android 4.4.2 (API 19)!!!!!!!, so select them and install'em all \m/ \m/.

2. !!!! Avoid Android L (API 20, L preview) & Android 4.4W (API 20) installation. You don't need it for now! (but, if You want to start developing apps for Android L then install them .. your choice!

)

Accept all licenses and click OK to all the prompts during installation

- Setting up ADB&FASTBOOT in Linux

When it finishes downloading everything you have to run this commands in terminal to return to Your Home folder:

Code:

cd

so let's edit the .bashrc!:

(You can also use gedit if in Ubuntu, leafpad for Lubuntu, etc etc)

Code:

nano .bashrc

and add your SDK paths at the end of it:

Code:

#Android PATHS
export PATH=$PATH:~/development/android-sdk-linux/tools
export PATH=$PATH:~/development/android-sdk-linux/platform-tools

Once done Save or press ctrl+x to exit, S and enter if You're using nano

Then Run:

Code:

source ./.bashrc

If you followed everything carefully adb and fastboot should work! To check this reopen a terminal and simply type:

Code:

fastboot

The output will look like this:

fastboot
usage: fastboot [ <option> ] <command>

commands:
update <filename> reflash device from update.zip
flashall
... bla bli blu bla bli bli blu bla bla cit. Jake

if this method is not working, then install android-tools from ppa:

Code:

sudo add-apt-repository ppa:nilarimogard/webupd8

Code:

sudo apt-get update

Code:

sudo apt-get install android-tools-adb android-tools-fastboot

Fixing ???????? No permissions errors (click to show)

4) Set up Eclipse IDE in Linux

- Dowload latest Eclipse IDE (I prefer the classical one instead of Google's one)

http://www.eclipse.org/downloads/?osType=linux&release=undefined

- Install Eclipse

cd to downloads folder

Code:

cd ~/Downloads

Extract Eclipse folder by running:

Code:

tar -zxvf eclipse-standard-luna-R-linux-gtk.tar.gz

Move this folder inside /opt folder

Code:

sudo mv eclipse /opt

Run the following command to make eclipse available for all users:

Code:

sudo ln -s /opt/eclipse/eclipse /usr/bin/eclipse

Now, we are going to add a Menu's shortcut, just create this file:

Code:

sudo nano /usr/share/applications/eclipse.desktop

and add the following content:

[Desktop Entry]
Version=4.3.2
Name=Eclipse
Comment=IDE for all seasons
Exec=env UBUNTU_MENUPROXY=0 /opt/eclipse/eclipse
Icon=/opt/eclipse/icon.xpm
Terminal=false
Type=Application
Categories=Utility;Application;Development;IDE

ctrl+x then Y to save.

- Now We can run Eclipse and choose the location of our workspace (we can leave the default one and tickmark «use this as the default and do not ask again»)

NOTE: You can also use directly Eclipse ADT + sdk instead of classical Eclipse IDE.

http://developer.android.com/sdk/index.html

5) ADT Plugin setup

FOLLOW THIS:

http://developer.android.com/sdk/installing/installing-adt.html

6) Android Studio

http://developer.android.com/sdk/installing/studio.html

- Linux

Code:

cd ~/Downloads

Code:

tar -zxvf android-studio-bundle-135.1245622-linux.tgz
mv android-studio ~/development/

To run it you just need to navigate to its bin folder and type

Code:

./studio.sh

also, check @blinqipa 's thread because I don't use Android Studio xd

http://forum.xda-developers.com/showthread.php?t=2780923

7) APKTOOL (in case You need it)

WINDOWS INSTRUCTIONS

- Download Apktool from here and extract where You want:

http://forum.xda-developers.com/showpost.php?p=50205159&postcount=90

LINUX INSTRUCTIONS

- Download it running this in a terminal:

Code:

wget https://www.dropbox.com/s/6s9bxszxjl7wclz/apktool.tar.gz

- Extract

Code:

tar -zxvf apktool.tar.gz

- cd to apktool folder

Code:

cd apktool

- Root permissions

Code:

sudo chown -R [COLOR="red"][B]yourusername[/B][/COLOR] aapt apktool apktool.jar

enricod[/COLOR @EnricoD-Aspire-5920G:~/Scrivania/apktool$

- Make them exec

Code:

sudo chmod +x aapt apktool apktool.jar

- Move to usr/local/bin

Code:

sudo cp aapt apktool apktool.jar /usr/local/bin

To see if it works just run

Code:

apktool

in a terminal. The output will look like this:

[email protected]:~/Scrivania/apktool$ apktool
Apktool v1.5.2 - a tool for reengineering Android apk files
Copyright 2010 Ryszard Wiśniewski <[email protected]>
with smali v1.4.1, and baksmali v1.4.1
Updated by @iBotPeaches <[email protected]>
Apache License 2.0 (http://www.apache.org/licenses/LICENSE-2.0)
... bla bli blu bla bli bli blu bla bla cit. Jake

- You can now delete the package and the extracted folder

- Little guide on how to use apktool

http://forum.xda-developers.com/showpost.php?p=50181967&postcount=57

upndwn4par · Oct 26, 2014

Import CM11 Template in Eclipse

IMPORT THE CYANOGENMOD TEMPLATE

1) FIRST! We open a logcat console! xD

In Eclipse navigate to

Window --> Show View --> Other... --> Android --> Logcat --> OK!

2) Download the Official Template from here and extract it where You want:

https://github.com/CyanogenMod/android_packages_themes_Template

3) Open Eclipse

File--> Import --> Android --> Existing Android Code Into Workspace

and select the root folder where the project is located, change its name, tickmark "Copy projects into workspace" and click Finish

DONE!

4) The first thing we'll do is to change the package name in AndroidManifest.xml.

- We're going to edit and add the following lines:

Code:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="[COLOR="Red"][B]com.your.theme.template[/B][/COLOR]">
<!-- Add build version number, #=number -->
[COLOR="SeaGreen"]     [B]android:versionCode="#"
     android:versionName="#" >[/B][/COLOR]
<!-- To avoid compatibility & permissions problems -->
    [COLOR="SeaGreen"][B]<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="19" />[/B][/COLOR]
<!-- Add this and your theme won't ask for strange permissions -->
    [COLOR="SeaGreen"][B]<uses-permission android:name="android.permission.SET_WALLPAPER" />[/B][/COLOR]

    <uses-feature android:required="true" android:name="org.cyanogenmod.theme" />

    <application android:hasCode="false" android:icon="@drawable/ic_launcher" android:label="[COLOR="red"][B]Theme name[/B][/COLOR]">
    </application>

    <meta-data android:name="org.cyanogenmod.theme.name" android:value="[B][COLOR="red"]Theme name[/COLOR][/B]"/>
    <meta-data android:name="org.cyanogenmod.theme.author" android:value="[COLOR="red"][B]Your name[/B][/COLOR]" />

</manifest>

NOTE: Do not add comments ()

- Navigate to

Project and

1. Clean (build only the selected projects) (disable also "build automatically")

2. Build project

As Youu can see gen files got updated

5) Run and try the theme!

Connect Your device and grant ADB access, then Select Your project and just press ctrl+f11or or Navigate to Run -->Run and select Your device

6) Export a Signed APK for the Google Play Store

- Right-Click on Your project and navigate to

Android Tools --> Export a signed application package

We select Create new keystore, save keystore where You want and add a password. When finished click next.

- In next screen

We add:

Alias
password
validity (from 1 to 1000 years)
First and lastname

- Now choose a destination and a name for Your signed apk.

and click Finish

7) Oh s****! an Error during compilation process !!!!

1 - Open the LOGCAT console!

and search for the error!!

Fix it!!!!

F.A.Q.:

1 - " OMG that desktop wallpapers are awesome, can You share?? pls pls pls pls :fingers-crossed: "

Sure!

https://dribbble.com/shots/1355879-Meteor-Wallpaper

http://images8.alphacoders.com/393/393340.jpg

2 - "d***q!, dat theme/icons are too awesome "

I'm simply running Lubuntu + Numix candies:

sudo add-apt-repository ppa:numix/ppa

sudo apt-get update

sudo apt-get install numix-gtk-theme numix-icon-theme-circle

and my personal menu icon

https://www.dropbox.com/s/u0lo7zqn7f95q3o/Senza nome.png

Credits (listed randomly):

- @hoppermi (support)
- @CyanogenMod
- @blinqipa for Android studio thread
- @ivn888
- Cristian Giordano for Theme Debugger App
- @google (Eclipse ADT, SDK)
- @eclipse (Eclipse IDE)
- @iBotPeaches for apktool
- @iamareebjamal
- Ivan Botty

NOTE:

Please, don't use this guide to develop another Android L Theme! :silly::silly::silly:

upndwn4par · Oct 26, 2014

Great places to start:

the Cyanogenmod Theme Template Github

Here you can find a detailed explanation of a CM11 Theme structure

https://github.com/CyanogenMod/android_packages_themes_Template

the Cyanogenmod Theme engine Google+ community

where You'll find lot of helpful people!

https://plus.google.com/communities/102878569352950531397

[GUIDE]Ultimate Guide to NinePatch PNG Files (9 PNG Discussion) by @iamareebjamal

http://forum.xda-developers.com/showthread.php?t=2326393

[CM11 Theme Manager] Tutorial (Android Studio) for theming beginners by @blinqipa

http://forum.xda-developers.com/showthread.php?t=2780923

Android Studio - Video Lessons by Ivan Botty

https://www.youtube.com/playlist?list=PLWB0Mwz_HN2QRJ0BVyKs3oQybdy7Qa399

Complete Your KitKat look (Holo light + CM KK UI) 33b5e5 genocide

A detailed (and featured) guide where I'll show You how to carefully change the look of Your android build from Holo Blue light to KitKat White

http://forum.xda-developers.com/showthread.php?t=2634743

Theme Debugger App

An app to test Your themed resources! by Giordano Cristian (the creator of Atomic Awesome Green theme)

https://play.google.com/store/apps/details?id=com.steel89ita.themedebugger

A collection of Stock Resources from CM and main Roms (PA and AOKP) that You can theme, by @22sl22

http://forum.xda-developers.com/showpost.php?p=53439701&postcount=38

upndwn4par · Oct 26, 2014

Basic Theming w Screenshots

FRAMEWORK

SYSTEMUI

SETTINGS

KEYGUARD

upndwn4par · Oct 26, 2014

Reserved

upndwn4par · Oct 26, 2014

An Example: The Dialer

Github is Your Friend!

- Let's open Cyanogenmod Github and search for " Dialer ":

https://github.com/CyanogenMod/android_packages_apps_Dialer

- Navigate to Res --> Values --> Colors.xml

As You can see all values are commented/explained!!

- So, let's look at the Dialer from JellyRevenge theme

Code:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  [COLOR="RoyalBlue"][B]<!-- 3 Color of dialpad digits 3  --> [/B][/COLOR]  
  <color name="dialpad_digits_text_color">#939393</color>
  [COLOR="RoyalBlue"][B]<!-- 1 Background color of action bars. It's linked with dialpad digits colors!!!! Ensure this stays in sync with packages/Telephony actionbar_background_color. 1 -->[/B][/COLOR]
  <color name="actionbar_background_color">#33b5e5</color>
  [COLOR="RoyalBlue"][B]<!-- Primary color of dialpad text, including the call button -->[/B][/COLOR]
  <color name="dialpad_primary_text_color">#33b5e5</color>
 [COLOR="RoyalBlue"][B] <!-- Secondary color of dialpad text (used for the letters corresponding to each digit -->[/B][/COLOR]
  <color name="dialpad_secondary_text_color">#8b8b8b</color>
  [COLOR="RoyalBlue"][B]<!-- 4 Background color of dialpad 4 -->[/B][/COLOR]
  <color name="background_dialpad">#000000</color>
  [COLOR="RoyalBlue"][B]<!-- 2 Pressed color of dialpad buttons 2 -->[/B][/COLOR]
  <color name="background_dialpad_pressed">#88939393</color>
</resources>

Obviously, You don't need to add these comments

UI repositories:

. Settings: https://github.com/CyanogenMod/android_packages_apps_Settings

. framework-res: https://github.com/CyanogenMod/android_frameworks_base/tree/cm-11.0/core

. "Oh s****, I can't find SystemUI, Keyguard ... etc ": You can find these UI repos inside the framework_base under "packages"

https://github.com/CyanogenMod/android_frameworks_base/tree/cm-11.0/packages

NOTE: Not all packages are commented! But all elements inside XMLs have evocative names! don't worry about that, I will show You how to make a basic theme!

Other Examples - Basic theming through XMLs

FRAMEWORK

SYSTEMUI

Koulis2000 · Aug 3, 2014

Reserved

22sl22 · Aug 20, 2014

Decompiled Resources for most densities

I case you don't know what this is or what I do here, these are decompiled resources for all the themers out there. So say you have limited internet (Only 30-40mb per file) or just don't have the time to trawl though dozens of apks, this is for you. I have decompiled 'core' apps for PA, CM and AOKP.

Core Apps are:

System-App:
DeskClock
Email

System-Priv App:
Contacts
Framework
Keyguard
Settings
SystemUI

Things included in Phone devices:
IncallUI
Dialer
MMS

If you want other apps, let me know and I will add them in a separate package :good:

I have done it for the following densities, I tried to be as broad as possible but if you want more densities/devices added, let me know :good:

XXHDPI- Hammerhead/Nexus 5
XHDPI- Mako/naxus 4
HDPI- I9100/Galaxy S2
Tablet-
Flo/Nexus 7 2013
Grouper/Nexus 7 2012

Download:

Now how I have structured it is one main folder that contains all the sub device folders with all the files you need inside compressed zips (decompiled of course

):

http://www.androidfilehost.com/?w=files&flid=17577

Enjoy and if I made any errors, let me know ASAP
If you want anything added, let me know.

Press the thanks button if you like my work :good:

EnricoD · Oct 5, 2014

My Free CM11 Themes:

AOKP Theme: https://play.google.com/store/apps/details?id=com.aokp.theme.swaggers

CHOCOUI (XDA Colors): https://play.google.com/store/apps/details?id=com.xda.theme.cyanogenmod&hl=it

JELLYREVENGE: https://play.google.com/store/apps/details?id=com.jelly.theme.revenge&hl=it

LOLLIDARK: https://play.google.com/store/apps/details?id=com.lolli.dark.enricod

AOKP SOURCES

https://github.com/enricodortenzio/packages_themes_AOKPtheme

LOLLIDARK SOURCES

https://github.com/enricodortenzio/lollidark

CHOCOUI SOURCES

https://github.com/enricocid/ChocoUI---XDA-Colors

JELLYREVENGE SOURCES

https://github.com/enricocid/JellyRevenge-CM11-theme

APKs Installer Sources (Read the readme carefully!)

https://github.com/enricocid/APKs-Installer

LuqmaanMathee · Jul 12, 2014 at 2:27 PM

I also run Lubuntu?

---------- Post added at 03:27 PM ---------- Previous post was at 03:27 PM ----------

LuqmaanMathee said:
I also run Lubuntu?

And great guide.

22sl22 · Jul 12, 2014 at 6:00 PM

Awesome guide, damn you reserved a lot of posts

If you need an updated version of the resources, let me know. I remember we were talking LDPI and some other resolutions in the other thread, let me know if you want those. They could probably do with an update any way :good: :good:

EnricoD · Jul 12, 2014 at 6:08 PM

22sl22 said:
Awesome guide, damn you reserved a lot of posts

If you need an updated version of the resources, let me know. I remember we were talking LDPI and some other resolutions in the other thread, let me know if you want those. They could probably do with an update any way :good: :good:

I can reserve one of these threads.to You , You will post resources if You want

22sl22 · Jul 12, 2014 at 6:11 PM

EnricoD said:
I can reserve one of these threads.to You , You will post resources if You want

Ok I'll download some more roms and post updated resources then

Sent from my Nexus 4 using Tapatalk

EnricoD · Jul 12, 2014 at 6:51 PM

22sl22 said:
Ok I'll download some more roms and post updated resources then

Sent from my Nexus 4 using Tapatalk

I asked moderator to reserve You the post #4

You will be able to edit asap

EnricoD · Jul 12, 2014

added some visual instructions

will add more next days, don't worry

i will also add tips to theme things by xml

e.g the dialer, the dialogs ... etc etc... and i will show You also how you can use github to know what to theme

commented cmlol will be update to the github

hoppermi · Jul 12, 2014 at 10:39 PM

Subscribed! I will assist when I can answering questions.

Sent from my Nexus 5 using Tapatalk

Andr3y29 · Jul 17, 2014 at 4:33 PM

Now preparing my setup. Hopefully something will succeed out of this.
Congratulations for your comprehensive tutorial.

ajua · Nov 5, 2010 244 69 0

Excellent tutorial, looking forward for more resources and tips. I don't have code experience on Android but I will definitively try to make a few themes for myself and then release them if everything works at the end

Koulis2000 · Jul 19, 2014 at 10:09 AM

Why not add an Android Studio guide aswell? I believe it's far easier to set up and start building CM Themes, plus, users have the ability to use flavors. I can help you with that.

EnricoD · Jul 19, 2014 at 10:20 AM

Koulis2000 said:
Why not add an Android Studio guide aswell? I believe it's far easier to set up and start building CM Themes, plus, users have the ability to use flavors. I can help you with that.

If You want I'll give You a post

You're welcome

[Guide] Create a CM Theme: From environment setup to publishing on Google Play

Inactive Recognized Developer

Inactive Recognized Developer

Inactive Recognized Developer

Inactive Recognized Developer

Inactive Recognized Developer

Inactive Recognized Developer

Senior Member

Senior Member

EnricoD

Guest

Senior Member

Senior Member

EnricoD

Guest

Senior Member

EnricoD

Guest

EnricoD

Guest

Senior Member

Senior Member

Senior Member

Senior Member

EnricoD

Guest