[Themer General Discussion] Rock-star:
Become a Themer Tutorial By Rock-Star

First rule before to start how to learn to theme your device :

Always make a backup of the files you are about to edit or do a nandroid backup.

If anything goes wrong you will get a bootloop.

If you are modding an apk and you are seeing a textAppearance,color,background

or similar => If the value starts with

"@android:" then you will find the source

in the framework-res.apk of the same rom.

☺ TOOLS you must have ☺

1. APKTOOL [http://code.google.com/p/

android-apktool/]

This tool will allow you to decompile and

compile all apk's

When you decompile an apk, you can now

edit the xml's with a source code editor

like Notepad++

2. NOTEPAD++ [http://notepad-plus-

plus.org/]

This tool will allow you to edit the xml's

decompiled from the apk's

Written on C++ and using Win32API, you

will be able to easily change, copy, trace,

find all the codes you will find in this

guide.

3. ADB [http://developer.android.com/

guide/developing/tools/adb.html]

Android Debug Bridge (adb) is a versatile

command line tool that lets you

communicate with an emulator instance or

connected Android-powered device. You

will be able to push, replace, delete,

overwrite files directly from your

computer to your android device.

4. SMALI/BAKSMALI [http://

code.google.com/p/smali/]

An assembler/disassembler for Android's

dex format.

5. 7-ZIP [http://www.7-zip.org/]

An open source file archiver with a high

compression ratio.

6. PAINT.NET [http://www.paint.net/]

or any other Graphics editor you like to

use as Photoshop or Gimp.

Now let's play with your theme and for that, the very first thing you will need is

to locate :

framework-res.apk

SystemUI.apk

Keep always a safe copy for both of them as you may experiment some issues during

the compile phase, which means that you

did something wrong ( even a small space

or letter ) and you will must come back to

the previous "working" modded version of

your apk.

Don't try to go too fast

Start with one step at once until you feel

experimented enough to edit more things at the time

A good tip to double check if anything goes wrong : your apk must decompile and compile without errors !

Test and flash via Recovery when you are done : if it is working, then you can start from your new framework-res/systemUI

apk's to go further.

1. Status bar

1.1. Clock, Date and notification ticker

It's now much easier to modify the clock in

the status bar as it is now located within a .xml-file.

Files to edit:

/system/app/ SystemUI.apk

DECOMPILED_DIR/res/layout/

status_bar.xml

1.1.1. Clock

Search for a line that begins with

"<com.android.systemui.statusbar.Clock" .

You now have two ways for changing the

font-style and color:

Adding

android:textColor="TEXTCOLOR"

and/or

android:textStyle="TEXTSTYLE"

where TEXTCOLOR can be a HTML color

(#TTRRGGBB - TT means transparency)

and TEXTSTYLE can be "bold", "bold|

italic", "italic" or "" Changing the style of

android:textAppearance.

This can be easier but keep in mind that

this style could be used somewhere else.

A possible new line could be:

<com.android.systemui.statusba

android:textColor="#ffff0000

android:textStyle="italic"

android:textAppearance="@and

TextAppearance.StatusBar.Icon"

android:gravity="left|

center"

androidaddingRight="6.0dip"

android:layout_width="wrap_co

android:layout_height="fill_pa

android:singleLine="true" />

With this you would get an

italic, red clock.

1.1.2. Date

The date which you can see in the status

bar can be modified by editing the line

beginning with

"<com.android.systemui.statusbar.DateView".

As with the clock, you can either add

textColor and textStyle or change the

android:textAppearance

1.1.3. Notification ticker

Search for the line containing "@id/

tickerText" .

It is followed by two other lines which

contain

"android:textAppearance="@android:style/

TextAppearance.StatusBar.Ticker"" .

As with the clock, you can either add

textColor and textStyle or change the

android:textAppearance

2. Carrier, Ongoing-Title, Notifications-

Title, Clear-Button, noNotificationsTitle

Files to edit:

/system/app/ SystemUI.apk

DECOMPILED_DIR/res/layout/

status_bar_expanded.xml

2.1. Carrier

Search for the line beginning with

"<com.android.systemui.statusbar.CarrierLabe

This line contains the text for the carrier

and its appearance.

The background for the carrier label can

be changed one line above using the

"android:background" attribute.

It can be a pre-defined color value

(@color/NAME_OF_COLOR ), a html color

value (#TTRRGGBB ) or even a graphics

file ( [MENTION=3944923]drawab[/MENTION]le/NAME_OF_GRAPHIC ).

2.2. Ongoing-Title

Search for android:id="@id/

ongoingTitle" .

This is the Ongoing-Title.

As with other texts you can add/change

"android:textAppearance",

"android:textColor" and

"android:textStyle"

The background is defined in the

"android:background" attribute.

2.3. Notifications-Title

Search for android:id="@id/latestTitle" .

This is the Notifications-Title.

As with other texts you can add/change

"android:textAppearance",

"android:textColor" and

"android:textStyle"

The background is defined in the

"android:background" attribute.

2.4. noNotificationsTitle

Search for android:id="@id/

noNotificationsTitle" .

This is the text when no notification is

displayed.

As with other texts you can add/change

"android:textAppearance",

"android:textColor" and

"android:textStyle"

The background is defined in the

"android:background" attribute.

2.5. Clear-Button

Search for android:id="@id/

clear_all_button" .

This is the text of the Clear-Button

________________________________________

3. Notifications

Files to edit:

/system/frameworks/ framework-res.apk

DECOMPILED_DIR/res/layout/

status_bar_latest_event_content.xml

In this file you find the texts for :

the title of the notification: Search

for android:id="@id/title" .

Textcolor and textstyle are editable via

style or directly in the xml (see point

1.1.1.)

the description of the notification:

Search for android:id="@id/text"

the time of the notification: Search

for android:id="@id/time"

________________________________________

4. Color of the progress bars and seek bars

4.1. progress bars

Files to edit:

/system/framework/ framework-res.apk

DECOMPILED_DIR/res/drawable/

progress_horizontal.xml

The progress bar uses gradients to set the

color which goes from top to bottom.

You have to set three colors: start (top of

the bar), end (bottom of the bar) and

middle.

<item android:id="@id/background">

is for the unused part of the progress

bar.

<item android:id="@id/progress"> is

for the used part of the progress bar.

4.2. seek bars

Files to edit:

/system/framework/ framework-res.apk

DECOMPILED_DIR/res/values/ styles.xml

Seek bars are progress bar like components

which enables you to change a value within

a range (you will see some in the sound

settings (Settings -> Sound -> Volume) or

when changing the brightness of the

display).

By default, the seek bars are using the

color settings of the progress bar to

display the current position (so it should

be possible to use different ones by using

another .xml than the progress bars).

To modify it, open the styles.xml

Search for <style name="Widget.SeekBar"

parent="@style/Widget"> .

Here you can change :

the height (<item name="maxHeight"> and

<item name="minHeight"> ),

the appearance (<item

name="indeterminateDrawable"> and <item

name="progressDrawable"> )

the graphic of the thumb ( <item

name="thumb"> , res/drawable/

seek_thumb.xml ).

The thumb itself comes in three files,

located in res/drawable-hdpi:

seek_thumb_normal.png

seek_thumb_pressed.png

seek_thumb_selected.png

________________________________________

5. Color of selected text within text fields

Files to edit:

/system/framework/ framework-res.apk

DECOMPILED_DIR/res/values/ styles.xml

Search for <style

name="TextAppearance"> in the

styles.xml.

The color for the selected text is the node

textColorHighlight

________________________________________

6. Transparency

6.1. notification drawer

If you use a ROM that doesn't have a

transparent notification drawer by

default, then you have to do this:

Decompile your SystemUI.apk using

apktool.jar (or just decompile the

classes.dex using baksmali). Browse to the

folder smali/com/android/systemui/

statusbar/ (or com/android/systemui/

statusbar/ if you have just decompiled

classes.dex).

Edit the file StatusBarService.smali.

Search for the following line:

invoke-direct/range {v0 .. v5}, Landroid/

view/WindowManager$LayoutParams;-

><init>(IIIII)V

above that line you must have

const/4 v5, 0x2

change this to

const/4 v5, -0x3

After recompiling SystemUI.apk and

pushing it to the phone you can get

something like this :

6.2. Status bar

If you use a ROM that doesn't have a

transparent status bar by default, then

you have to do this:

Decompile your SystemUI.apk using

apktool.jar (or just decompile the

classes.dex using baksmali).

Browse to the folder smali/com/android/

systemui/statusbar/ (or com/android/

systemui/statusbar/ if you have just

decompiled classes.dex).

Edit the file StatusBarService.smali.

Search for the following line:

invoke-direct/range {v0 .. v5}, Landroid/

view/WindowManager$LayoutParams;-

><init>(IIIII)V

directly above it you will find

const/4 v5, 0x2

change this to

const/4 v5, -0x3

Recompiling SystemUI.apk and pushing it to

the phone (I tested it with the emulator).

________________________________________

7. Graphics

After you have decompiled your .apk files

you will end up with a lot of graphic files

in :

res/ drawable-hdpi (or res/drawable-

hdpi-v4 depending on your apktool.jar

version).

This is the right place to edit notification

icons, the notification bar and drawer,

menu item background (list, grid, etc.),

buttons, etc.

Some files will have .9.png . These are

Nine-Patch-files.

You will find more information on those

files :

http://developer.android.com/guide/

topics/resources/drawable-

resource.html#NinePatch

http://developer.android.com/guide/

topics/graphics/2d-

graphics.html#nine-patch

Let's begin with the status bar and

notification drawer:

7.1. Status Bar

To get a new status bar background, you

have to edit the file :

statusbar_background.

You find it in the SystemUI.apk . Can be

.png or .9.png

7.2. Notification Drawer

(The notification drawer constists of

several files.)

7.2.1 Carrier/Provider area

To change the background for the Carrier/

Provider area you have to edit the file :

status_bar_header_background

You find it in the SystemUI.apk . Can be

.png or .9.png

7.2.2 Ongoing and Notifications

To change the background for the Ongoing

and Notifications area you have to edit

the file :

title_bar_portrait

You find it in the SystemUI.apk . Can be

.png or .9.png

7.2.3 Notifications

To change the background for the

notification area you have to edit the file

:

status_bar_item_background_normal

You find it in the framework-res.apk .

This will be the background if you're just

look at the notifications.

When focusing a notification it will be the

file :

status_bar_item_background_focus

when you push/press it you have to edit

the file :

status_bar_item_background_pressed

The notifications are divided by the file

divider_horizontal_bright. Can be .png or

.9.png

7.2.4 Unused area

The area where no notification is displayed

is set in the file :

SystemUI.apk/res/layout/

status_bar_tracking.xml .

You have to change the attribute

android:background of the View-node.

It can be a color-value, a predefined color

or a graphics file.

Depending on your ROM it will even display

transparency. Can be .png or .9.png

7.2.5 Bottom

The bottom part of the expanded drawer is

status_bar_close_on .

You find it in the SystemUI.apk . This will

use transparency too. Can be .png or .9.png

7.3. Animated notification icons

7.3.1 Battery (uncharging)

Depending on your ROM there will be more

or less files for the battery gauge.

They begin with stat_sys_battery_

followed by a number.

The order how they are get displayed is

configured in the file :

res/drawable/ stat_sys_battery.xml .

You find it in the framework-res.apk .

7.3.2 Battery (charging)

Depending on your ROM there will be more

or less files for the battery charging

gauge.

They begin with

stat_sys_battery_charge_anim followed

by a number.

The order how they are get displayed is

configured in the file :

res/drawable/

stat_sys_battery_charge_anim.xml .

You find it in the framework-res.apk .

7.3.3 Download and upload animation

The files for the upload and download

animation begin with

stat_sys_download_anim and

stat_sys_upload_anim followed by a

number.

The order how they are get displayed is

configured in the files :

res/drawable/

stat_sys_download_anim.xml

res/drawable/

stat_sys_upload_anim.xml .

You find it in the framework-res.apk .

8.4. Other files

8.4.1 Title for detailed view in call history

You will find the background for this in

the file title_bar_tall. You find it in the

framework-res.apk .

8.4.2 Title for contacts

You will find the background for this in

the file title_bar_medium. You find it in

the framework-res.apk .

8.4.3 Background for the grid menu

The grid menu is the one when you press

the menu button within an application.

The following files are used and you find

them in the framework-res.apk :

menu_background: This the background

for one grid element.

menu_background_fill_parent_width:

the whole grid

To change the text color you have to set

the color for the style

TextAppearance.Widget.IconMenu.Item in

the file res/values/ styles.xml

After pressing "More" you will find

another menu. The text colors for this

menu can be found in the style

Theme.ExpandedMenu.

________________________________________

9. Applications

9.1. Ongoing downloads

You should have noticed that the text color

of ongoing downloads in the notification

area doesn't look like the text colors for

normal notifications.

To change this color you have to change

the file /system/app/

DownloadProvider.apk .

You'll find the color values in res/layout/

status_bar_ongoing_event_progress_bar.xml .

It uses the same names as the one in the

framework-res.apk. After you have

recompiled it you can flash it to your

phone. You should see the new colors at the

next download.

9.1. Notifications of music player

If you are using the default music player

(/system/app/Music.apk) then you can

change the colors it uses for notifications

as well.

After you have decompiled it, open res/

layout/ statusbar.xml and edit the values :

@id/artistalbum

@id/trackname

Thanks for your time and your attention

Have Fun ☼

#PLEASE PRESS THANKS#