Android by Yorzua

Search this site

3D / Animation

Windows

201days since
Galaxy S4 i9505 at home :)

Site owners

  • Josué Gonzalez

Become a Themer

I will guide you into Android 2.3 Google AOSP xml code.

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 ☺



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++

Installation for noobs

  • Windows:
    1. Download apktool-install-windows-* file
    2. Download apktool-* file
    3. Unpack both to your Windows directory
  • Linux:
    1. Download apktool-install-linux-* file
    2. Download apktool-* file
    3. Unpack both to /usr/local/bin directory (you must have root permissions)
  • Mac OS X:
    1. Download apktool-install-macos-* file
    2. Download apktool-* file
    3. Unpack both to /usr/local/bin directory (you must have root permissions)

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.


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.



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.statusbar.Clock android:textColor="#ffff0000" android:textStyle="italic" android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" androidaddingRight="6.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent" 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.CarrierLabel"
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 (@drawable/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 :

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
Comments