Database Develop

[TUTORIAL]Theme for Helicopter Game with images

Here is an official tutorial for how to design a theme for "Helicopter Game" which is available in the market.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Step 1 - create a new android project using the following settings:
build target 2.2
create activity: main
min sdk version 4
Step 2 - create a new android xml in res/values called theme_config.xml
Fill in these details
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<integer name="red">0</integer>
<integer name="green">186</integer>
<integer name="blue">255</integer>
<integer name="fred">0</integer>
<integer name="fgreen">0</integer>
<integer name="fblue">0</integer>
<bool name="randomSmoke">false</bool>
</resources>
red, blue, and green are for the background color
fred, fgreen, and fblue are for the font color
randomSmoke is a boolean (if true it will rotate the smoke particles randomly - set to true by default)
Step 3 - Edit res/values/strings.xml and add your app name, so it should look something like this:
Code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, main!</string>
<string name="app_name">HGTheme: Shark</string>
</resources>
Step 5 - Edit your AndroidManifest.xml file, add in the following intent filters
Code:
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".main"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<action android:name="com.fkarim.helicopter.THEMES" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
<intent-filter>
<action android:name="com.fkarim.helicopter.ACTION_PICK_ICON" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
Step 6 - make your images and put them in res/drawable
you need the following images:
cavewalls.png (240 x 240)
roof.png(240 x 240) - optional if you want a different colored cave ceiling
copter.png (around 120 x 50)
obstacles.png (50 x 100)
smoke.png (32 x 32)
Step 7 - publish your app
If you need some help for how to publish an app check out this article:
http://www.devx.com/wireless/Article/39972/1954
make sure the name starts with "HGTheme :" (and should have "helicopter game theme" in the description for now) so its easy for people to search for it in the market.
Thanks for reading the tutorial. I will be posting an example theme soon with the source code also.

I've released two themes in the market. Here is the packaged source of the shark theme if anyone would like to take a look.

I have added two other features, the ability to prevent the smoke from being rotated and having a different image for the roof and floor of the cave. If anyone is interested in designing a theme, please let me know if you need help.

Help with menu popup.

I own a Orange San Francisco (ZTE Blade) and i have been trying to get black menu popups to work properly. They are sorted for main screen and most apps like gmail etc. However certain apps like Root Explorer still had white menus and it was impossible to read them with white text too (from the black parts!).
I got these instructions from someone...
Mike_P said:
Can't comment on other apps that have white menus but I followed what was in 2.1 theme and it seemed to work in 2.2 (well in RootExplorer at least).
You need to edit the res\values\styles.xml and the res\drawable\menu_selector.xml.
In styles.xml add the 5th 'item name' line like below...
Code:
<style name="Theme.ExpandedMenu" parent="@style/Theme">
<item name="listViewStyle">@style/Widget.ListView.Menu</item>
<item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
<item name="background">@null</item>
<item name="itemTextAppearance">?textAppearanceLarge</item>
<item name="itemBackground">@drawable/menu_selector</item>
</style>
In menu_selector.xml add the 'item android drawable' line at the end like below...
Code:
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/highlight_pressed" />
<item android:state_enabled="false" android:state_selected="true" android:drawable="@drawable/highlight_disabled" />
<item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/highlight_selected" />
<item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/highlight_disabled" />
<item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/highlight_selected" />
<item android:drawable="@drawable/screen_background_dark" />
</selector>
Click to expand...
Click to collapse
This all seemed to go ok but i have a few white lines plaguing an otherwise perfect look.
In this first image everything is fine other than the line that seperates top and bottom icons...It's really bright obvious white. What can i do to fix this?
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Then this menu has an obvious white line around the edges. But separators are fine. Any ideas on this part too?
Thanks for any help in advance.
EDIT:
Oh it should be noted i have tried images from a gingerbread theme that has these menu parts coloured correctly so it's not a .png anywhere. It's somethign in styles.xml or somethign else

http://forum.xda-developers.com/showthread.php?t=865753
this theme is what you want

[REQ] help to finish a battery charge animation

I am trying to finish off a new status bar battery/charge animation on my Htc Desire Froyo.
I have all the png's I think I need but they do not display how I would like.
The problem is that when the battery is fully charged but still connected to a power supply, the stat_sys_battery_charge_anim100.png is not displayed and is replaced by stat_sys_battery_100.png.
It obviously knows it is fully charged and still connected because the LED switches from orange (charging) to green (charged) and off (disconnected).
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
stat_sys_battery_100.png
stat_sys_battery_charge_anim100.png
I assume it has nothing to do with the stat_sys_battery_charge.xml or stat_sys_battery.xml and I need to edit something elsewhere, but what/where?
Also, ic_lock_idle_charging.png works fine on the lockscreen but how could I get that to change to another image when fully charged and still connected to a power supply?
As side notes:
stat_sys_battery_100.png down to stat_sys_battery_0.png display ok when not charging.
stat_sys_battery_charge_anim0.png to stat_sys_battery_charge_anim99.png display ok when charging.
I also renamed a copy of stat_sys_battery_charge_anim100.png to stat_sys_battery_charge_animfull.png but I have never seen that entered in any stat_sys_battery_charge.xml, so I do not know what might call up that image anyway.
Any help would be greatly appriciated.
Sorry if this thread is in wrong section or answered previously, I did search for quite some time and in various ways but perhaps wrong search terms.

post your charge xml

Sorry about that. I had forgot I broke the links in the OP when I changed file hosting sites.
Should be fixed now.

Change
<item android:drawable="@drawable/stat_sys_battery_charge_anim100" android:maxLevel="101" />
to
<item android:maxLevel="101">
<animation-list androidoneshot="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:duration="2000" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
</animation-list>
</item>

Did you add the new values in the android.xml file?
Sent from my Nexus S using XDA App

Thank you for your responces. I will take a look later (if I get time).

@santiemanuel
Last night I editted stat_sys_battery_charge.xml but it hasd the same result.
When charging the icons shown were:
stat_sys_battery_charge_anim98.png (orange LED on)
stat_sys_battery_charge_anim99.png (orange LED on)
stat_sys_battery_100.png (green LED on)
Removed charger lead:
stat_sys_battery_100.png (LED off)
stat_sys_battery_charge.xml Please check I have editted this correctly?
nbeebe24 said:
Did you add the new values in the android.xml file?
Sent from my Nexus S using XDA App
Click to expand...
Click to collapse
No and I have not seen android.xml, did you mean AndroidManifest.xml in framework-res.apk?
I have looked in framework-res.apk\res\values\public.xml and all the values (eg. stat_sys_battery_charge_anim100, stat_sys_battery_charge_animfull, ect) that are in stat_sys_battery_charge.xml are in public.xml.
I am not sure that information ^ has any relevance to this conversation or not. Sorry if I am plucking at straws.
@nbeebe24
&
@santiemanuel
Do you think the problem is not the stat_sys_battery_charge.xml but deeper issue in the rom?

I also tried this but same result again stat_sys_battery_charge.xml

I don't quite understand what your trying to achieve. You want that battery animation to be the same as the others? Why don't you try the uot kitchen?
Sent from my Nexus S using XDA App

At the moment my "counting" charge animation runs from 00 to the current charge percentage, stays on that percentage for a short time, then starts again. Like the animation in my signature strip.
But the problem is that when the battery is charged to 100% it counts from 00 to 99 but fails to use stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png, instead it shows stat_sys_battery_100.png.
So, even with the charge lead still connected, the end of the "counting" charge animation looks like this.
stat_sys_battery_charge_anim97.png
stat_sys_battery_charge_anim98.png
stat_sys_battery_charge_anim99.png
stat_sys_battery_100.png
What I am trying to achieve is when the charge lead is still connected and at 100%, I want it to use either stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png (or both) so I can get it to look like this.
stat_sys_battery_charge_anim97.png
stat_sys_battery_charge_anim98.png
stat_sys_battery_charge_anim99.png
stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png
Then when I unplug the charge lead, it shows
stat_sys_battery_100.png

LfcFan1977 said:
At the moment my "counting" charge animation runs from 00 to the current charge percentage, stays on that percentage for a short time, then starts again. Like the animation in my signature strip.
But the problem is that when the battery is charged to 100% it counts from 00 to 99 but fails to use stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png, instead it shows stat_sys_battery_100.png.
So, even with the charge lead still connected, the end of the "counting" charge animation looks like this.
stat_sys_battery_charge_anim97.png
stat_sys_battery_charge_anim98.png
stat_sys_battery_charge_anim99.png
stat_sys_battery_100.png
What I am trying to achieve is when the charge lead is still connected and at 100%, I want it to use either stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png (or both) so I can get it to look like this.
stat_sys_battery_charge_anim97.png
stat_sys_battery_charge_anim98.png
stat_sys_battery_charge_anim99.png
stat_sys_battery_charge_anim100.png or stat_sys_battery_charge_animfull.png
Then when I unplug the charge lead, it shows
stat_sys_battery_100.png
Click to expand...
Click to collapse
Is the full battery animation added to the battery charge XML?
Sent from my Nexus S using XDA App

Sorry, I am not quite sure if this answers your question. If not, please re-phrase.
This is what the final part of stat_sys_battery_charge.xml looks like.
Code:
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim93" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim94" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim95" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim96" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim97" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim98" />
<item android:duration="80" android:drawable="@drawable/stat_sys_battery_charge_anim99" />
<item android:duration="2000" android:drawable="@drawable/stat_sys_battery_charge_anim100" />
</animation-list>
</item>
<item android:drawable="@drawable/stat_sys_battery_charge_anim100" android:maxLevel="101" />
</level-list>
Even with the changes that santiemanuel suggested, it still finishes as described in post #11.
And it is the same if I replace stat_sys_battery_charge_anim100 with stat_sys_battery_charge_animfull.

If I were you I would just rename the full animation to the 100 percent, and the unplug to the full
Sent from my Xoom using XDA App

I don't think that the image names or the contents of the two xml's sre the problem.
I have tried numerous edits to the stat_sys_battery_charge.xml but
stat_sys_battery_charge_animfull.png
and
stat_sys_battery_charge_anim100.png
are not getting displayed at any point.
Only
stat_sys_battery_100.png
is being displayed after
stat_sys_battery_charge_anim99.png
I want and would expect the images listed in stat_sys_battery_charge.xml to be displayed when the charge lead is still connected.
And the images listed in stat_sys_battery.xml to only be displayed when the charge lead is disconnected.
When connected to the charge lead, at 0% to 99% something tells the notification LED to light up orange and at 100% it is told to turn green, what could that be?
I think (what ever it is) it should be telling the stat_sys_battery_charge.xml to stay active when the charge lead is connected and only swap to using stat_sys_battery.xml when the charge lead is disconnected. Not swap when the battery charge percentage reaches 100%.
Does that sound right?

[Q/A] Theming questions

I know this isn't the question/answer section, but it is the theming section. This will probably also get lost in all the other threads, but I figured there are enough people that have asked questions it might be a good idea to make this thread. The idea is, post a question, any question, about theming and me or someone else will answer it. I'm not a theming genius but I know a bit about theming and there are many more people that know much more than I do that might be able to help. This can also be a discussion place for people to figure out how to solve issues that no one is quite sure how to solve yet. I will post a few of the posts that I can find that answer some of the questions people have asked as a basis to get started.
Some people don't know where to start, so here are the "tools of the trade."​
Graphics Editing Software
___________________________________________
You will need some sort of image manipulation or graphics editing software. There are some free options out there and some not so free, but you can usually find a quality program to fit your budget.
This s a list of good programs that I know of, but I have only actually used GIMP and Photoshop.
-GIMP (FREE - Linux/Windows/Mac)
-Photoshop (PAID - Windows/Mac) Here's a quick tip if you want to use Photoshop.
-PaintShop Pro (PAID - Windows)
-Pixelmator (PAID - Mac)
-Paint.NET (FREE - Windows)
Android SDK
___________________________________________
The Android SDK contains a set of tools that are essential to theming.
Get the SDK here.
(will update in the future with what these tools are and how to use them)
Tools you will need:
- Draw 9-Patch (/tools directory of the sdk)
- DDMS (/tools directory of the sdk)
- Zipalign (/tools directory of the sdk)
- ADB (/platform-tools directory of the sdk)
APK Manager (apk tool)
___________________________________________
APK Manager is a simple to use, easy to understand tool that utilizes apk tool, zipalign, and a bunch of other tools. I recommend using this as it is easier to use for newer people, but I prefer to use apktool as it is more versatile.
I always had problems with the apk tool that APK Manager 4.9 comes with, so if it doesn't work for you (mainly on Samsung ROMs as far as I know) you may want to replace the apktool.jar in the /other directory of the APK Manager with this apktool.jar.
7-zip - WinRAR
___________________________________________
This is definitely a must. Windows has a built in .zip browser but I strongly recommend using 7-zip or WinRAR. I personally like 7-zip more, but that is all personal preference. You can open APK files as an archive, without having to decompile it. This allows you to do quick .png editing, or you can even replace post-compiled xml with other post-compiled xml if you so desire.
OptiPNG
___________________________________________
This isn't essential but it is something I strongly recommend as a "quality" standpoint. OptiPNG allows you to optimize the .png's in your theme by recompressing the image files down to a smaller size, allowing them to be loaded faster. Don't worry though, no information or quality is lost in the process.
Notepad ++
___________________________________________
This is another essential tool for theming. Notepad ++ is by-far the best text-editing program on the market for Windows. At least, in my opinion. It is also free. Basically if you want to do any xml editing, you need this tool. You can also do just about anything else that you want to do with it...​
Q:
Could someone please tell me where the background color can be modified for the menu button (wallpaper, settings, search, etc)? I have been looking everywhere for this, but I am not finding it.
Click to expand...
Click to collapse
A:
There are a few things to look for to get the look that you want.
in /res/values/styles.xml depending on what you have for this set of xml determines which .png's the framework is using:
Code:
<style name="Theme.IconMenu" parent="@style/Theme">
<item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
<item name="background">@null</item>
<item name="itemTextAppearance">@style/TextAppearance.Widget.IconMenu.Item</item>
<item name="horizontalDivider">@drawable/divider_horizontal_bright</item>
<item name="verticalDivider">@drawable/divider_vertical_bright</item>
<item name="itemBackground">@drawable/menu_selector</item>
<item name="itemIconDisabledAlpha">?disabledAlpha</item>
<item name="moreIcon">@drawable/ic_menu_more</item>
</style>
but if you are using an existing theme that is darker then the chances are it will be something like this:
Code:
<style name="Theme.IconMenu" parent="@style/Theme">
<item name="windowAnimationStyle">@style/Animation.OptionsPanel</item>
<item name="background">@null</item>
<item name="itemTextAppearance">@style/TextAppearance.Widget.IconMenu.Item</item>
<item name="horizontalDivider">@drawable/divider_horizontal_dark</item>
<item name="verticalDivider">@drawable/divider_vertical_dark</item>
<item name="itemBackground">@drawable/menu_selector</item>
<item name="itemIconDisabledAlpha">?disabledAlpha</item>
<item name="moreIcon">@drawable/ic_menu_more</item>
</style>
Now with that said, if it is using the first case, you will be looking for files named "divider_horizontal_bright.9.png" and "divider_vertical_bright.9.png". They are .9.png's so deal with them accordingly. Now if you have the second case then you are going to look for "divider_horizontal_dark.9.png" and "divider_vertical_dark.9.png".
Edit those to get your desired effect, but those are only the dividers of the menu.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Now I'm going to go back over the xml to show you what I'm looking at.
Code:
<item name="horizontalDivider">[COLOR="Blue"]@drawable/divider_horizontal_bright[/COLOR]</item>
<item name="verticalDivider">[COLOR="Blue"]@drawable/divider_vertical_bright[/COLOR]</item>
Code:
<item name="horizontalDivider">[COLOR="Red"]@drawable/divider_horizontal_dark[/COLOR]</item>
<item name="verticalDivider">[COLOR="Red"]@drawable/divider_vertical_dark[/COLOR]</item>
Those two items determine which .png the framework is looking at, and using that will tell you what to look for when you are editing your theme.
Now lets look at a much more rather obscure portion of the xml, but it still tells you where to look. Under "<style name="Theme">" near the beginning of the styles.xml, there is a long list of items pointing to different .png's in the framework. The one we are interested in is:
Code:
<item name="panelBackground">[COLOR="Purple"]@drawable/menu_background[/COLOR]</item>
<item name="panelFullBackground">[COLOR="Purple"]@drawable/menu_background_fill_parent_width[/COLOR]</item>
This tells you what to look for to edit the background of the menu, and the "top" horizontal bar if you want one.
So look for "menu_background.9.png" and "menu_background_fill_parent_width.9.png". Edit them to have the same look, because the "menu_background_fill_parent_width.9.png" is what you get when you press the menu button, and the "menu_background.9.png" is what you get when you press the "more" button. Again, these are .9.png's so edit them accordingly. If you have any more questions, please ask! I tried to make this as clear as I possibly could.
Also, you don't really NEED to decompile the framework to do it, I just wanted you to maybe learn something instead of just following instructions like must people do.
Click to expand...
Click to collapse
Click to expand...
Click to collapse

Continued from last post:
Q:
I have been searching how to make the status bar transparent but I can't seem to find a way to do it. I have managed to get my drop down notification screen transparent but no luck with the status bar.
Click to expand...
Click to collapse
A:
Decompile SystemUI.apk, in smali/com/android/systemui/statusbar/StatusBarService.smali
search for
Code:
const/4 v5, 0x2
and replace it with
Code:
const/4 v5, -0x3
Recompile SystemUI.apk, and you should be up and running.
(someone replied to that one and said it didn't work but the OP thanked my post and never said there was a problem, so it may have just been a user error. I have never personally had to do this myself)
Click to expand...
Click to collapse
Click to expand...
Click to collapse
Q:
can someone tell me how to change the font colour for notifications in the drop down?
Click to expand...
Click to collapse
A:
1. In framework-res.apk/res/layout/status_bar_latest_event_content.xml there are two things to look at; the line with
Code:
android:id="@id/title"
controls the title of the notification. "android:textColor" is what you need to modify, and the format of the number is "#AARRGGBB"
2. Then there is the line with
Code:
android:id="@id/text"
which controls the description of the notification. Do the same thing you did with the title.
Here's a screenshot, the numbers correspond with the item that I talked about above.
Click to expand...
Click to collapse
Click to expand...
Click to collapse
Q:
I cannot get the status bar to change at all. I've got a status bar image sitting in framework-res.apk, SystemUI.apk, and it is still solid black. I cannot figure out what I need to change to use the custom image.
Click to expand...
Click to collapse
A:
look in your System.apk, /res/layout/status_bar.xml. Now the second line down will probably look something like this:
Code:
<com.android.systemui.statusbar.StatusBarView android:orientation="vertical" [U][B]android:background="#ff000000"[/B][/U]android:focusable="true" android:descendantFocusability="afterDescendants"
I put in bold what we are worried about. Basically, it doesn't really matter WHAT it is (even though if its black it will be that) as long as its not
Code:
android:background="@drawable/statusbar_background"
But you aren't done yet. The second to last line should look something like this:
Code:
<com.android.systemui.statusbar.DateView android:textAppearance="@android:style/TextAppearance.StatusBar.Icon" android:gravity="left|center" android:id="@id/date" [U][B]android:background="#ff000000"[/B][/U] android:paddingLeft="6.0px" android:paddingRight="6.0px" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
Again, change the bolded part to
Code:
android:background="@drawable/statusbar_background"
Click to expand...
Click to collapse
Click to expand...
Click to collapse

I think this is a good idea. Count me in for support.
Sent from my GT-I9000 using XDA App

Glad to have you on board.

No way we can let this thread just die so I'll ask a question.
I'm trying to find the images to change the color of the volume sliders and progress bars. Not the progress animation but the green bars themselves and the slider buttons. I've attached a screenshot to show what I mean.
And thanks for making yourselves available for supporting us!

Those are not an image. They are an xml edit. In your decompiled fwres, you need to navigate to res/drawable/progress_horizontal. In there you are going to look for the last 6 hex code values. They should look like this.
Code:
<item android:id="@id/secondaryProgress">
<clip>
<shape>
<corners android:radius="4.659973dip" />
<gradient android:startColor="#50537cb2" android:endColor="#802b415e" android:angle="270.0" android:centerColor="#8096b6e0" />
</shape>
</clip>
</item>
<item android:id="@id/progress">
<clip>
<shape>
<corners android:radius="4.659973dip" />
<gradient android:startColor="#ff537cb2" android:endColor="#ff2b415e" android:angle="270.0" android:centerColor="#ff96b6e0" />
</shape>
The values create a gradient. The starting color is the top of your bar, ending the bottom, and center....well the center. You can make all three the same color to have it a solid, or play around with it to get a 3D feel. The code I posted is what we use for Mosaic. Edit both sets. You will find one more set in this xml but they are the values for the gray background...you can play with that as well if you wanna have fun.

Yup! And here is the one I use for Blue Darkness too, just for reference:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@id/background">
<shape>
<corners android:radius="2.659973dip" />
<gradient android:startColor="#ff000000" android:endColor="#ff000000" android:angle="270.0" android:centerColor="#00000000" />
</shape>
</item>
<item android:id="@id/secondaryProgress">
<clip>
<shape>
<corners android:radius="2.659973dip" />
<gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270.0" android:centerColor="#80084eff" />
</shape>
</clip>
</item>
<item android:id="@id/progress">
<clip>
<shape>
<corners android:radius="2.659973dip" />
<gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270.0" android:centerColor="#ff2b79fb" />
</shape>
</clip>
</item>
</layer-list>
BUT you can use images, but you have to do it correctly. Take a look at Honeycomb progress bars if you are interested.

Awesome, very helpful as always. Now how about the buttons on the sliders?

Jirv311 said:
Awesome, very helpful as always. Now how about the buttons on the sliders?
Click to expand...
Click to collapse
They are images in the few-res. Not at my computer right now but they are there.
sent using a phone from the future.

Jirv311 said:
Awesome, very helpful as always. Now how about the buttons on the sliders?
Click to expand...
Click to collapse
/res/drawable-hdpi/seek_thumb_normal.png and seek_thumb_pressed.png

NunHugger said:
They are images in the few-res. Not at my computer right now but they are there.
sent using a phone from the future.
Click to expand...
Click to collapse
bryman27 said:
/res/drawable-hdpi/seek_thumb_normal.png and seek_thumb_pressed.png
Click to expand...
Click to collapse
Yup, thank you both. I found those almost right after I posted. That's why I like this thread.

This is such an excellent thread. I wish this was around when I still had the time (and the drive) to theme.
Sent from my Captivate

great info here, though to a noob not wanting to do xml editing, all the changes discussed sofar can be done on the UOT kitchen, by uploading the system ui / framwork youre working on and clicking some check-boxes and selecting colors from a color chooser. super easy. http://uot.dakra.lt/
but dont get me wrong I LOVE the Q/A thing youre doing here, just might be scary to some, and there are other simpler options.

UOT is good, don't get me wrong but you cannot do the advanced things that really make a quality theme in it. It is much better to learn the xml and how to manipulate it to get what you want. I am learning more about the xml everyday as I work on my theme, but that's part of what theming is. Still wish I could have the knowledge and talent that some of these other themers have.

I know this is my thread, but I can still ask questions right?
In a newly flashed ROM this isn't a problem, but for someone like me I tend to have it. I want to know how to make the wallpaper go back to the default wallpaper after you flash the theme. Now I did some digging around and found that removing /data/data/com.android.settings/files/wallpaper will set the wallpaper back to default if the user is using a normal wallpaper. Does anyone know how to set it back to default if they are using a live wallpaper?

DemonWav said:
I know this is my thread, but I can still ask questions right?
In a newly flashed ROM this isn't a problem, but for someone like me I tend to have it. I want to know how to make the wallpaper go back to the default wallpaper after you flash the theme. Now I did some digging around and found that removing /data/data/com.android.settings/files/wallpaper will set the wallpaper back to default if the user is using a normal wallpaper. Does anyone know how to set it back to default if they are using a live wallpaper?
Click to expand...
Click to collapse
Try removing /data/system/wallpaper_info.xml

bryman27 said:
Try removing /data/system/wallpaper_info.xml
Click to expand...
Click to collapse
No, that didn't do it. I've been looking for what controls the Live Wallpaper so maybe I can change something there, but I'm not completely sure where to look.

DemonWav said:
No, that didn't do it. I've been looking for what controls the Live Wallpaper so maybe I can change something there, but I'm not completely sure where to look.
Click to expand...
Click to collapse
I noticed the same thing. When a Live Wallpaper is set, the wallpaper_info.xml doesn't seem to exist.
---------- Post added at 07:57 AM ---------- Previous post was at 07:56 AM ----------
Not sure if this is a theme question or not. I am using the AOSP lockscreen mod and for whatever reason, a lockscreen wallpaper will not set. It just takes on whatever the homescreen wallpaper is. Anybody know how to fix this?

wow great thread...been looking for something like this from some time....
EDIT: I think this should be sticky...

I figure I'll ask this on the very slim chance I do decide to try and theme again...
What are the tools of trade? i.e. What programs do I need to have readily available?

[GUIDE][4.4.x][4.2.x]Theming Android SystemUI

This is a simple guide to understand how to theme systemui.apk on 4.4.x OR 4.2.x, this guide will work for any rom having aosp like user interface. Before you start reading this, you have to set up apktool correctly. Just to check if your apktool is correctly installed, you can decompile my DarkL rom's systemui.apk and then recompile it without making any changes, if it compiles successfully then you are ready to try this tutorial.
Also, you need notepad++ to edit xml or smali line by line and you need gimp to edit transparent pngs.
Now we will learn easy things first then move to more advanced things, so lets start with statusbar icons first, I'll add more things in this tutorial in coming days, Sorry, I'm lazy to type
1.Changing statusbar icons (Signal, wifi, alarm, vibration or silent icons etc.)-
First decompile your systemui and go to "/systemui/res/" folder.
Changing the statusbar icons is easiest, these are pngs located in /res/drawable-hdpi/ OR /res/drawable-xhdpi/ depending on your device resolution, if it's 480*800 then your device is hdpi else if your resolution is 1280*720 then your device is xhdpi. You need to make changes in the correct folder.
Now open your folder /res/drawable-hdpi/ OR /res/drawable-xhdpi/ and look for pngs starting with name "stat_sys_.....png"
For wifi icon, we have "stat_sys_wifi_signal_1_fully.png" , "stat_sys_wifi_signal_2_fully.png" and so on, till "stat_sys_wifi_signal_4_fully.png".
For signal icons, we have "stat_sys_gemini_signal_1_orange.png" , 2_orange , 3_orange and so on, If your device is dual sim, you have multi colored signals, orange, purple, green, blue, look for the appropriate png and edit/replace it.
View attachment 3208547
Similarly, all the icons appearing in your statusbar are present here, all start with "stat_sys_.....png" you can edit these pngs or replace them from an existing theme or rom.
Warning - Ask permissions from the developer of that rom/theme !!
Just to learn things, you can use my DarkL rom's systemui.apk and take pngs from it
2.Changing notification drawer background-
The semi transparent background of your notification drawer is a png located in /res/drawable-hdpi/ or /res/drawable-xhdpi/ according to your device resolution. You need to make changes in the correct folder for your device.
Now find "notification_panel_bg.9.png" in your folder, this is the notification background, I recommend you to rename it to "notification_panel_bg.png" because .9 pngs have a border and are tricky to edit.
Now right click on this png and edit it with gimp, erase it and fill any color you want to.
View attachment 3208550
3.Customizing quicksettings tiles (icons, background and gaps)-
Firstly, to change quicksettings icons like wifi, data, rotation, bluetooth etc. Go to correct folder according to your device /res/drawable-xhdpi/ OR /res/drawable-hdpi/ now you need to replace/edit the pngs starting with "ic_qs_....png" , all of them are for quicksettings.
View attachment 3208555
Similarly, all the icons appearing in your statusbar are present here, all start with "ic_qs_.....png" you can edit these pngs or replace them from an existing theme or rom.
Warning - Ask permissions from the developer of that rom/theme !!
Just to learn things, you can use my DarkL rom's systemui.apk and take pngs from it
Now, to change background of tiles, you have to edit "/res/drawable/qs_tile_background.xml", you need to know the hex codes of your desired color to edit them, use this website to convert RGB to hex or reverse.
Now open "/res/drawable/qs_tile_background.xml" and look for the two hex codes, first one is for pressed tile, second one is for normal tile. Erase the last 6 characters here and Put your own 6 character hex code of any color.
View attachment 3208558
Now to edit dimensions in systemui like gaps between quicksettings tiles and size of recent apps, open "/res/values/dimens.xml"
This file contains the size of various things, you can play with the values and maybe discover something awesome, below are few things you can try, just alter the blue colored value.
These two lines are for changing the size of recent apps-
Code:
[COLOR="red"] <dimen name="status_bar_recents_thumbnail_width">164.0dip</dimen>
<dimen name="status_bar_recents_thumbnail_height">145.0dip</dimen>[/COLOR]
This line for changing gap between two notifications-
Code:
[COLOR="red"] <dimen name="notification_divider_height">3.0dip</dimen>[/COLOR]
(To remove gap, put 0.0dip)
This line for changing gap between quicksettings tiles-
Code:
[COLOR="red"]<dimen name="quick_settings_cell_gap">3.0dip</dimen>[/COLOR]
Similarly, you can try changing anything here to resize various things in your notifications and quicksettings, It's time consuming but interesting.
4.Changing layout of clock in notification header-
Usually, the notification header of stock rom's systemui has clock in this format-
View attachment 3208560
I feel that It's a bit too long, So I'll tell a method to make it double line-
View attachment 3208574
To do this, firstly you need to increase the height of notification header, go to "res/values/dimens.xml" and find this line-
Code:
[COLOR="red"]<dimen name="notification_panel_header_height">40.0dip</dimen>[/COLOR]
Change the value here to 56dpi
Now, to make the clock double line, open "/res/layout/status_bar_expanded_header.xml" and find this code-
Code:
<LinearLayout android:enabled="false" android:gravity="center_vertical" android:orientation="vertical" android:id="@id/datetime" android:paddingLeft="3.0dip" android:paddingRight="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />
<com.android.systemui.statusbar.policy.DateView android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Date" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />
</LinearLayout>
See the tags LinearLayout, Just change it to RelativeLayout both above and below.
Code:
<RelativeLayout android:enabled="false" android:gravity="center_vertical" android:orientation="vertical" android:id="@id/datetime" android:paddingLeft="3.0dip" android:paddingRight="0.0dip" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Clock" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />
<com.android.systemui.statusbar.policy.DateView android:textAppearance="@style/TextAppearance.StatusBar.Expanded.Date" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="2.0dip" android:singleLine="true" />
</RelativeLayout>
Thank you for reading, more things I'll add later, too tired to type more.

Reserved
More to come

Very Nice guide.
Regards

Nice work, looking forward for more such helpful guides. :good:

How can I change the navbar (background & icons)?

If I am only interested in changing the icons (such as alarm icon, Bluetooth icon) , do I need to decompile the APK?
I tried to drag the pngs I wanted into the appropriate folder.
I can see that it is working, but not sure if it has any adverse effects.
Any advice?

albel said:
If I am only interested in changing the icons (such as alarm icon, Bluetooth icon) , do I need to decompile the APK?
I tried to drag the pngs I wanted into the appropriate folder.
I can see that it is working, but not sure if it has any adverse effects.
Any advice?
Click to expand...
Click to collapse
Yes, but drag and drop has limitations, you can only replace normal pngs but not .9 pngs, It's fine for you since statusbar icons are normal pngs only, they are not .9 pngs.

Mmmh!!! this is quiet new and much detailed. Big ups for the guide.

nicely done..thanks for your brilliant work..keep it up

Request
Can you add method to add brightness slider?

mr-illusionist said:
Can you add method to add brightness slider in kitkat roms?
Click to expand...
Click to collapse
Yes, I'll write about adding features in second post soon, I've also attached my rom's SystemUI.apk, you can decompile it and see /res/xml/notification_header_expanded.xml till then.

Plz can you add some information about . changing position of signal bars and WiFi from right to left ??
If yes then it will be very great of you .... Thanks in advance
Sent from my UF2021 using XDA Free mobile app

please i want to change this color
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
to this
wish xml file must be changed ?
sorry for my english

umangleekha said:
Yes, I'll write about adding features in second post soon, I've also attached my rom's SystemUI.apk, you can decompile it and see /res/xml/notification_header_expanded.xml till then.
Click to expand...
Click to collapse
Waiting for it bro. :good:

Do you have any method to insert brightness slider bar on systemui?

Subscribed..!! Thanx for this wonderful guide.. Waiting for the next part..