FORUMS

[GUIDE][THEMING]How to theme any Android App

1,297 posts
Thanks Meter: 686
 
By Raiz, Senior Member on 13th April 2018, 10:41 AM
Post Reply Email Thread
I make (another) guide on how to theme, but it’s based on my experience. If moderators think this thread redundant , they are free to delete or close it.
This tutorial is for « every » operating system. In this tutorial I will change the color of some object of the XDA Labs app . There will be 2 part for this guide, the first is the general method and the second one is the description of what I’ve done on the XDA Labs app to theme it. Please , before asking , read the entire OP , maybe your answer is into it.

I’m running Ubuntu 16.04 LTS but the softwares are also compatible with windows and mac.
Which software I use :
Inkscape (to make icons)
Alpha Colour for Android (to see which aplha code correspond to which level of opacity)
Pipette for Android (to identify colors on the app’s screenshot) No longer available , use this app, it's even more accurate
ZipSigner for Android(to sign apk)
No longer available, for signing please refer to this tool

I-General Method :


1-First you need to set-up your PC’s environment:
• A 64-bit PC Processor ( 32-bit has too many bugs linked to aapt compatibility)
Apktool or other reverse engineering tools properly installed
• Java 7 or above
Notepad++ or any text editor



2-What you should know before theming:
A)Colors:
Modifying colors is quite simple a process, but you should first understand it.Then you can change the app as your mind tells you to.
1-A regular line in this file is built like this :
-<color name="[object’s id]">#[alpha channel][hex code]</color>
2-Meaning :
- Alpha channel : This is the 2 characters that change the opacity of the color
- Hex Code : This is the 6 characters that define the color itself
3-For example :
<color name="design_fab_stroke_end_outer_color">#0f000000 </color>
- «design_fab_stroke_end_outer_color» is the id of the object I want to change the color from
- «0f» is the alpha channel of the initial color
- «000000» is the hex code of the initial color
4-To modify them :
Replace the hex code of the initial colors by the hex code of the color you want to add , be careful not to delete a piece of the line with the old hex code because it will cause errors on apktool. I use alpha colour app for Android to see levels of opacity and to find color’s hex code.


B)Pictures :
You want to change pictures inside the app , that’s simple :
• Search for the picture you want to change in the drawable folder or mipmap folder
• Folders you want to browse to find the pictures :drawable-xhdpi-v4 / xxhdpi-v4 / xxxhdpi-v4 for the « in-app » pictures , every mipmap folders for icons (sometimes icons are in drawable folders and there aren’t any mipmap folders).
• When you prepare the pictures , make sure they have the SAME SIZE as the original pictures.
• Rename the picture you have prepared to replace old ones with the SAME NAME AS THE OLDER PICTURES.
• Once you have renamed those pictures, put them into the folder where you found them.


C) App name :
• go to /res/values and open string.xml
• Modify this string : <string name="app_name">[The name you want]</string>
Example :<string name="app_name">XDA Evolved</string>



3-Now , we can start theming :
• Go to the apktool’s directory , and open a command prompt there (keep it open till the end)
• Enter this command :
Code:
java -jar apktool.jar d [the apk name.apk]
• There should be a new folder which has the name of your apk file. Open this folder.
• Then go to /res/values and open the colors.xml file
• Modify the colors
• Search for the pictures you want to change and change them as I have written above
• Open the terminal you kept open
• Enter this command :
Code:
java -jar apktool.jar b [the apk name.apk]


4-Before installing , signing :
I use an Android app called zip signer , with which I can sign apks from my phone.
• Open the app , click on input and browse for the apk you’ve put on your phone
• Click on the file when you’ve found it
• Click on Output and select the same apk file as in the first step
• Rename the path adding a « -signed » just before « .apk » at the end of the path.
• Select on the « key/mode » menu « platform »
• Finally , click on « sign the file » and wait till the end of the progress bar.


II-What I’ve done


1-Identifying :
Here is the list of the infos I’ve written down :
• Image Size
• The Hex code of the color I want to change :
- Take a screenshot of the color(s) you want to modify
- Open the screenshot on Pipette
- Tap on the lock button and click on the color , the hex code will be displayed at the bottom
• The Hex code of the color I want to add : Same process with Pipette
• The colors I want to add :
Quote:

-Blue :3174f1
-Yellow :fbb002
-Background :47595c
-Background of the posts :2d2d2d
-the secondary color :c0c0c0

• The colors I want to change:
Quote:

-Background color :212121
-Accent color :edb02d
-Primary color :353535
-The secondary color :#aaffffff



2-Editing and making new icon, etc.:
• I used Inkscape (free alternative to illustrator) because there were vector-designed icons.
• I used gimp to resize the picture after making them.


3-Decompiling the apk file :
• I typed in the terminal :
Code:
 java -jar apktool.jar d XDALabs.apk


4-Replacing icons and other images :
• I put the pictures in the 3 drawable folders because it’s where I found them


5-Editing colors and the name :
• I went to /res/values and I opened colors.xml file and I replaced colors and some alpha channel :
Code:
<color name="accent">#ffedb02d</color>
<color name="accent_translucent">#ddedb02d</color>
<color name="background_dark">#ff212121</color>
<color name="dialog_bg_dark">#ff212121</color>
<color name="primary">#ff353535</color>
<color name="primary_bg">#ff353535</color>
<color name="primary_dark">#ff2b2b2b</color>
<color name="search_divider_dark">#ff212121</color>
<color name="search_list_results_bg_dark">#ff212121</color>
<color name="secondary_text">#ff727272</color>
to

Code:
<color name="accent">#fffbb002</color>
<color name="accent_translucent">#ddfbb002</color>
<color name="background_dark">#ff47595c</color>
<color name="dialog_bg_dark">#ff2d2d2d</color>
<color name="primary">#ff3174f1</color>
<color name="primary_bg">#ff2d2d2d</color>
<color name="primary_dark">#ff3174f1</color>
<color name="search_divider_dark">#ff2d2d2d</color>
<color name="search_list_results_bg_dark">#ff2d2d2d</color>
<color name="secondary_text">#ffc0c0c0</color>


• I opened strings.xml file and I replaced the app name line :

Code:
<string name="app_name">XDA Labs</string>
to

Code:
<string name="app_name">XDA Evolved</string>


6-Recompiling the new apk file :
• I opened the same command prompt and I typed this command :
Code:
 java -jar apktool.jar b XDALabs


7-Signing the apk after install it :
• The same process as in the step 4 in the part one of my guide (I - 4).


8-Install the Apk :
• Uninstall the original app
• Install the signed version of the apk.


You can ask me on this thread about everything about the theming and I'll do my best to solve your problems, but do it in the respect and following the Forum Rules
You can go to themed XDA Labs version's thread clicking here.
And please , if you found this guide useful , press the thank button.
The Following 9 Users Say Thank You to Raiz For This Useful Post: [ View ] Gift Raiz Ad-Free
20th April 2018, 03:15 AM |#2  
Junior Member
Thanks Meter: 3
 
More
When I learn
Thank you for posting this. I always wanted to customize an android app, but have never had much success.
20th April 2018, 05:31 AM |#3  
Raiz's Avatar
OP Senior Member
Thanks Meter: 686
 
Donate to Me
More
Quote:
Originally Posted by coluvatz12

Thank you for posting this. I always wanted to customize an android app, but have never had much success.

Glad to hear that , thanks!
If you think this thread helped you , please press the thank button , I'm happy to see that my work is appreciated , Happy Theming !
The Following 2 Users Say Thank You to Raiz For This Useful Post: [ View ] Gift Raiz Ad-Free
4th May 2018, 08:36 AM |#4  
Raiz's Avatar
OP Senior Member
Thanks Meter: 686
 
Donate to Me
More
Quote:
Originally Posted by nandakumar12 via PM

dude one doubt, how can i change the background color of an app, i cant find a code to change..??

First you should have installed the app and identified the hex code of the background color (E.G :#36ge87)
You can do it via Pipette , an app which identify hex code in a picture. Just take a screenshot and identify the colors via Pipette .

Then you will have to search for the hex code of the background color you identified with Pipette previously.
This step is on your PC , you opened the color.xml file in notepad++ or whatever it is , and you wrote the hex code of the background color in the search bar. Make the search and find all the lines that have the hex code in it.

If you found multiple line , try to modify one of the lines , compile the APK , sign it and install it on your phone to see if something changed. Do that until you find the line holding the background color.
Theming , at the beginning is pretty long on require patience and many test before finding which line is the good one .

I hope my answer will help you .

Happy theming !!👍👍👍
The Following 3 Users Say Thank You to Raiz For This Useful Post: [ View ] Gift Raiz Ad-Free
11th August 2018, 02:17 PM |#5  
Junior Member
Flag Londrina/PR
Thanks Meter: 0
 
More
DUVIDA
Hello friends of the forum xda developers Instead, this forum is a newbie Needed to take a doubts:

I have a mobile model with windows 10 installed that is stopped in the drawer without use

He has put windows phone 10

I would like to change it on an Iphone with COMPATIVEL System OR ate pie android EVEN Instalar 9,0

I wonder if this is possible and what procedures to take I assume of all the risks ok

Other question:

I have a moto g5 plus and the Manufacturer Promised me an Update for the oreo 8.1.0 but until the moment nothing arrived and the artist said that it has already been released but up to the moment without conditions of receipt

There is a rumor that will be released only in September

Someone confirms this information

I await any response

Marcelo - DJ KUKA
2nd September 2018, 03:53 PM |#6  
Senior Member
Flag Pune
Thanks Meter: 113
 
More
Quote:
Originally Posted by djkukapr

Hello friends of the forum xda developers Instead, this forum is a newbie Needed to take a doubts:

I have a mobile model with windows 10 installed that is stopped in the drawer without use

He has put windows phone 10

I would like to change it on an Iphone with COMPATIVEL System OR ate pie android EVEN Instalar 9,0

I wonder if this is possible and what procedures to take I assume of all the risks ok

Other question:

I have a moto g5 plus and the Manufacturer Promised me an Update for the oreo 8.1.0 but until the moment nothing arrived and the artist said that it has already been released but up to the moment without conditions of receipt

There is a rumor that will be released only in September

Someone confirms this information

I await any response

Marcelo - DJ KUKA


Don't know what you want to ask
Please be clear
All I can infer is that this doubt doesn't belong here look over the ROMs sections
Thanks!
The Following User Says Thank You to GAURAV THAKKAR For This Useful Post: [ View ] Gift GAURAV THAKKAR Ad-Free
2nd September 2018, 05:01 PM |#7  
Raiz's Avatar
OP Senior Member
Thanks Meter: 686
 
Donate to Me
More
Quote:
Originally Posted by GAURAV THAKKAR

Don't know what you want to ask
Please be clear
All I can infer is that this doubt doesn't belong here look over the ROMs sections
Thanks!

Don't worry , that's a random spam , that's why I ignored it.
And I don't think he'll respond .
The Following User Says Thank You to Raiz For This Useful Post: [ View ] Gift Raiz Ad-Free
2nd September 2018, 05:07 PM |#8  
Senior Member
Flag Pune
Thanks Meter: 113
 
More
Quote:
Originally Posted by RaiZProduction

Don't worry , that's a random spam , that's why I ignored it.
And I don't think he'll respond .

Since you've replied please check the Signing Apk Guide..
You've mentioned a thread dated 4 sep
Can you please link me to it?
The Following User Says Thank You to GAURAV THAKKAR For This Useful Post: [ View ] Gift GAURAV THAKKAR Ad-Free
3rd September 2018, 06:42 AM |#9  
Raiz's Avatar
OP Senior Member
Thanks Meter: 686
 
Donate to Me
More
Quote:
Originally Posted by GAURAV THAKKAR

Since you've replied please check the Signing Apk Guide..
You've mentioned a thread dated 4 sep
Can you please link me to it?

Fixed !
That was just a typo , what I really meant is the step four in the first part of the Guide , the I - 4 .
3rd September 2018, 03:47 PM |#10  
Senior Member
Flag Pune
Thanks Meter: 113
 
More
Quote:
Originally Posted by RaiZProduction

Fixed !
That was just a typo , what I really meant is the step four in the first part of the Guide , the I - 4 .


Trying to theme Instagram
Will ping you if any issue occurs
Thanks for the simplest and to the point guide I've seen ever
3rd September 2018, 06:13 PM |#11  
Raiz's Avatar
OP Senior Member
Thanks Meter: 686
 
Donate to Me
More
Quote:
Originally Posted by GAURAV THAKKAR

Trying to theme Instagram
Will ping you if any issue occurs
Thanks for the simplest and to the point guide I've seen ever

You're welcome , all the pleasure is for me
Post Reply Subscribe to Thread

Tags
android theme, how to theme, how to theme android apps, theme, xda labs

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes