[Android Themes] upndwn4par:
An Example: The Dialer​

Github is Your Friend! :)

- Let's open

Cyanogenmod Github

and search for " Dialer ":

https://github.com/CyanogenMod/android_packages_apps_Dialer

- Navigate to Res --> Values --> Colors.xml

As You can see all values are commented/explained!!

- So, let's look at the Dialer from JellyRevenge theme

<?xml version="1.0" encoding="utf-8"?>
<resources>
[COLOR="RoyalBlue"][B]<!-- 3 Color of dialpad digits 3 --> [/B][/COLOR]
<color name="dialpad_digits_text_color">#939393</color>
[COLOR="RoyalBlue"][B]<!-- 1 Background color of action bars. It's linked with dialpad digits colors!!!! Ensure this stays in sync with packages/Telephony actionbar_background_color. 1 -->[/B][/COLOR]
<color name="actionbar_background_color">#33b5e5</color>
[COLOR="RoyalBlue"][B]<!-- Primary color of dialpad text, including the call button -->[/B][/COLOR]
<color name="dialpad_primary_text_color">#33b5e5</color>
[COLOR="RoyalBlue"][B] <!-- Secondary color of dialpad text (used for the letters corresponding to each digit -->[/B][/COLOR]
<color name="dialpad_secondary_text_color">#8b8b8b</color>
[COLOR="RoyalBlue"][B]<!-- 4 Background color of dialpad 4 -->[/B][/COLOR]
<color name="background_dialpad">#000000</color>
[COLOR="RoyalBlue"][B]<!-- 2 Pressed color of dialpad buttons 2 -->[/B][/COLOR]
<color name="background_dialpad_pressed">#88939393</color>
</resources>

Obviously, You don't need to add these comments

UI repositories:

. Settings: https://github.com/CyanogenMod/android_packages_apps_Settings

. framework-res: https://github.com/CyanogenMod/android_frameworks_base/tree/cm-11.0/core

. "Oh s****, I can't find SystemUI, Keyguard ... etc ": You can find these UI repos inside the framework_base under "packages" :P

https://github.com/CyanogenMod/android_frameworks_base/tree/cm-11.0/packages

NOTE: Not all packages are commented! But all elements inside XMLs have

evocative

names! don't worry about that, I will show You how to make a basic theme! :P

Other Examples - Basic theming through XMLs

FRAMEWORK

THE THEME MAIN COLOR​

When You design a new theme You will choose a default color for the theme. So, if We want to set up it overally we can simply tweak holo_blue_light value in framework so most of the elements will result themed (dialogs text, dividers etc etc)

assets/overlays/android/res/values/colors.xml

<!-- A light Holo shade of blue -->
<color name="holo_blue_light">#ff33b5e5</color>

<!-- A dark Holo shade of blue -->
<color name="holo_blue_dark">#ff0099cc</color>

<!-- A really bright Holo shade of blue -->
<color name="holo_blue_bright">#ff00ddff</color>

THE FRAMEWORK BACKGROUND FOR DARK/LIGHT LAYOUTS​

Just place two images inside

assets/overlays/android/res/drawable-nodpi

https://raw.githubusercontent.com/e...d/res/drawable-nodpi/background_holo_dark.png

https://raw.githubusercontent.com/e.../res/drawable-nodpi/background_holo_light.png

DIALOG UPPER TEXT​

assets/overlays/android/res/values/styles.xml

- Dialog light

<style name="TextAppearance.Holo.Light.DialogWindowTitle" parent="@*android:style/TextAppearance.Holo.Light">
<item name="android:textSize">22.0sp</item>
<item name="android:textColor">#ff[COLOR="Lime"][B]00ff00[/B][/COLOR]</item>
</style>

- Dialog dark

<style name="TextAppearance.Holo.DialogWindowTitle" parent="@*android:style/TextAppearance.Holo">
<item name="android:textSize">22.0sp</item>
<item name="android:textColor">#ff[COLOR="Magenta"][B]9f79ee[/B][/COLOR]</item>
</style>

NOTIFICATION TEMPLATE ICON BACKGROUND​

assets/overlays/android/res/values/drawables.xml

<item type="drawable" name="notification_template_icon_bg">#3333B5E5</item>

ON TEXT COLOR​

assets/overlays/android/res/values/styles.xml

<style name="Widget.CompoundButton.Switch" parent="@android:style/Widget.CompoundButton">
<item name="android:textOn"/>
<item name="android:textOff"/>
</style>
<style name="TextAppearance.Holo.Widget.Switch" parent="@android:style/TextAppearance.Holo.Small">
<item name="android:textColor">#ffffff</item>
</style>

note: You can also remove the text, just add trasparency:

<style name="Widget.CompoundButton.Switch" parent="@android:style/Widget.CompoundButton">
<item name="android:textOn"/>
<item name="android:textOff"/>
</style>
[COLOR="red"][B] <style name="TextAppearance.Holo.Widget.Switch" parent="@android:style/TextAppearance.Holo.Small">
<item name="android:textColor">#00000000</item>
</style>[/B][/COLOR]

SYSTEMUI

STATUS BAR BATTERY COLOR​

assets/overlays/com.android.systemui/res/values/colors.xml

<color name="batterymeter_frame_color">#6633b5e5</color>
<color name="batterymeter_full">#ff33b5e5</color>
<color name="batterymeter_charge_color">#ff33b5e5</color>

STATUS BAR CLOCK COLOR​

assets/overlays/com.android.systemui/res/values/colors.xml

<color name="status_bar_clock_color">#ff33b5e5</color>

NO RECENTS TEXT​

assets/overlays/com.android.systemui/res/values/colors.xml

<color name="no_recent_apps">#80[COLOR="YellowGreen"][B]99cc00[/B][/COLOR]</color>

QS TILES BACKGROUND​

1 = the background

2= background when pressed

Put an xml inside drawable folder:

assets/overlays/com.android.systemui/res/drawable/qs_tile_background.xml

with the following contents:

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
[COLOR="Red"][B]<color android:color="#4033b5e5" />[/B][/COLOR]
</item>
<item>
[COLOR="Lime"][B]<color android:color="#00000000" />[/B][/COLOR]
</item>
</selector>