[Android Themes] lacoursiere18:
Hey guys,

Thought I would share a few tutorials, with picture references, on theming some 5.0 Lollipop apps. I thought to put them here since we all are on the same team. Happy theming! :highfive:

PS: Feel free to add, comment, question, or contribute!!

Theming AOSP Mms (LIGHT to DARK) 5.0.2 Lollipop

First thing, like always is styles.xml. Styles is the key to converting everything from light to dark. So when you open it you need to find all the parents that call a "Light" theme. Change them all to the original Theme, most of them being Material.

Next we will dig into a little a change something I did not like. Find: <style name="MmsTheme"

<style name="MmsTheme" parent="@android:style/Theme.Material">
[COLOR="Red"]<item name="android:colorBackground" [MENTION=403934]Color[/MENTION]/material_blue_grey</item>[/COLOR]
[COLOR="red"]<item name="android:statusBarColor">#ff37474f</item>[/COLOR]
<item name="android:actionBarStyle">@style/MmsActionBarStyle</item>
<item name="android:[COLOR="DarkOrange"]colorPrimary[/COLOR]" [MENTION=403934]Color[/MENTION]/mms_theme_color</item>
<item name="android:colorPrimaryDark" [MENTION=403934]Color[/MENTION]/mms_theme_color_dark</item>
<item name="android:colorAccent" [MENTION=403934]Color[/MENTION]/mms_theme_color_accent</item>
</style>

I added those two lines. android:colorBackground changing the background of the main Theme (MmsTheme) and defining the color to what I want it to be, [COLOR="RoyalBlue" [MENTION=403934]Color[/MENTION]/material_blue_grey[/COLOR], which I defined in color.xml. [COLOR="red"]android:statusBarColor[/COLOR] is the status bar tint color. You want this match whatever the colorPrimary to be, which is also defined in color.xml as: [COLOR="RoyalBlue" [MENTION=403934]Color[/MENTION]/mms_theme_color[/COLOR]

Next find [COLOR="rgb(65, 105, 225)"]<style name="HeaderTheme"[/COLOR]. Here we are going to change the background of a dropdown panel that is originally white, but I wanted it to be dark. This theme uses a drawable in framework-res but I made it app dependent.

<style name="HeaderTheme" parent="@android:style/ThemeOverlay.Material.Dark.ActionBar">
<item name="android:colorBackground">@android:color/[COLOR="DarkOrange"]background_material_dark[/COLOR]</item>
<item name="android:spinnerDropDownItemStyle">@style/HeaderSpinnerDropDown</item>
<item name="android:colorAccent">?android:textColorPrimary</item>
[COLOR="red"]<item name="android:popupTheme">[COLOR="RoyalBlue"]@style/lacoursiere18.Material.Dark[/COLOR]</item>[/COLOR]
</style>

I changed the colorBackground from a light to dark as well. Add the line above in Red. This will call a new style I created to change the dropdown bg like shown below:

Before:

After:

No we need to create that style above. So add this right below that above ^:

<style name="[COLOR="rgb(65, 105, 225)"]lacoursiere18.Material.Dark[/COLOR]" parent="@android:style/ThemeOverlay.Material">
<item name="android:colorBackground">@[COLOR="red"]color[/COLOR]/material_blue_grey</item>
</style>

Obviously you can change the name of the style to whatever you want, just make sure the parent stays the same. Also, you can change the [COLOR="red" [MENTION=403934]Color[/MENTION][/COLOR] to whatever you like, hex or define one in color.xml.

Thats it for styles :good:

Next is colors.xml. I am going to list everything I changed and what it changes:

[B]##General background[/B]

[CODE]<color name="[COLOR="Red"]background_primary[/COLOR]">#ff1b1f23</color> [/CODE]

##When creating new message and you select the Add Contact button. The Select Recipient's and Groups background Thanks [MENTION=4603975]daveyannihilation[/MENTION]

<color name=[COLOR="Red"]"contact_all_list_background_color[/COLOR]">#ff1b1f23</color>

View attachment 3143133

##This is the message count on the main message list

<color name="[COLOR="red"]message_count_color[/COLOR]">#66ffffff</color>

View attachment 3143137

##Outgoing message background, when you send a message

<color name="[COLOR="red"]outgoing_message_bg[/COLOR]">#bfffffff</color>

View attachment 3143138

##This change ActionBar color and floating action button PS: this is what you want to link the statusBarColor to in styles.

<color name="[COLOR="red"]mms_theme_color[/COLOR]">#ff37474f</color>
<color name="[COLOR="red"]mms_theme_color_dark[/COLOR]">#ff263238</color>
<color name="[COLOR="red"]mms_theme_color_accent[/COLOR]">#ff21272b</color>

View attachment 3143140

Next lets do some layouts. Find conversation_list_screen.xml Search the two android:background change them to whatever you like.

ListView BG:

View attachment 3143141

Next is message_list_item_send.xml find android:id="@id/text_view" and add a textColor anywhere on that line. This is the outgoing message text color like so:

View attachment 3143144

Then find android:id="@id/date_view" and add a textColor anywhere on that line. This is the date time stamp on the outgoing message, like so:

View attachment 3143145

Now lets go to compose_message_activity.xml. Find android:id="@id/bottom_panel" change the background color to whatever you like, this will change this:

View attachment 3143150

Next find android:id="@id/embedded_text_editor" and add a android:background of what ever value you'd like. Also, a heads up, if you make this background dark you need to change the textColor on this line a lighter color than what it is currently, which is [MENTION=403934]Color[/MENTION]/black:

View attachment 3143146

Now find android:id="@id/button_with_counter" add android:background and change the value to whatever hex youd like:

Same image but it requires both edits:

View attachment 3143150

That's it for Mms.apk..

Theming AOSP Settings (LIGHT to DARK) 5.0.2 Lollipop

If you get a chance check out [MENTION=5022494]Vivek_Neel[/MENTION] thread Here..

So lets dive in.. Starting with styles.xml, make everything from Material.Light to Material and all the drawables from light to dark (be careful with that last one bc some drawables might not have the name from light to dark. It might just be for instances, ic_menu_panel_light.9.png might just be ic_menu_panel.9.png, with not _dark added)

Find: <style name="Widget.TimePicker" Change the background below to whatever you like:

<item name="android:numbers[COLOR="RoyalBlue"]BackgroundColor[/COLOR]">@android:color/white</item>

Find: <style name="Theme.SettingsBase" This is the main Theme. Change it's parent to this:

<style name="Theme.SettingsBase" [COLOR="Red"]parent[/COLOR]="[COLOR="RoyalBlue"]@android:style/Theme.Material[/COLOR]" />

Now right below this you will see <style name="Theme.Settings" parent="@style/Theme.SettingsBase">. Notice I highlighted the parent in red thats bc we just edited it above. Anyway now add these lines below:

<style name="Theme.Settings" parent="@style/Theme.SettingsBase">
[COLOR="Red"]<item name="android:colorBackground">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/theme_primary[/COLOR][COLOR="red"]</item>[/COLOR]
<item name="android:actionBarStyle">@style/Theme.ActionBar</item>
<item name="android:actionBarSize">@dimen/actionbar_size</item>
<item name="android:alertDialogTheme">@style/Theme.AlertDialog</item>
<item name="android:preferenceFragmentStyle">@style/PreferenceFragmentStyle</item>
<item name="android:preferencePanelStyle">@style/PreferencePanelSinglePane</item>
<item name="android:preferenceHeaderPanelStyle">@style/PreferenceHeaderPanelSinglePane</item>
[COLOR="red"]<item name="android:colorPrimary">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/dashboard_background_color[/COLOR][COLOR="red"]</item> [/COLOR]
[COLOR="red"]<item name="android:colorPrimaryDark">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/dashboard_background_color[/COLOR][COLOR="red"]</item>[/COLOR]
[COLOR="red"]<item name="android:colorAccent">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/theme_accent[/COLOR][COLOR="red"]</item>[/COLOR]
<item name="android:timePickerStyle">@style/Widget.TimePicker</item>
<item name="android:preferenceListStyle">@style/PreferenceHeaderListSinglePane</item>
<item name="android:preferenceFragmentListStyle">@style/PreferenceFragmentListSinglePane</item>
<item name="android:preferenceFragmentPaddingSide">@dimen/settings_side_margin</item>
<item name="android:pathColor" [MENTION=403934]Color[/MENTION]/lock_pattern_view_regular_color</item>
<item name="android:regularColor" [MENTION=403934]Color[/MENTION]/lock_pattern_view_error_color</item>
<item name="android:titleContentDescription" [MENTION=403934]Color[/MENTION]/lock_pattern_view_success_color</item>
<item name="apnPreferenceStyle">@style/ApnPreference</item>
<item name="switchBarTheme">@style/Theme.SwitchBar.Settings</item>
<item name="preferenceBackgroundColor">@drawable/preference_background</item>
<item name="ic_menu_add">@drawable/ic_menu_add_dark</item>
<item name="ic_menu_moreoverflow">@android:drawable/highlight_dot_007</item>
<item name="ic_wps">@drawable/ic_wps_dark</item>
<item name="wifi_signal">@drawable/wifi_signal_teal</item>
</style>

This is what it changes: Btw disregard the @ color, you can make them what ever you'd like

[COLOR="Red"]<item name="android:colorBackground">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/theme_primary[/COLOR][COLOR="red"]</item>[/COLOR]

##Main window views:

View attachment 3143178

[COLOR="red"]<item name="android:colorPrimary">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/dashboard_background_color[/COLOR][COLOR="red"]</item> [/COLOR]

##ActionBar

View attachment 3143184

[COLOR="red"]<item name="android:colorPrimaryDark">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/dashboard_background_color[/COLOR][COLOR="red"]</item>[/COLOR]

##StatusBar

View attachment 3143192

[COLOR="red"]<item name="android:colorAccent">[/COLOR][COLOR="RoyalBlue"] [MENTION=403934]Color[/MENTION]/theme_accent[/COLOR][COLOR="red"]</item>[/COLOR]

##Switch/Texts

View attachment 3143202

Now lets go to colors.xml I only changed these:

[COLOR="Red"]<color name="theme_primary">[/COLOR]#ff146f81[COLOR="red"]</color>[/COLOR] [B]##Main window views[/B]
[COLOR="red"]<color name="theme_primary_dark">[/COLOR]#fffcff00[COLOR="red"]</color>[/COLOR] [B]##Nothing I can find..[/B]
[COLOR="red"]<color name="theme_accent">[/COLOR]#ff209f9e[COLOR="red"]</color> [/COLOR]
[COLOR="red"]<color name="dashboard_background_color">[/COLOR]#ff0c4e6e[COLOR="red"]</color> [/COLOR]
[COLOR="red"]<color name="switchbar_background_color">[/COLOR]#ff146f81[COLOR="red"]</color>[/COLOR]

This is what it changes: Btw disregard the @ color, you can make them what ever you'd like. Also, you will notice in styles I added these colors in different places..

[COLOR="red"]<color name="theme_accent">[/COLOR]#ff209f9e[COLOR="Red"]</color> [/COLOR]

##Swtiches... Text

View attachment 3143210

[COLOR="red"]<color name="dashboard_background_color">[/COLOR]#ff0c4e6e[COLOR="red"]</color>[/COLOR]

##Space between main settings window view

View attachment 3143212

[COLOR="red"]<color name="switchbar_background_color">[/COLOR]#ff146f81[COLOR="red"]</color> [/COLOR]

##Switch background

View attachment 3143216

Now go to dashboard_category.xml in layouts. Find this:

[COLOR="Red"]android:background=[/COLOR]"[COLOR="RoyalBlue"]@android:color/white"[/COLOR]

**NOTE latest nightlies have updated this color to be in colors.xml look for "dashboard_category_color or bacground_color

Here what it changes:

View attachment 3143218

Now to change some icons, search fillColor in drawables folder. Depending on what color it is, usually a hex you can change it..Effects these:

View attachment 3143222

Thats it for Settings.apk..