FORUMS
Remove All Ads from XDA

TWRP theming tutorial

394 posts
Thanks Meter: 332
 
By MKUltraBlack, Senior Member on 26th August 2019, 06:45 AM
Post Reply Email Thread
Tutorial how to theme twrp using PC.
Includes how to :-
*Decompile twrp image
*Recompile twrp image
*splash.xml
*Ui.xml
*Portrait.xml
*Fonts
*Images
*Languages
*General ui tweaks
*Open discussion
*notes
*Dodgy screenshots

If you want to learn to theme twrp for yourself here is a comprehensive guide with chat and help. Sign up and start theming twrp today.

**Note this is not a request site for themes**

Visit https://t.me/MKDeltaBlack for tutorial.

##################
List of tools:

*PC

*Twrp image:- https://twrp.me/Devices/

*Android image kitchen:- https://forum.xda-developers.com/sho....php?t=2073775

*Notepad++:- https://forum.xda-developers.com/sho....php?t=2380786
##################



##################




HOW TO DECOMPILE &

RECOMPILE TWRP





##################



Step 1:- Open android image kitchen zip by right clicking it and select Extract all, then hit the extract button and open the first 2 folders until you see 5 files


Step 2:- Get your twrp image and drag and drop or copy and paste into that android image kitchen window and rename it to recovery


Step 3:- Drag and drop the recovery you just renamed ontop of the unpackimg file and a command window will pop up . Don't worry you dont need to type anything as it's all automated. After 5-10 seconds it will prompt you to press any key on keyboard. Press any key


Step 4:- You now have 2 new folders ramdisk and split_img


Open ramdisk by double clicking it and scroll down to twres folder and open that. These are the folders and xml's you will be editing.


The next step is to edit the files, but while were here I'll show you how to recompile. You can try now as a practice. This will just recompile standard twrp.


Step 5:- Click the back button twice to go back to the kitchen and double click on repackimg

The command window will pop back up and do its thing then just press any key

You now have image-new, that is your new twrp.img


Drag this and move it to desktop and change it's name to recovery.img

Step 6:- Clean up your kitchen, you will be left with extra files, just delete the files crossed out by double clicking cleanup and deleting the original recovery this will leave the original files like when you originally opened android image kitchen then close the window.


Step 7:- transfer new twrp image to phone and flash in twrp as image. Done


So it's just literally a few clicks of a mouse to decompile and recompile twrp


#1 fonts :- add any TrueTypeFace (.ttf) font in here (or several if you like) by copy and paste or just drag file to this folder. This will include that font in your twrp. Now you need to say where you want that font. That will be covered in languages, splash and ui

#2 images:- When you open the images folder it will show you all the "drawable" images for the whole of the twrp image like this.


The next bit is down to your own imagination. Copy the images folder and go to your favourite art app or pics you have made and replace the ones you want to change. If you put the mouse over it, it will show you what size and format the pic should be. This is .png and 162 x 161 so make it the same size format and name ie. Pic shown is backspace so your new pic should be backspace.png wih size 162 x 161
Here is the one I have replaced, you can see its same size, fomat and name


Do this for all the "drawable" pics you want to change then put the new pics in the images folder in android image kitchen. If it asks to replace say yes to all.

#3 Languages:- double click the languages folder and it'll show all the language xmls
Now you will need notepad++ to edit the xml files.

Right click on the zip and select extract all. Double click the notepad++.exe and install

Go to your languages folder in twres folder and right click on a language and select edit with notepad++ and it will open the xml file
At the top you will see the fonts. You can replace the name of font to the one you put in the font folder. ie my font is called MKUltraBlack.ttf so replace name by deleting the current name and typing or copy paste your font name in that place


If you're replacing font for all languages (recommended) you will need to open all the font xmls in notepad++, to do this go to your languages folder in android image kitchen and right click on top language and select edit with notepad++, it'll open the xml now just close the notepad++ window and go back and do the second, third etc until all done. You will notice all the files are now in notepad++


Now go to search on toolbar and select replace

Type your font you want to change in the "find what" box and put your new font name in the "replace with" box then select Replace All in All Open Documents. You can see in the box it will say how many it has changed it should be 18 or something, I just did a few for example


Now go to file in the toolbar and select save all

That's how to change font for the most of twrp there are 2 more places that will be covered in ui and splash.

The rest of the language.xml is made up of "strings" which just means the words that will be displayed on the screen. The only one I personally ever change is the twrp_header

Just replace the text between the >example< to >my words< on any "string" and press save on the toolbar after


ie I replaced the twrp_header string >Team Win Recovery Project< with >MKUltraBlack< and this is the result


because some words are different in other languages replace all can be used but will miss some out if the words are different so it is better to replace strings by opening a single language.xml and change all the strings you need to then save and do the next


#4 Portraits:- portrait.xml is how the "pages" of twrp are arranged ie main_page will be your main screen in twrp where it says install, wipe etc and where the buttons go. It is a big(ish) xml so we can discuss this through chat on how to rearrange buttons etc If you want to just change the name of a button you do that in all language.xml's and save as described before


#5 Splash:- This is the "Splash screen" the first image that it shows when you boot into twrp


Right click the splash.xml and select open with notepad++ and you will see this (its a small xml)


This xml also has a font to change if you want, just highlight the RobotoCondensed-Regular.ttf and change to your font name that you put in the font folder ie MKUltraBlack.ttf
This will only change the font of the splash screen text under the team win logo. Note it will not change the bit that says team win as that is a .png and not text


Screen height/width leave this as all twrp from 3.0 onwards use this ratio and auto resizes to your screen size

There are 3 colours under that
#1 background_color
#2 header_color
#3 accent_color
Just change the #222222 to your hex colour ie #000000 (pure black) and do same for all 3.
Here is what they change


As you move on you might want a totally different splash. To do this make a pic that you want for splash screen. It should be 1080x1920 and png format. Call splash.png and put it in twres images folder

Now open the ui.xml with notepad++ and add this highlighted line anywhere in resources near the start and press save button that looks like a disc in toolbar (pic)


Now delete the highlighted lines


And add the following highlighted lines and save by pressing the save button on the toolbar that looks like a disc


#6 ui:- Right click and open with notepad++
Leave the first bit, the next bit is fonts. Just do as before and change the name of the fonts to your name ie MKUltraBlack.ttf
Next bit is images this is a list of images that can be found in your images folder. This is where you add the "splash line" for your personalised splash screen


Scroll down a bit and you will see variables from about line 177 to 193 are what to look at in this area for the time being


They are pretty self explanatory, just change the hex code to colour you want

Here's a rundown of what they are
#1 background_color
#2 accent_color
#3 accent_color_semitransparent
#4 text_color
#5 text_button_color


The rest are text colours for flash successful text, error text etc

Down near the bottom of the ui.xml is 2 areas for keyboard. 1 is for when format data, name backup etc and the other is the terminal keyboard


Here there is a few hex colours to change like keyboard background, keys, text etc just change these to the colours you want and press save button that looks like a disc in toolbar.



##BOOTLOOP##
If the image is wrong in some way you may end up in bootloop. If you do just put your phone into download mode, vol down, power and home until you see green download screen (on Samsung's might be different combo for other devices) then simply flash your correct recovery.img.tar to the AP section in Odin. When the flash finishes in Odin quickly press the twrp button combo (vol up, power and home on Samsung's). Then your good to go again.


# Background Picture.

In your decompiled image open up the ui.xml with notepad++
Add in <resources>

<image name="background" filename="background"/>



Keep scrolling down in ui.xml past resources and variables to templates. The first <template name="page"> is the main page that will be displayed in all sections of twrp. In this template add the line

<image>
<image resource="background"/>
<image>



*Now save*

Make your background image a 1080x1920 png and call it background.png and add it to the images folder in the twres folder in your decompiled image and recompile.

You can also put a different background for each page.

Open the portrait.xml with notepad++ and use search to look for <page name="
You can then use the same method as background. Just name the "background" different in the stages.
For example call it advanced:

Add advanced.png to images folder in twres folder

Add <image name="advanced" filename="advanced"/> to resources

And add the

<image>
<image resource="advanced"/>
<image>

Under the <template name="page"/>
Attached Thumbnails
Click image for larger version

Name:	Screenshot_20190826-063818_Plus.jpg
Views:	174
Size:	192.9 KB
ID:	4811133   Click image for larger version

Name:	IMG_20190826_063944_467.jpg
Views:	166
Size:	199.1 KB
ID:	4811134   Click image for larger version

Name:	IMG_20190826_064045_879.jpg
Views:	166
Size:	201.9 KB
ID:	4811135   Click image for larger version

Name:	Screenshot_20190826-064052_Plus.jpg
Views:	170
Size:	202.8 KB
ID:	4811136  
The Following User Says Thank You to MKUltraBlack For This Useful Post: [ View ] Gift MKUltraBlack Ad-Free
 
 
13th September 2019, 03:35 AM |#2  
MKUltraBlack's Avatar
OP Senior Member
Flag Inverness
Thanks Meter: 332
 
Donate to Me
More
Next section coming soon, how to add keyboard background picture
Attached Thumbnails
Click image for larger version

Name:	sketch-1568342061763.png
Views:	34
Size:	195.3 KB
ID:	4818867  
Post Reply Subscribe to Thread

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

Advanced Search
Display Modes