[Android Themes] MKUltraBlack:
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"/>