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://xdaforums.com/showthread.php?t=2073775
*Notepad++:- https://xdaforums.com/showthread.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"/>
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://xdaforums.com/showthread.php?t=2073775
*Notepad++:- https://xdaforums.com/showthread.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"/>
Attachments
Last edited:
