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
Theming AOSP Settings (LIGHT to DARK) 5.0.2 Lollipop
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"
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" @Color/material_blue_grey[/COLOR], which I defined in color.xml. android:statusBarColor 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" @Color/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.
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 ^:
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" @Color[/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:
##General background
##When creating new message and you select the Add Contact button. The Select Recipient's and Groups background Thanks @daveyannihilation
![]()
##This is the message count on the main message list
![]()
##Outgoing message background, when you send a message
![]()
##This change ActionBar color and floating action button PS: this is what you want to link the statusBarColor to in styles.
![]()
Next lets do some layouts. Find conversation_list_screen.xml Search the two android:background change them to whatever you like.
ListView BG:
![]()
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:
![]()
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:
![]()
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:
![]()
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 @Color/black:
![]()
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:
![]()
That's it for Mms.apk..
Next we will dig into a little a change something I did not like. Find: <style name="MmsTheme"
Code:
<style name="MmsTheme" parent="@android:style/Theme.Material">
<item name="android:colorBackground" @Color/material_blue_grey</item>
<item name="android:statusBarColor">#ff37474f</item>
<item name="android:actionBarStyle">@style/MmsActionBarStyle</item>
<item name="android:colorPrimary" @Color/mms_theme_color</item>
<item name="android:colorPrimaryDark" @Color/mms_theme_color_dark</item>
<item name="android:colorAccent" @Color/mms_theme_color_accent</item>
</style>
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.
Code:
<style name="HeaderTheme" parent="@android:style/ThemeOverlay.Material.Dark.ActionBar">
<item name="android:colorBackground">@android:color/background_material_dark</item>
<item name="android:spinnerDropDownItemStyle">@style/HeaderSpinnerDropDown</item>
<item name="android:colorAccent">?android:textColorPrimary</item>
<item name="android:popupTheme">@style/lacoursiere18.Material.Dark</item>
</style>
Before:

After:

No we need to create that style above. So add this right below that above ^:
Code:
<style name="[COLOR="rgb(65, 105, 225)"]lacoursiere18.Material.Dark[/COLOR]" parent="@android:style/ThemeOverlay.Material">
<item name="android:colorBackground">@color/material_blue_grey</item>
</style>
Thats it for styles :good:
Next is colors.xml. I am going to list everything I changed and what it changes:
##General background
Code:
<color name="background_primary">#ff1b1f23</color>
Code:
<color name="contact_all_list_background_color">#ff1b1f23</color>

##This is the message count on the main message list
Code:
<color name="message_count_color">#66ffffff</color>

##Outgoing message background, when you send a message
Code:
<color name="outgoing_message_bg">#bfffffff</color>

##This change ActionBar color and floating action button PS: this is what you want to link the statusBarColor to in styles.
Code:
<color name="mms_theme_color">#ff37474f</color>
<color name="mms_theme_color_dark">#ff263238</color>
<color name="mms_theme_color_accent">#ff21272b</color>

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

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:

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:

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:

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 @Color/black:

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:

That's it for Mms.apk..
Theming AOSP Settings (LIGHT to DARK) 5.0.2 Lollipop
If you get a chance check out @Vivek_Neel 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:
Find: <style name="Theme.SettingsBase" This is the main Theme. Change it's parent to this:
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:
This is what it changes: Btw disregard the @ color, you can make them what ever you'd like
##Main window views:
![]()
##ActionBar
![]()
##StatusBar
![]()
##Switch/Texts
![]()
Now lets go to colors.xml I only changed these:
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..
##Swtiches... Text
![]()
##Space between main settings window view
![]()
##Switch background
![]()
Now go to dashboard_category.xml in layouts. Find this:
Here what it changes:
![]()
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:
![]()
Thats it for Settings.apk..
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:
Code:
<item name="android:numbersBackgroundColor">@android:color/white</item>
Code:
<style name="Theme.SettingsBase" parent="@android:style/Theme.Material" />
Code:
<style name="Theme.Settings" parent="@style/Theme.SettingsBase">
<item name="android:colorBackground"> @Color/theme_primary</item>
<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>
<item name="android:colorPrimary"> @Color/dashboard_background_color</item>
<item name="android:colorPrimaryDark"> @Color/dashboard_background_color</item>
<item name="android:colorAccent"> @Color/theme_accent</item>
<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" @Color/lock_pattern_view_regular_color</item>
<item name="android:regularColor" @Color/lock_pattern_view_error_color</item>
<item name="android:titleContentDescription" @Color/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>
##Main window views:

##ActionBar

##StatusBar

##Switch/Texts

Now lets go to colors.xml I only changed these:
Code:
<color name="theme_primary">#ff146f81</color> ##Main window views
<color name="theme_primary_dark">#fffcff00</color> ##Nothing I can find..
<color name="theme_accent">#ff209f9e</color>
<color name="dashboard_background_color">#ff0c4e6e</color>
<color name="switchbar_background_color">#ff146f81</color>
Code:
<color name="theme_accent">#ff209f9e</color>

Code:
<color name="dashboard_background_color">#ff0c4e6e</color>

Code:
<color name="switchbar_background_color">#ff146f81</color>

Now go to dashboard_category.xml in layouts. Find this:
Code:
android:background="@android:color/white"

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:

Thats it for Settings.apk..