[Android Themes] TheArc:
- Section One -

Hey guys! I'm back again with another contribution to the community, this time I'm posting a guide on behalf of my theme, Svelte UI.

I have noticed there is a very few amount of theme's available for the new CyanogenMod Theme Chooser out there. And hopefully I can change this.

This guide will cover everything needed to create a Theme, from creating the initial project to theming itself. And some tips on how I theme.

And to make all you lovely people even happier. I will provide all code and even a sample .apk ;)

And also I don't want to add screenshots of my desktop to this thread, because the resolution will be way to big. Instead I'll have links. So let's get started shall we?

VIDEO TUTORIALS

[x] One - Create Project

[x] Two - Initial Setup

More coming.

- Section One -

This section is vital for you to accomplish your theme, so please do not skim through it.

For the requirements, you need an IDE. Yes I will be showing you how build the theme from scratch and not a template.

Use an IDE that you're comfortable with, I wont be showing yo how to use it. I will be using Eclipse for this tutorial.

You will need an image editing program, I am going to use Paint.NET. It's free, advanced, and does the job as good as Photoshop.

We are also going to need patience. Yeap. Theming takes allot of time and patience, it is frustrating especially if you're doing precise editing but it's worth it at the end.

One more thing we are going to need is, an APK decompiler. So download one you like, install the required .apk's for it to work properly.

Then get hold of the SystemUI.apk and Framework-res.apk, we're going to use this later.

- Section One -

Okay, now go ahead and open up your IDE, and create a new Project, give it a name and an appropriate package name.

For example mine is "Svelte UI" and "com.ascendapps.sui". [View Screenshot]

Now click next till you end the project setup. Once your project has been created.

- Section Two -

Go ahead and delete the following folders.

[src, layout, menu, values-sw600dp, and values-sw720dp-land also delete drawable-ldpi if you want] [View Screenshot]

Now in the values folder, create a new xml and call it "public.xml" and make sure to delete the "dimens.xml" file.

Inside the xml file (public.xml) add the following code - [View Screenshot]

<?xml version="1.0" encoding="utf-8"?>
<resources>
<public type="drawable" name="ic_launcher" id="0x7f020000" />
<public type="string" name="app_name" id="0x7f030000" />
<public type="style" name="AppBaseTheme" id="0x7f040000" />
<public type="style" name="AppTheme" id="0x7f040001" />
</resources>

- Section Three -

Now go ahead and save it. Make you save things when working throughout your project, better be safe than sorry.

Open up AndroidManifest.xml, and add the following code and do what it tells you - [View Screenshot]

<?xml version="1.0" encoding="utf-8"?>
<manifest android:versionCode="7" android:versionName="1.0" package="com.ascendapps.sui" <!-- Enter the package name of your project that you had done in the setup earlier -->
xmlns:android="http://schemas.android.com/apk/res/android">
<uses-feature android:name="org.cyanogenmod.theme" android:required="true" />
<application android:label="Svelte" android:icon="@drawable/ic_launcher" android:hasCode="false" /> <!-- Change label to theme name -->
<meta-data android:name="org.cyanogenmod.theme.name" android:value="Svelte" /> <!-- Name of Theme -->
<meta-data android:name="org.cyanogenmod.theme.author" android:value="Krish Gounder" /> <!-- Your Name -->
</manifest>

.

Please make sure to delete the Info statements once you've finished editing the xml.

For example delete the lines in green. Which is the following -

<!-- Your Name -->
<!-- Name of Theme -->
<!-- Change label to theme name -->
<!-- Enter the package name of your project that you had done in the setup earlier -->

- Section Four -

Now save your project, and close everything. Once closed, navigate to your project workspace. In there you should see your projects name.

Like this . [View Screenshot]

Open the the project then inside the work folder open the "Assets" folder. This is where everything comes to life.

Go ahead, and create the things you want to be included in your theme.

- fonts - If you wish to use different fonts in your theme.

- images - The images that are displayed when applying the theme.

- overlays - You must create this folder, this is where all the theming images are kept.

- wallpapers - If you want to add a wallpaper to your theme. Use .jpg

- bootanimation- Add a .zip file of your bootanimation in here.

- alarms - If you want to add alarm sounds to your theme.

- lockscreen - Add a lockscreen wallpaper. Use .jpg

- notifications - If you want notification sounds.

- ringtones - If you want to have ringtone sounds.

I will be using images, overlays and wallpapers.

So inside the images folder you will need -

lockscreen_preview.jpg if you are having a lockscreen wallpaper.

styles_preview.jpg just add your wallpaper.

wallpaper_preview.jpg Just use the wallpaper and add an icon in the middle of the image.

Add your wallpaper in the wallpapers folder and name it - wallpaper1.jpg

[Screenshot One] - [Screenshot Two] Now we've completed this section.

- Section One -

For theming you'll need a reasonable image editing software, Paint.NET works quite well.

So you want to know how to theme apps and components? Let's start with the framework-res.apk.

Earlier, I had stated that you'll need an APK Decompiler. So using the decompiler, decompile the framework-res.apk.

Open up to decompiled project and navigate to the folder you wish to work on. for example, drawable-xxhdpi.

Now in your theme work folder, go into "overlays" and create a folder called "android"

Inside there, create a folder called "res" and inside "res" create drawable-xxhdpi or the folder you chose.

Now go back to the project you decompiled earlier, and copy in all the .png files that you know you'll theme.

- Section Two -

How to them other apps and get it to work. the way the theme chooser knows what to them is by package names.

So if you want to theme an app you''l need to find out it's package name. For example Instagram is - com.android.instagram

If you make a folder with that name, and inside you have to create the res folder, it's basically the same layout but the initial name is the package name.

- Section Three -

It's often weird to work with .9.png's when you come face to face with it the first time. The best way to edit them is by working with the image inside the borders.

By this I mean, when you open the image in an editor it has these black lines around the edges, using a selecting tool. select everything inside the border, and do not select the border.

These borders help the Android system with stretching the image.

CREDITS -

[x] Me for preparing this guide.

[x] CyanogenMod Team for the Theme Chooser.

[x] Imgur

[x] XDA

[x] Eclipse

[x] QuickMod Dev

[x] And curiosity.