FORUMS
Remove All Ads from XDA

[GUIDE][THEMING]How to find in the code what you want to theme

922 posts
Thanks Meter: 554
 
By RaiZProduction, Senior Member on 30th June 2019, 09:30 AM
Post Reply Email Thread
Hi there, in this guide I’ll try to explain the most complicated part of theming (at least for me) : Finding what line of code I want to modify in order to change one specific element of the app I want to theme.

I will show you the method that I use in order to do so, and trust me, that was a pain in the neck to find this method, because I had to try hard, make test, theme many apps…

But XDA is a place of sharing, and I want to share my experience with you, so you don’t toil as I did.

This tutorial isn’t for newbies, I would recommend to check XML 101 from @Ticklefish
And the How to theme any android apps guide from me, where I use the color method detailed in the third post.
Once you’re more comfortable with those, you’ll understand better what I’m telling you now.

Required knowledge:
  • XML basics that you can learn with XML 101
  • Know how to use apktool (Go there, thanks @A_U, it's pretty old but it can get the job done)
  • Being comfortable with sublime text or notepad++ (or another text editing software file "search in folder" feature)
  • Know approximately how an apk file works (file structure, check out that: it's a quick summary)


One general method:
Unless you are a genius, you can’t guess how a developer named elements of the app you want to theme in the code.
For example, factory reset in the setting app from Xiaomi is named « master_clear_... »
Several lines referenced the same name:
- master_clear_apply for the apply menu
- master_clear_button for the button to press in order to reset the phone
- etc …

What you want to do in order to find the name of those elements (for example the reset button that someone asked me to erase), you have to find something that characterizes it, something that only this element has, and it can be many things. This thing will help you recognize the element in the code, so you’ll be able to find how it’s named in the code. I call this name a code name, what you should do is find this code name with the method I'll give you, and then search for those codenames in the layout folder.
The posts below will detail methods that I use to find the code name of the element I want to theme.

Update : What I call a code name is called a resource ID

Summary :
  • Strings
  • Colors
  • Drawables
  • Layout

To search for something in every file of one directory, you can use notepad++ or sublime Text (on Linux)
The Following 2 Users Say Thank You to RaiZProduction For This Useful Post: [ View ] Gift RaiZProduction Ad-Free
 
 
30th June 2019, 09:31 AM |#2  
RaiZProduction's Avatar
OP Senior Member
Flag Tours
Thanks Meter: 554
 
More
Strings :
The first thing I recommend to dig into are strings.
Strings are the most specific thing in the element you want to theme.
To go back to my example, I wanted to erase the « Reset » button from the setting app (a user asked).
The things that I know just by looking at this element:
-It’s a button
-« reset » is written on this button

So I go to the Strings.xml file and I search for the « reset » keyword.
How lucky! I found exactly what I wanted, next to the reset word, was written:
Code:
<string_name=master_clear_...
But there were several line mentioning it: whatever!
I just found the name for factory reset! It’s called master_clear (usually, names in the code make sense, so when I saw reset next to « <string_name=crypto… » I knew that it wasn’t the right name. Master clear fits perfectly, because I knew that factory reset means cleaning the device. Plus the other lines with a name starting by « master_clear » were the text warning before doing a factory reset, the « cancel » button, etc…)
So now that I’m sure that master_clear is for factory reset I searched in the layout folder (in every file using Notepad++) if some lines in those files were referencing « matser_clear_... »
Hopefully I found some files named maste_clear_....xml and they were pretty short, so I read them and I saw in one of them a « <Button… », with an attribute referring to the reset text I saw on the button.
The line was:
Code:
    <Button android:gravity="center" android:layout_gravity="center_horizontal" android:id="@id/initiate_master_clear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20.0dip" android:layout_marginBottom="12.0dip" android:text="@string/master_clear_button_text" />
You see the android:text attribute ? It's referring to a line in the String.xml file:
Code:
<string name="master_clear_button_text">Reset phone</string>
Hopefully, we found the exact button with the "reset phone" text on it: let’s add the android:visibility="gone" attribute to make this button gone.
Usually it’s a bit more painful because sometimes you have large layout files that are difficult to read and understand, I’ve been lucky this time.

That’s how you do when the thing that characterize your element is a string (a text)
30th June 2019, 09:33 AM |#3  
RaiZProduction's Avatar
OP Senior Member
Flag Tours
Thanks Meter: 554
 
More
Colors :
So the element you want to theme has nothing particularly, except his color, what you want to do is to identify the hex code of the colors corresponding to the element you want to theme.
Use this app to proceed:
https://play.google.com/store/apps/d...rs.colorpicker

Also check out my tutorial part II-1 and part I-2)A) to know how to identify the colors.
https://forum.xda-developers.com/and...d-app-t3777101

Now that you got the hex code of your color, search for it in /value/colors.xml file. If you don’t find it there, search for it in the whole /color directory (it's veeeeerry rare that a dev puts colors here, I haven't seen that yet). If you don’t find it, it means that the hex code is wrong, maybe the alpha channel is wrong, give it another try.
An example:
I have an element with this color code: 80cbc4 and this alpha channel: 66 (go check out my guide to know how to find approximately the alpha channel)
I found this line in the colors.xml (in the value folder)
Code:
<color name="highlighted_text_material_dark">#6680cbc4</color>
It means that the code name is : "highlighted_text_material_dark" (but that's just an example, if I want to find the code name of an element with text, I won't search for the color of the text, I would search for the text codename itself)

Again, the code name must be logical. If you want to theme a factory reset button and the code name is “wifi_confirmation_reset”, that may not be the one that you’re looking for.
But sometimes, some elements have a weird code name, if you’re hesitating, give a try to both code names: try to modify the color for the first one, recompile everything and see if it changes something. If not, modify the second one, make some test.

Once you get the codename, search for it on the layout folder and here you go, you’ll find one file or some file mentioning it. If it’s only one, you’re lucky, if there are more files, try to see by reading them if they correspond to the layout where your element is located.

Once you got the right layout, have fun modifying it
30th June 2019, 09:33 AM |#4  
RaiZProduction's Avatar
OP Senior Member
Flag Tours
Thanks Meter: 554
 
More
Drawable:
Let’s say now that you have on your element an image, this image can be find under /drawable-…
The “…” thing is for hdpi, xhdpi… and every folders starting by drawable. Once you found the right image (make sure it’s the right one, if there are two similar images), copy its name and search for it on the layout folder.
Open the file that mentions it and modify it.
This method doesn’t work every time so make sure that you have a backup idea (like a color or something)
30th June 2019, 09:33 AM |#5  
RaiZProduction's Avatar
OP Senior Member
Flag Tours
Thanks Meter: 554
 
More
Layouts:
If you haven’t any idea of what makes your element special, just look into the layout folder and try to find a name that seems to be correct and logical (if you want to modify a volume rocker, try to find a name related to that)
Try to read some layouts and draw them fast on a piece of paper next to you. If it looks like yours, then try to modify it and see if you get what you expected.
30th June 2019, 09:34 AM |#6  
RaiZProduction's Avatar
OP Senior Member
Flag Tours
Thanks Meter: 554
 
More
You’ll always make a LOT of test before getting what you want because code is always like that. But don’t give up, and with those method, I’m sure I’ll save you some time.
Enjoy !
I'm open to every questions, come on, don't be shy


So in conclusion, yee haw
Post Reply Subscribe to Thread

Tags
apktool, how to find what i want to theme, how to theme, theme, theming

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

Advanced Search
Display Modes