[Full Guide] Xperia Lollipop Full Theming ~ From Newbie To Pro !

Hello everybody ! today our guide is important and easy to learn, I'm gonna explain how to make a complete/advanced/full theme, with the ability to change everything ! from SystemUI icons ( Wifi .. etc ) to Apps icons or even Contact Icon, So ? what are you waiting for ! let's start the engine ! :D

In This First Full Guide, I'm gonna show what i've learnt in Xperia Lollipop theming field, without the " selfish " stuffs nor the " secrets ", because Knowledge must be for all, without any costs .. only Credits and putting Guide link costs :D :cool: .

Notes :

• Read Number 4 For Making The Theme Change The App Content .


• Don't Forget Me From Credits ;) .


• The Way I Explain Is " Manual " Theming, You Can Use Theme Maker BETA From Sony .


• Install Java .


• Guide Requires Creative Person To Make Awesome Themes .


• You Don't Need To Be A Programmer, Just Apktool .

Sections :

1. Creating Or Importing A Ready Project via Eclipse / Android Studio .


2. Theme Content Explain .


3. AndroidManiFest.xml / Strings.xml / Preview Screens / Images Editing .


4. Notes Making Theme Change Everything .


5. Creating Assets Zips .


6. Theming Android.Zip ( Framework-res ) .


7. Theming SystemUI .


8. Theming Home ( Launcher ) .


9. Theming Clock .


10. Theming InCallingUI .


11. Theming Phonebook .


12. Theming Messaging .


13. Theming Calculator .


14. Theming Settings .


15. Theming Camera & Notes & Calendar & Email .


16. Theming Small App Launcher & Small Apps .

1. Creating Xperia Theme Project - Eclipse

• Open Eclipse .


• Open File => Android Application Project


• In " Application Name " Put Your Theme Name.


• In Project Name Put Your Desired Project Name.


• In Package Name Put Your Desired Package Name, Example : theme.xperia.abohani


• For Minimum Required SDK, Select The Mini-SDK/API Version The Theme Will Work On, Example : API18 4.3 - API19 4.4.


• For Target SDK, Put Your Top SDK/API Version The Theme Gonna Work On And Theme It.


• For Compile With, Put it As Target SDK.


• For " Theme " Put it None.


• Press Next.


• Un-tick " Create Custmom Launcher Icon " & " Create Activity ".


• For " Create Project In Workspace ", Select the place you want to save the project in .


• Now Your Project Is Ready To Modify .

1.5 Creating Xperia Theme Project - Android Studio

• Open Android Studio.


• Press " Start A New Android Studio Project ".


• In " Application Name " Put Your Theme Name.


• In Company Domain Put A Main Package Name, Ex : theme.abohani.


• Package Name Will Be Automatically Generated as companydomain.applicationname, Ex : theme.abohani.applicationname .


• Project Location, Select the place you want to save the project in .


• Press Next.


• Select " Phone and Tablet ", Select The Mini-SDK/API Version The Theme Will Work On, Example : API18 4.3 - API19 4.4.


• Press Next .


• Select " No Activity " .


• Press Finish .

2. Theme Content Explain .

Xperia Theme contain the following :

• Assets, Where we gonna support different app themng .


• res/values, where we put the name of the theme and put the skin color ( 5.1 only ) .


• res/drawable folders, where we put the theme icon / lockscreen wallpaper / home wallpaper for different screens .

3. AndroidManiFest.xml / Strings.xml / Preview Screens / Images Editing .

Editing AndroidManiFest.xml,

• Open AndroidManiFest.xml with Notepad++ from the theme location .


• Replace it with the following.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="theme.abohani.applicationname"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="21"
android:targetSdkVersion="22" />

<uses-permission android:name="com.sonymobile.permission.RUNTIME_SK IN" />

<runtime-skin version="1">
<asset path="assetname.zip" target="app.package">
<laf-version-filter from="1" to="1" />
</asset>
</runtime-skin>
<application
android:label="@string/semc_theme_title"
android:icon="@drawable/semc_theme_preview">

<uses-library android:name="com.sonymobile.runtimeskinning" />


<meta-data
android:name="com.sonymobile.runtimeskinning.core. image_wallpaper"
android:resource="@drawable/semc_theme_wallpaper" />

<meta-data
android:name="com.sonymobile.runtimeskinning.core. lockscreen_background"
android:resource="@drawable/semc_theme_lockscreen_wallpaper" />

<uses-library android:name="com.sonymobile.runtimeskinning_2"/>

<meta-data
android:name="com.sonymobile.runtimeskinning.core. SKIN_PREVIEW"
android:resource="@array/previews"/>

</application>

</manifest>

• Edit android:minSdkVersion to the minSDK you selected .


• Edit android:targetSdkVersion to the targetSDK you selected .


• Edit package="theme.abohani.applicationname" to your theme package that you selected .


• Edit android:versionCode and put the version code you want, ex " 1 " or " 21 " .


• Edit android:versionName and put the version name you want, you can put letters too but without spaces .


• In " <asset path="assetname.zip" target="app.package"> ", replace " assetname.zip " with the asset file located in YourProject/Assets, Ex : yourproject/assets/android.zip => path="android.zip " .


• Replace " app.package " with the asset package, ex android = framework-res, so the package is " android ", ex2 SystemUI package is com.android.systemui, you can know it by decompiling the Apk, and check for " Package " in AndroidManiFest.xml .


• Important, in " laf-version-filter " this is an important step to make the theme change the app content, let's take SystemUI for example, decompile it and navigate to AndroidManifest.xml, search for " laf ", you will see " laf version = 2 ", so you open your project AndroidManiFest.xml and edit " <laf-version-filter from="1" to="1" /> " to " <laf-version-filter from="2" to="2" /> ", Make it match the Laf version .

Editing Strings.xml .

Navigate to YourProject/res .
Delete everything expect " values " folder .
Open it and open Strings.xml .
Replace the content with this :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="semc_theme_title">Xperience™ | MaTeRiaL Blue</string>
</resources>

Replace between " > < " with your Theme Name .

Editing Screens Preview - Lollipop Only .

Navigate to Values folder again .
Create " arrays.xml " file in it .
Put this content in it :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="previews">
<item>@drawable/pre1</item>
</array>
</resources>

• When you Open Themes Picker in your Xperia, you will the a preview you made it for the theme .


• Now, Download this FILE,then put the drawable-xxhdpi folder in " res " folder, and modify the " pre1 " image, if you want to add more Screens, just make another image and add another line in " arrays " .

Editing Images, Wallpapers / Theme Icon .

• Download this File .


• Put the content in YourProject/res .


• Edit the images, but PLEASE DO NOT COPY MY THEMES ICON STYLE .

4. Notes Making Theme Change Everything .

• There are 2 reasons for not being able to change the theme content fully .

1. You Didn't Put The Correct LAF Version .


2. The App You Need To Change Needs Skin-Permission.xml file editing, See This Guide For Info .

5. Creating Assets Files .

Making An Asset file is pretty easy, first you need the apk you want to theme, let's take how to make SystemUI Asset file as an example, and then you can make a one like it :

Download & Decompile This Asset File .
Delete The res folder content .
Decompile SystemUI.apk .
Navigate to SystemUI/res, search for things you wanna edit ( see guide below for theming guide ), then copy the files you wanna edit or you the files you have edited them to " Asset/res ", and then recompile the app, and rename it to " com.android.systemui.zip " .
After that go to AndroidManifest.xml, and put the correct Laf Version for the SystemUI, then replace " assetname.zip " with " ccom.android.systemui.zip ", and replace " app.package " with " com.android.systemui " ( the SystemUI package name ) .

Make the other assets files like it, See below for theming Guide .

6. Theming Android.Zip ( Framework-res ) .

[LIST][*]Download this asset file from here .[*]Decompile it .[*]Open res/values/colors.xml, Now you need to know what these lines mean :

• <color name="somc_color_dark_primary_dark">#ff0288d1</color> This Is Semi-Main Color in Dark Themed Apps . ( Put A Darker Color More than " primary_dark " color )


• <color name="somc_color_dark_primary_light">#ff0288d1</color> This Is Semi-Main Color in Light Themed Apps . ( Put A Lighter Color More than " primary_light " color )


• <color name="somc_color_primary_dark">#ff0288d1</color> This Is Main Color in Dark Themed Apps .


• <color name="somc_color_primary_light">#ff0288d1</color> This Is Main Color in Light Themed Apps .


• <color name="somc_color_accent_dark">#ff015785</color> This Is Secondary Color in Dark Themed Apps .


• <color name="somc_color_accent_light">#ff015785</color> This Is Secondary Color in Light Themed Apps .

[*]For Editing Slider Look, like a thin slider or a bold one, just modify the height of these files, the color doesn't matter because it will be linked with somc_color_accent color .

• somc_progress_bar_bg_dark.9


• somc_progress_bar_bg_light.9


• somc_progress_bar_primary_dark.9


• somc_progress_bar_primary_light.9


• somc_progress_bar_secondary_dark.9


• somc_progress_bar_secondary_light.9

[*]For Editing Text Selector Buttons Look, Edit these, you can put shadows and stuff if you want, it's linked with " ?tintcolor ", put you can put your own style - " mrtl " are linked color, but the others are not linked, you need to modify both of them with the color you want :

• text_select_handle_left


• text_select_handle_left_mtrl_alpha


• text_select_handle_middle


• text_select_handle_middle_mtrl_alpha


• text_select_handle_right


• text_select_handle_right_mtrl_alpha

• Adding Custom Tabs Style - Switches - Buttons Editing - Toast - .. etc
  • Download The Following Zip.
  
  
  • Extract it in Android/res folder .
  
  
  • Modify the images you want, then compile ( Images taken from Mad Max Theme - Icons names describe what they are ) .
  
  

7. Theming SystemUI .

First of all, the new Xperia Lollipop SystemUI is using " VectorType " images, to resize the Apk size, and not reducing drawables images, in previous version you have to add the same drawable to different screens, now you only need to put it as a VectorType image and it will Auto-Resize, So there are two ways to modify SystemUI Icons / Toggles :

1. Editing VectorType Images, Open the Drawable folder, then open the drawable you want to edit, like " ic_qs_airplane_on ", and you will see " path data ", So how to replace it ? First you need to have your icon in SVG, create it in SVG Software or Convert it to SVG ( not-tested ), after that open that SVG icon with notepad++ and copy the path data and replace it with the current.


2. Replacing Drawables With Images, If you don't like the VectorType way, you can make an image with the same drawable.xml file and put it in your screen dpi, for example : ic_qs_airplane_on.xml, replace it with ic_qs_airplane_on.png in Drawable-xxhdp, for the height & width .. take it from Kitkat SystemUI so it can match the xxhdpi screens and not being mis-sized .

Editing SystemUI Bar Color :

• Go to res/values .


• Make " drawables.xml " .


• Put this in it :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<item type="drawable" name="somc_status_bar_background_dark">#ff0277bd</item>
<item type="drawable" name="somc_status_bar_background_light">#ff0277bd</item>
<item type="drawable" name="somc_status_bar_background_translucent">#ff0 277bd</item>
</resources>

• Replace " background_dark " with a darker color than " primary_dark " in android.zip .


• Same for Light .


• For Translucent, you can delete, deleting it means the apps that use Transparent SystemUI bar not going to have a colored SystemUIbar, if you add it you will have your Color .

Please note there are some images can be found in drawable-xxhdpi folder you can edit, like Data Toggle icon, and other .

8. Theming Home ( Launcher ) .

In Home.Apk there are a lot of images to edit, but here's a list for the " important ones " :

• For Editing Apptray Slider/Drawer background, modify this image " apptray_drawer_background.9 " .


• For Editing the divider between the sections in Apptray Slider/Drawer, modify this " drawer_list_divider.9 " .


• For Editing the Selected Apptray Slider/Drawer Background ( When you long press a category ), modify this " drawer_list_selected.9 ", give it opacity, do not make it a solid color .


• For Editing Apptray Slider/Drawer Text Color, Modify this apptray_drawer_text_color in values/colors.xml .


• For Editing Apptray Slider/Drawer Badge Text Color , Modify this apptray_drawer_badge_text_color in values/colors.xml .


• For Editing Home Badge Text Color, Modify this home_badge_text_color in values/colors.xml .


• For editing Apptray Slider/Drawer Background, modify this apptray_drawer_background in values/colors.xml if only Editing Drawable didnt work .

9. Theming Clock .

• Clock got only Tab icons & apps icons to edit, So here is the way to modify them all :


• Download this zip .


• Extract it in Clock asset " res " folder .


• Modify them .


• Compile .

10. Theming InCallingUI .

• Nothing important in InCallingUI, only the images to modify .


• Download This zip .


• Extract is in Clock Asset " res " folder .


• Modify them, and you can modify the other icons, but these are the " main " ones .

11. Theming Phonebook .

Again nothing to modify in Phonebook, only Contact icons and other less-important icons, which can be found in drawable-xxhdpi, but for editing Dial button color, follow this :

• Create " colors.xml "


• Put the following in it :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dial_button_color">#ff0288d1</color>
</resources>

• Replace between " > < " with the color you want .

12. Theming Messaging .

Nothing to modify in Messaging also,expect for Drawables, you can dig into colors.xml to find something to edit .

• Download this zip.


• Extract it in Messaging asset " res " folder .


• Modify them .


• Compile .

13. Theming Calculator .

The only thing to edit is the app icon & some colors codes, like the right extra menu, accent color and text color.

• Navigate to res/values .


• Create " colors.xml " .


• Put the following in it :

<color name="calculator_accent_color">#ff0288d1</color>
<color name="pad_advanced_background_color">#ff0288d1</color>
<color name="pad_button_advanced_text_color">#ffefefef</color>

• Replace the hex codes, the " name " describe what it means .

14. Theming Settings .

• Only Drawables to Modify, nothing in " Colors " really important .

15. Theming Camera & Notes & Calendar & Email.

• Camera :
  • Only Drawables, like Manual Mode, Smile ..etc, and there's Settings Text Color, which i don't advice to mode it .
  
  


• Notes :
  • Notes App isn't completely in Material Design, so you can modify the drawables, and it contains the Small App ( Recorder & Notes ), you can modify them there .
  
  


• Calendar :
  • Only App Icon .
  
  


• Email :
  • Only Icons & Apps Icons - they are already in Material Design .
  
  

16. Theming Small App Launcher & Small Apps

Notes & Recorder Small-Apps Can Be Found in Notes App .

• Active Clip :
  Only Drawables .


• Browser :
  Only Drawables .


• Caculator :
  • Flat Look, Make the following images transparent ( delete the layers and replace them with empty ones ) .
  
  
  • calc_equals_btn_pressed
  
  
  • calc_equals_btn
  
  
  • calc_display
  
  
  • calc_btn_clear_pressed
  
  
  • calc_btn_clear
  
  
  • For Text Color & Background, can be found in Colors.xml .
  
  


• Timer :
  • Only Drawables.
  
  

Credits :

• @Serajr For VectorType Tip! Thanks man :highfive: