[One (M8) Themes and Apps] Pneuma1985:
Fringe Theming...

Ok Since fisha is so awesome and got me a spot for number 4 I will be adding to this as we progress and figure other stuff out enjoy for now!

My Tutorials are not limited to any app or by anything! I will cover how do some crazy complex theming and I will try to be as cohesive as I possibly can, within the tutorials. My main goals are usually against the grain as far as theming goes: This is stuff you won't see in other sense themes! ;) Enjoy

Updated all links so they properly work for everyone.

Internalizing color in htcclockweatherwidget.apk & Inverting 4x1 clock

No longer applies to the updated ota.

____________________________________________________________________________________________________________________

Change small weather icons to white in smali

Oh someone forgot to point out how to change the weather icon for the small weather widget

weatherview.smali line 77 if you have smali debugging turned on/ may be slightly different if you don't, possibly a few lines away.

Change both to dark.

Small Weather Icons:

Change large weather icons to white in smali

Yeah props to whoever found this not sure who but I'll add it to this as well.

goto: WeatherClock4x1View.smali

search for vectorgraphic_light_xl

change them both to vectorgraphic_dark_xl

Large Weather Icons:

____________________________________________________________________________________________________________________

Change the vertical divider in 4x1 clock to an image that can be themed, never using com.htc.resources calls to do it.

No longer applies to the recent versions of sense 6

____________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________

Removing the SystemUI notification drawer bg fade in/fade out..

Ok guys I got another one i just figured out... If anyone figures out how to edit the transparency of the fade itself that would be awesome...

I tried but the only thing i could get it to do without crashing was removing it.

The main purpose of this is to expose the statusbar all the time which is only possible when disabling this animated smali fade method.

Any other questions about the ui feel free to ask.

In SystemUI.apk you'll be looking in PhoneStatusBarView.smali

Search for this:

.method public panelExpansionChanged

Delete that entire method from lines 581-875 (lines will match) - if you have smali debugging turned on which I always do when playing in smali enjoy.

____________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________

CHANGING FONTS SELECTIVELY IN ANY APP NOT CAUSING A GLOBAL CHANGE

This tutorial is somewhat complex and not for the faint at heart!

Oh and I'm not responsible if you bootloop your phone from this; symlinking the wrong things can cause bootloops. So please pay close attention. And look at my .zip which I will be adding!

This is not a font pack or anything like that! There is only one other person we know has been able to do this [MENTION=2591668]Ajthescot[/MENTION] for NEVER telling us, lol no need though after a year of tinkering I figured it out.

Ok this is a special tutorial for the SystemUI, but can work anywhere in any app. I'm going to go over one of the most epic changes I have ever managed to accomplish. I managed to change a selective font that htc does not use, then call on its class/font-family within styles. Look at the clock font vs everything else. This change is selective not global, which is exactly what we are after!

Though if an app calls on monospace like a market app it will display this new font we are about to use. Like some apps specifically logcat apps like using monospace b/c its easier to see the code so keep that in mind before doing this and choose your font wisely!

Example:

First were going to need a font we want to use select any font you can find you may want to selectively use... I chose arame-regular.ttf

We are also going to need SystemUI.apk decompiled.

I'm gonna break-down how android font family's and how font styles work in general first b/c you need to have an understanding of them to change them selectively.

Htc uses a fontfamily known as sans-serif but in actuality those fonts are basically anything with droid as a prefix and both sans or serif as a suffix. Not that it uses all of them. Ok thats what base htc does right but through the updater script they manage to symlink them

Example of symlinking:

symlink("Roboto-Regular.ttf", "/system/fonts/DroidSans.ttf");

This essentially is saying: ok for every spot DroidSans.ttf would be used now Roboto-Regular will fall in its place.

Example and list of roboto styles that have been symlinked in sense 6.0

android:fontFamily="sans-serif" // roboto regular
android:fontFamily="sans-serif-light" // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-thin" // roboto thin

Now each family has a style as you can see here

these are the 12 style variants that are possible: android:textStyle=" "

Regular

Italic

Bold

Bold-italic

Light

Light-italic

Thin

Thin-italic

Condensed regular

Condensed italic

Condensed bold

Condensed bold-italic

Ok enough of that lets get down to brass tacks... We need the SystemUI (the app i chose for demonstration) decompiled and an updater script and a .zip

Empty everything out of the .zip except the system/fonts folder and the meta-inf folder and the system/priv-app folder everything else delete it. Delete everything within the system/priv-app folder and then you can even delete all the fonts inside of the system/fonts folder as well.

I decided on a font family that htc does not use anywhere or any place its known as monospace the real font name is DroidSansMono.ttf. It's what we will be symlinking to.

Now that we have our .zip with nothing left in it except the meta-inf stuff and some empty folders we are going to add our custom font to the system/fonts folder make sure it is a standard .ttf font and make sure it has all the characters you'll be needing when you apply the font to wherever you want.

Then we are going to open our updater-script and simply delete everything (use your rom .zip and it's updater-script) its easier that way. We are going to add our symlink lines into it. I used a font called arame to do this but any true type font will suffice. This is how your updater-script should look the mount ext's may be different if your on the m8

ui_print("");
ui_print("............................................");
ui_print(": :");
ui_print(": Installing :");

ui_print("............................................");
ui_print("");
ui_print("");
set_progress(0.01);
ui_print("");
ui_print("");
ui_print(">>> Mounting partitions");
assert(mount("ext4", "EMMC", "/dev/block/mmcblk0p37", "/system") || ui_print("(system is mounted already)"));
assert(mount("ext4", "EMMC", "/dev/block/mmcblk0p39", "/data") || ui_print("(data is mounted already)"));
ui_print("");
ui_print("");
ui_print("");
ui_print("");
ui_print(">>> Writing Data & System");
package_extract_dir("data", "/data");
package_extract_dir("system", "/system");
ui_print("");
ui_print("");
ui_print("-- Creating additional symlinks");
symlink("Arame-Regular.ttf", "/system/fonts/DroidSansMono.ttf");

assert(unmount("/data") || ui_print("(Data is unmounted already)"));
assert(unmount("/system") || ui_print("(System is unmounted already)"));
set_progress(1.0);
ui_print("--");
ui_print("--Installation Complete!");
ui_print("--");
ui_print("--");

Ok now save and close you're updater-script and add it back into our .zip at META-INF\com\google\android\ overwriting the original.

Now lets switch gears and go back to the decompiled SystemUI.apk.

Lets open status_bar_expanded_header.xml if you look at line 5

you'll see the style I was after: highlighted:

@style/ExpandedClock

Now lets open that style Data/res/values/styles.xml Search for:

<style name="ExpandedClock" parent="@*android:style/TextAppearance">

Now were going to change the android:fontFamily for that given style: we are going to change it to monospace. It was originally sans-serif-light.. Your new style will look like:

<style name="ExpandedClock" parent="@*android:style/TextAppearance">
<item name="android:textSize">@dimen/clock_fontsize</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">@com.htc:color/cellitem_avatar_stroke</item>
<item name="android:fontFamily">monospace</item>
</style>

Recompile the systemUI.apk and either add it to your .zip in system/priv-app folder or push it to system/priv-app, but honestly if you didnt know that you probably shouldn't be doing this tutorial.

Flash the font tester.zip and push the ui

Changing the mono font and then selectively choosing it using the monospace font family. Now whenever you want to use your special font somewhere for design or whatever, you can use it just by either replacing the android:fontFamily with monospace or adding an android:fontFamily line, to the style you want to specifically change.

Here is my .zip: https://www.dropbox.com/s/2yohzroxz9ilsab/Font_Tester.zip

It took me a year to get this. Enjoy

____________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________

Animate the status_bar_close_on and keep the carrier label at the same time.

Ok I stated above if you had any questions about the ui feel free to ask. This tutorial is a result of one of those questions.

Example:

I made several attempts at this and it was weird, it didnt want to work at first, but after I tried a few different ways, I got this way to work.

The methods we have used since ICS still work don't get me wrong but they dont work if you want to keep the carrier_label. The SB image itself will cover the carrier_label. If you try to move the carrierlabel process to expanded_layout or try adding and ImageView into either .xml like we've done in previous builds: Ics/jb/even kk. Just wanted to point that out.

Ok lets get down to it we are going to need a decompiled systemui.apk and VTS.

You will obviously need some knowledge of photoshop or after-effects or some program that will allow you to manipulate images within .9 patches.

Also for the second part or even the first you will need to know how to manipulate .9 images using the draw9patch tool provided in your android-sdk. Windows=ie:start/run/cmd/draw9patch hit enter if you have java properly in your paths it'll load the draw9patch tool. If you need I can cover .9 images in a different tutorial but there are enough tutorials on xda already about them please do some searching if you have any questions feel free to ask. Some images are very hard to patch given the complexity of the image. And depending on the animation in no way can the patch touch an abstract animation that isn't uniform so it can get crazy with the patches.

Ok lets get started we are gonna open two separate layouts

carrier_label_generic.xml

status_bar_close.xml

Ok first we're gonna go into carrier_label_generic.xml and change line 2:

From:

<com.android.systemui.statusbar.phone.CarrierLabel android:gravity="center" android:id="@id/handle" android:background= [MENTION=3944923]drawab[/MENTION]le/status_bar_close_on" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="@dimen/close_handle_height"

To:

<com.android.systemui.statusbar.phone.CarrierLabel android:gravity="center" android:id="@id/handle" android:background= [MENTION=3944923]drawab[/MENTION]le/status_bar_close" android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="@dimen/close_handle_height"

We are changing the android:background from an image (status_bar_close_on.9.png) to (status_bar_close.xml)

If you want the results you saw in the first example you'll need to change your status_bar_close_off.9.png

Ok that in itself will animate between status_bar_close_on.9 and status_bar_close_off.9 but we can take it further than that if we want.

____________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________

Add Operator_name to statusbar move signal_cluster to the left and then move wifi to the right of the signal itself

My findings:

Really I found that the real carrier_label id can't be called on in the status_bar without it crashing! The method they use in CM does not work and my guess is b/c the ID for handle is actually in some way tied to the carrier_label_generic id itself thus we can't call on it b/c it wants to expand the handle layouts as well. Makes sense since the handle ID is called right out of the com.android.systemui.statusbar.phone.CarrierLabel. I could be wrong though who know's maybe someone else will see something I didn't.

Please if you have any insight on how to get the actual process itself into the statusbar using sprint please let me know I've gotten as far as getting it to display the layout for it but no txt!

I'd also like to point out there are two way's of doing this: I figured this is the most simple method of the two... The other one requires adding a line to status_bar.xml where the plmn_label id lies now but turning that on doesnt work unless you give it a string value which is more adding vs modifying what is already there so I figured this way was easier hope you enjoy.

Oh and since the Id for plmnLabel is a textview in status_bar.xml and not the actual process call in smali: it doesnt act like carrier_label anyway so it's moot point!

Using the call for it <com.android.systemui.statusbar.phone.CarrierLabel will result in a ton of errors in logcat and multiple force closes.

RESULTS:

Ok your gonna need a decompiled SystemUI.apk - open status_bar.xml and signal_cluster_view_generic.xml also open values/strings

Were going to go into status_bar.xml first move the view_stub line so that is directly above the notification_icon_area id

<ViewStub android:id="@id/signal_cluster" android:inflatedId="@id/signal_cluster_tree" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<LinearLayout android:orientation="horizontal" android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">

This will move the cluster to left now lets switch over to signal_cluster_view_generic.xml

we are gonna move some lines around

You're gonna move this line:

<ImageView android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/status_bar_system_icon_margin_left" android:layout_marginRight="@dimen/status_bar_system_icon_margin_right" android:scaleType="center" />

So that it falls right above the airplane ID at the bottom so move the whole line.

This will flipflop the wifi/signal cluster so that the wifi falls to the right of the signal bars themselves.

Next we're gonna turn on the operator name:

in signal_cluster_view_generic.xml you're going to see this line

<TextView android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="center_vertical" android:id="@id/operator_name" android:visibility="visible" android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/orange_fr_operator_name" android:paddingStart="2.0dip" android:paddingEnd="2.0dip" />

Move it to the top where wifi was before and set its visibility to visible... You turned on the operator name ID

Now lets goto string and look for orange_fr_operator_name goto that line and change orange F to your actual Service Provider and you're done. Save that and compile.

Here's my xml's if you want to use them and you still want the the clock back just set the visibility on the clock line to visible!

https://www.dropbox.com/s/0e3dxt32jh0axq8/status_bar.xml

https://www.dropbox.com/s/7dv9yxbtt2f22sk/signal_cluster_view_generic.xml

____________________________________________________________________________________________________________________

____________________________________________________________________________________________________________________

Making the header in prism/blinkfeed into an image instead of the multiply color

This could have been done several different ways this was just me trying to change it and this is how i eventually accomplished it.

Example:

think it was the second half of this that did it.!!!!

Step 1 add an image into drawable-xxhdpi mine looks like this I use a .9 but I imagine any image that fits the space will do...I made this .9 for 5.5 so it works... I will admit I did this slightly different than some would have you could also use the regular common_app_bkg_top_full.9.png in the app except yeah whatever, like i said it doesnt matter what image name you use.

Ok resize the common_app_bkg_top_full to a .9 that will suit the spot and image you want for the header... Im not going to get into how to .9 certain images but yeah you get the idea mine looks like this so there is no distortion in the gradient.

Ok Lets dig in... Open prism were gonna open a few things... Open values/styles.xml and values/drawables.xml you dont need to add an attr line for this like i believe someone else pointed out for resources this will carry either way...

First we are gonna edit line 5 in drawables.xml from

<item type="drawable" name="common_header" [MENTION=3944923]drawab[/MENTION]le/zero_dummy_asset</item>

to

<item type="drawable" name="common_header" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full</item>

Then were gonna go to styles I edited a few lines in styles.

Then we goto

<style name="HtcActionBar">

change it from

<style name="HtcActionBar">
<item name="android:panelFullBackground" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full</item>
<item name="android:background">?multiply_color</item>
<item name="android:drawable" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full_land</item>

to

<style name="HtcActionBar">
<item name="android:panelFullBackground" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full</item>
<item name="android:background" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full</item>
<item name="android:drawable" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full_land</item>

Then do the same for

<style name="ActionBarActionMode" parent="@*android:style/Widget.DeviceDefault.Light.ActionMode.Inverse">
<item name="android:background">?multiply_color</item>
<item name="android:height">?android:actionBarSize</item>
<item name="android:titleTextStyle">@style/ab_primary_textview_style</item>
<item name="android:subtitleTextStyle">@style/ab_secondary_textview_style</item>
</style>

change that to

<style name="ActionBarActionMode" parent="@*android:style/Widget.DeviceDefault.Light.ActionMode.Inverse">
<item name="android:background" [MENTION=3944923]drawab[/MENTION]le/common_app_bkg_top_full</item>
<item name="android:height">?android:actionBarSize</item>
<item name="android:titleTextStyle">@style/ab_primary_textview_style</item>
<item name="android:subtitleTextStyle">@style/ab_secondary_textview_style</item>
</style>

And thats how we change the multiplier header in prism from a color to an image hope you enjoy!

Add custom navbar to hotseat.xml

open values/ids.xml

and add a value to the bottom i named mine background name it whatever you want

prism.apk layout/hotseat.xml

<?xml version="1.0" encoding="utf-8"?>
<com.htc.launcher.hotseat.Hotseat android:clickable="true" launcher:cellCountX="@integer/hotseat_cell_count" launcher:cellCountY="1"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:launcher="http://schemas.android.com/apk/res/com.htc.launcher">
[COLOR="DeepSkyBlue"] <ImageView android:layout_gravity="bottom|center" android:id="@id/background" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src= [MENTION=3944923]drawab[/MENTION]le/home_nav_bg" android:scaleType="fitXY" />[/COLOR]
<ImageView android:layout_gravity="bottom|center" android:id="@id/hotseat_gardient" android:layout_width="@dimen/button_bar_background_width" android:layout_height="@dimen/button_bar_background_height" android:src= [MENTION=3944923]drawab[/MENTION]le/home_launcher_bg" android:scaleType="fitXY" />
<com.htc.launcher.CellLayout android:layout_gravity="center" android:id="@id/layout" android:paddingLeft="@dimen/button_bar_width_left_padding" android:paddingTop="@dimen/button_bar_height_top_padding" android:paddingRight="@dimen/button_bar_width_right_padding" android:paddingBottom="@dimen/button_bar_height_bottom_padding" android:layout_width="wrap_content" android:layout_height="fill_parent" launcher:cellWidth="@dimen/hotseat_cell_width" launcher:cellHeight="@dimen/hotseat_cell_height" launcher:widthGap="@dimen/hotseat_width_gap" launcher:heightGap="@dimen/hotseat_height_gap" launcher:maxGap="@dimen/workspace_max_gap" />
</com.htc.launcher.hotseat.Hotseat>

Ok small flaw I noticed with this which we are gonna fix. If you look closely you will see a divider in the navbar that shouldnt be there... You will also need to edit something in lockscreen to get rid of it there its at the bottom of the tutorial...

Example:

Ok now in prism.apk open main_launcher.xml

you're gonna change line 20 from

<ImageView android:layout_gravity="bottom|center" android:id="@id/nav_bar_div" android:paddingLeft="@dimen/margin_l" android:paddingRight="@dimen/margin_l" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src= [MENTION=3944923]drawab[/MENTION]le/common_b_div" android:scaleType="fitXY" />

To:

<ImageView android:layout_gravity="bottom|center" android:id="@id/nav_bar_div" android:paddingLeft="@dimen/margin_l" android:paddingRight="@dimen/margin_l" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" />

All we did was remove the src call android:src [MENTION=3944923]drawab[/MENTION]le/common_b_div"

You could keep it for design purposes but this is just how to remove it..It obviously was interfering with my nav bar bg.

----------------------------------------------------------------------------------------------------------------------------------------------------------

Ok the divider in lockscreen lets take care of that

Example:

Ok open Htclockscreen.apk res/layouts/main_lockscreen_keyguard_host_view.xml

your gonna change one line in it: line 26

<com.htc.lockscreen.ui.footer.NavigationBarDivider android:layout_gravity="bottom" android:id="@id/navigation_bar_divider" android:background= [MENTION=3944923]drawab[/MENTION]le/common_b_div" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="@dimen/navigation_bar_divider_height" android:layout_marginLeft="@dimen/common_dimen_m1" android:layout_marginRight="@dimen/common_dimen_m1" />

Remove the :android:background= [MENTION=3944923]drawab[/MENTION]le/common_b_div" from that line no more grey divider...Enjoy

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Changing the call button in dailer to an stand alone themable image!

Ok I wont be going over how to theme the whole dialer others have explained certain aspects of it and my questions in some posts answer other questions if you have any feel free to ask there are tons of awesome devs that respond very quickly.

This took me forever to find since center_button id in the cmdbar.xml is very confusing when it comes to figuring this out... Its not the center_button id we are after its the phone_btn_call_rest in drawables.xml thats the actual id we are going to be replacing with an image id we will add...

Ok lets dig in decompile dialer if you havent already

make an image mine is 717x164 which is the exact width and height of the button in the standard dialer.

I did not make my image a .9 since I will only be using this specific image for only this spot.

Ok add the image into the drawable-xxhdpi folder and right click on the project open resource manager and add the id for it copy the id when it comes up and keep that safe...

Ok now were gonna open values/drawables.xml were gonna look at line 33 and find its public value

from:

<item type="drawable" name="phone_btn_call_rest">#ff000000</item>

I changed mine to and [MENTION=3944923]drawab[/MENTION]le while testing,

but you dont have to since it has no effect on the outcome since we are changing this id in itself to something else in smali.

ok back into public.xml and search for the phone_btn_call_rest id for me its 0x7f020068

were gonna search for in ButtonGroup.smali

move-result-object v3

check-cast v3, Lcom/htc/htcdialer/widget/keypadbtn/HtcKeypadBgBtn;

const v0, 0x7f020068

Now simply change the phone_btn_call_rest Id to the new image id you created earlier for your new drawable. save and compile done Enjoy!

Example:

Hope you enjoy the tutorials.