First things to know :
A custom theme for TWRP ( recovery ) is a zipped folder who is named : ui.zip
This folder is composed by 2 folders :
fonts
There are in this folder all fonts resources of the theme in .dat format.
nb: the two last numbers of name is the size
images
There are in this folder any images resources.
If you are editing/resizing a theme you must be aware about size of these.
exemple : if you are trying to port a 720p theme in 1080p you'll need to multiply the size of all images by 1,5
( 100x100 => 150x150 ).
And an xml file :
ui.xml
There are in this file any codes of apparence of the theme.
This is the most complicate part of theme and is composed like this :
Code:
<?xml version="1.0"?>
Code:
<recovery> <details> <resolution width="1080" height="1920" /> <author>Primokorn</author> <title>XDA Origins</title> <description>TWRP Theme </description> <preview>preview.jpg</preview> </details>
then, between > ... < put what you want.
Code:
<resources> <resource name="font" type="font" filename="Roboto-Regular-30" /> <resource name="mediumfont" type="font" filename=" Roboto-Regular-25" /> <resource name="filelist" type="font" filename="Roboto-Regular-30" /> <resource name="top_bar" type="image" filename="top-bar.png" /> <resource name="background" type="image" filename="background.jpg" /> <resource name="main_button" type="image" filename="menu-button" /> <resource name="main_button_highlight" type="image" filename="menu-button-highlight" /> <resource name="file_icon" type="image" filename="file" /> <resource name="folder_icon" type="image" filename="folder" /> <resource name="slideout" type="image" filename="slideout" /> <resource name="progress" type="animation" filename="indeterminate" /> <resource name="progress_empty" type="image" filename="progress_empty" /> <resource name="progress_full" type="image" filename="progress_fill" /> <resource name="checkbox_false" type="image" filename="checkbox_empty" /> <resource name="checkbox_true" type="image" filename="checkbox_checked" /> <resource name="radio_false" type="image" filename="radio_empty" /> <resource name="radio_true" type="image" filename="radio_selected" /> <resource name="medium_button" type="image" filename="medium-button" /> <resource name="sort_button" type="image" filename="sort-button" /> <resource name="medium_button_highlight" type="image" filename="medium-button-highlight" /> <resource name="sort_button_highlight" type="image" filename="sort-button-highlight" /> <resource name="minus_button" type="image" filename="minus-button" /> <resource name="plus_button" type="image" filename="plus-button" /> <resource name="home_icon" type="image" filename="home-icon" /> <resource name="back_icon" type="image" filename="back-icon" /> <resource name="slider" type="image" filename="slider" /> <resource name="slider-used" type="image" filename="slider-used" /> <resource name="slider-touch" type="image" filename="slider-touch" /> <resource name="unlock-icon" type="image" filename="unlock" /> <resource name="keyboard1" type="image" filename="keyboard1" /> <resource name="keyboard2" type="image" filename="keyboard2" /> <resource name="keyboard3" type="image" filename="keyboard3" /> <resource name="keyboard4" type="image" filename="keyboard4" /> </resources>
- resource name="..." this is the resource name used in the xml script
- type="..." this the type of resource ( image, font, animation ... )
- filename=" ... " this is the name in resources folders
Code:
<variables> <variable name="col1_x" value="10" /> <variable name="col2_x" value="565" /> <variable name="col_center_x" value="288" /> <variable name="col_center_medium_x" value="414" /> <variable name="center_x" value="540" /> <variable name="row1_y" value="255" /> <variable name="row2_y" value="615" /> <variable name="row3_y" value="975" /> <variable name="row4_y" value="1335" /> <variable name="col1_center_x" value="179" /> <variable name="col2_center_x" value="552" /> <variable name="row1_text2_y" value="310" /> <variable name="row2_text2_y" value="550" /> <variable name="row_queue_y" value="1140" /> <variable name="row1_header_y" value="180" /> <variable name="row1_text_y" value="255" /> <variable name="row2_text_y" value="330" /> <variable name="row3_text_y" value="405" /> <variable name="row4_text_y" value="480" /> <variable name="row5_text_y" value="555" /> <variable name="row6_text_y" value="630" /> <variable name="row7_text_y" value="705" /> <variable name="row8_text_y" value="780" /> <variable name="row9_text_y" value="855" /> <variable name="row10_text_y" value="930" /> <variable name="row11_text_y" value="1005" /> <variable name="row12_text_y" value="1080" /> <variable name="row13_text_y" value="1155" /> <variable name="row14_text_y" value="1230" /> <variable name="row15_text_y" value="1305" /> <variable name="row16_text_y" value="1380" /> <variable name="row17_text_y" value="1455" /> <variable name="row18_text_y" value="1530" /> <variable name="zip_status_y" value="922" /> <variable name="tz_selected_y" value="240" /> <variable name="tz_set_y" value="1500" /> <variable name="tz_current_y" value="1425" /> <variable name="col_progressbar_x" value="351" /> <variable name="row_progressbar_y" value="1650" /> <variable name="col1_medium_x" value="10" /> <variable name="col2_medium_x" value="282" /> <variable name="col3_medium_x" value="545" /> <variable name="col4_medium_x" value="817" /> <variable name="row1_medium_y" value="195" /> <variable name="row2_medium_y" value="345" /> <variable name="row3_medium_y" value="392" /> <variable name="row4_medium_y" value="645" /> <variable name="row5_medium_y" value="795" /> <variable name="row6_medium_y" value="1260" /> <variable name="row7_medium_y" value="730" /> <variable name="slider_x" value="101" /> <variable name="slider_y" value="1575" /> <variable name="slider_text_y" value="1676" /> <variable name="button_text_color" value="#FF9C11" /> <variable name="text_color" value="#FF9C11" /> <variable name="text_success_color" value="#00FF00" /> <variable name="text_fail_color" value="#FF9C11" /> <variable name="highlight_color" value="#90909080" /> <variable name="home_button_x" value="10" /> <variable name="home_button_y" value="1839" /> <variable name="back_button_x" value="944" /> <variable name="back_button_y" value="1839" /> <variable name="sort_text_x" value="10" /> <variable name="sort_asc_text_y" value="1635" /> <variable name="sort_asc_button_y" value="1620" /> <variable name="sort_desc_text_y" value="1725" /> <variable name="sort_desc_button_y" value="1710" /> <variable name="sort_col1_button_x" value="390" /> <variable name="sort_col2_button_x" value="540" /> <variable name="sort_col3_button_x" value="690" /> <variable name="input_width" value="1060" /> <variable name="input_height" value="75" /> <variable name="input_background_color" value="#000000" /> <variable name="input_cursor_color" value="#FF9C11" /> <variable name="input_cursor_width" value="4" /> <variable name="console_x" value="0" /> <variable name="console_width" value="1080" /> <variable name="console_foreground" value="#FF9C11" /> <variable name="console_background" value="#000000" /> <variable name="console_scroll" value="#000000" /> <variable name="console_action_height" value="705" /> <variable name="console_install_height" value="900" /> <variable name="console_installdone_height" value="660" /> <variable name="fileselector_x" value="5" /> <variable name="fileselector_width" value="1070" /> <variable name="fileselector_install_height" value="1170" /> <variable name="fileselector_header_background" value="#000000" /> <variable name="fileselector_header_textcolor" value="#FF9C11" /> <variable name="fileselector_header_separatorcolor" value="#FF9C11" /> <variable name="fileselector_header_separatorheight" value="4" /> <variable name="fileselector_separatorcolor" value="#FF9C11" /> <variable name="fileselector_separatorheight" value="3" /> <variable name="fileselector_background" value="#000000" /> <variable name="fileselector_highlight_color" value="#505050" /> <variable name="fileselector_highlight_font_color" value="#FF9C11" /> <variable name="fileselector_spacing" value="36" /> <variable name="fastscroll_linecolor" value="#FF9C11" /> <variable name="fastscroll_rectcolor" value="#FF9C11" /> <variable name="fastscroll_w" value="90" /> <variable name="fastscroll_linew" value="3" /> <variable name="fastscroll_rectw" value="60" /> <variable name="fastscroll_recth" value="105" /> <variable name="listbox_x" value="5" /> <variable name="listbox_width" value="1070" /> <variable name="listbox_tz_height" value="885" /> <variable name="listbox_background" value="#000000" /> <variable name="listbox_spacing" value="24" /> <variable name="sd_plus_x" value="525" /> <variable name="sdext_text_x" value="165" /> <variable name="sdext_text_y" value="270" /> <variable name="sdswap_button_y" value="390" /> <variable name="sdswap_text_x" value="165" /> <variable name="sdswap_text_y" value="405" /> <variable name="sdfilesystem_text_y" value="510" /> <variable name="sdfilesystem_button_y" value="570" /> <variable name="lock_x" value="240" /> <variable name="lock_y" value="600" /> <variable name="filemanager_select_x" value="840" /> <variable name="filemanager_select_y" value="1620" /> <variable name="backup_name_y" value="825" /> <variable name="terminal_console_height" value="1080" /> <variable name="terminal_text_y" value="1095" /> <variable name="terminal_button_y" value="1050" /> <variable name="row_dst_text_y" value="1080" /> <variable name="row_offset_text_y" value="1155" /> <variable name="row_offset_medium_y" value="1260" /> <variable name="button_fill_color" value="#303030" /> <variable name="button_fill_full_width" value="1060" /> <variable name="button_fill_main_width" value="505" /> <variable name="button_fill_main_height" value="324" /> <variable name="button_fill_half_height" value="162" /> <variable name="button_fill_quarter_height" value="81" /> <variable name="backup_list_height" value="780" /> <variable name="backup_button_row1" value="1118" /> <variable name="backup_button_row2" value="1220" /> <variable name="mount_list_height" value="1035" /> <variable name="mount_storage_row" value="1240" /> <variable name="storage_list_height" value="1000" /> <variable name="wipe_list_height" value="1305" /> <variable name="wipe_button_y" value="975" /> <variable name="slidervalue_w" value="1060" /> <variable name="slidervalue_line_clr" value="#FFFFFF" /> <variable name="slidervalue_slider_clr" value="#FF9C11" /> <variable name="slidervalue_lineh" value="3" /> <variable name="slidervalue_padding" value="30" /> <variable name="slidervalue_sliderw" value="15" /> <variable name="slidervalue_sliderh" value="90" /> </variables>
there are inside all predefined interfaces of pages : colors, X and Y values
If you resize a theme this a part you need to modify !
X is the margin and Y the verticaly position.
X = 0 is the left side
Y = 0 is the top
If you resize a theme you need to modify X and Y value in fonction of the size difference.
Exemple : 720p -> 1080p 1080 : 720 =1,5
if you have X = 100 and Y =500 you must change values in X = 150 and Y = 750.
You can change too html colors with codes colors wanted.
NB : variables are predefined but evey pages can have his values and need to be modified too
Code:
<templates> <template name="sort_options"> <object type="text" color="%text_color%"> <font resource="font" /> <placement x="%sort_text_x%" y="%sort_asc_text_y%" /> <text>Sort Ascending:</text> </object> <object type="button"> <placement x="%sort_col1_button_x%" y="%sort_asc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Name</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=1</action> </object> <object type="button"> <placement x="%sort_col2_button_x%" y="%sort_asc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Date</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=2</action> </object> <object type="button"> <placement x="%sort_col3_button_x%" y="%sort_asc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Size</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=3</action> </object> <object type="text" color="%text_color%"> <font resource="font" /> <placement x="%sort_text_x%" y="%sort_desc_text_y%" /> <text>Sort Descending:</text> </object> <object type="button"> <placement x="%sort_col1_button_x%" y="%sort_desc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Name</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=-1</action> </object> <object type="button"> <placement x="%sort_col2_button_x%" y="%sort_desc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Date</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=-2</action> </object> <object type="button"> <placement x="%sort_col3_button_x%" y="%sort_desc_button_y%" /> <font resource="font" color="%button_text_color%" /> <text>Size</text> <image resource="sort_button" highlightresource="sort_button_highlight" /> <action function="set">tw_gui_sort_order=-3</action> </object> </template> <template name="action_page_console"> <object type="console"> <placement x="0" y="%row2_y%" w="1080" h="700" /> <color foreground="%console_foreground%" background="%console_background%" scroll="%console_scroll%" /> <font resource="fixed" /> </object> </template> <template name="footer"> <object type="console"> <slideout resource="slideout" x="490" y="1830" /> <placement x="%console_x%" y="0" w="%console_width%" h="1900" /> <color foreground="%console_foreground%" background="%console_background%" scroll="%console_scroll%" /> <font resource="fixed" /> </object> </template> <template name="keyboardtemplate"> <object type="keyboard"> <placement x="0" y="1200" /> <layout resource1="keyboard1" resource2="keyboard2" resource3="keyboard3" resource4="keyboard4" /> <highlight color="%highlight_color%" /> <layout1> <keysize height="161" width="108" /> <row1 key01="q" long01="1" key02="w" long02="2" key03="e" long03="3" key04="r" long04="4" key05="t" long05="5" key06="y" long06="6" key07="u" long07="7" key08="i" long08="8" key09="o" long09="9" key10="p" long10="0" /> <row2 key01="162:a" long01="@" key02="s" long02="#" key03="d" long03="$" key04="f" long04="%" key05="g" long05="&" key06="h" long06="*" key07="j" long07="-" key08="k" long08="+" key09="162:l" long09="_" /> <row3 key01="162:layout2" key02="z" long02="!" key03="x" key04="c" long04="'" key05="v" long05=":" key06="b" long06=";" key07="n" long07="/" key08="m" long08="?" key09="162:c:8" /> <row4 key01="162:layout3" key02="108:c:47" key03="108:" key04="432: " key05="." key06="162:action" /> </layout1> <layout2> <keysize height="161" width="108" /> <row1 key01="Q" long01="1" key02="W" long02="2" key03="E" long03="3" key04="R" long04="4" key05="T" long05="5" key06="Y" long06="6" key07="U" long07="7" key08="I" long08="8" key09="O" long09="9" key10="P" long10="0" /> <row2 key01="162:A" long01="@" key02="S" long02="#" key03="D" long03="$" key04="F" long04="%" key05="G" long05="&" key06="H" long06="*" key07="J" long07="-" key08="K" long08="+" key09="162:L" long09="_" /> <row3 key01="162:layout1" key02="Z" long02="!" key03="X" key04="C" long04="'" key05="V" long05=":" key06="B" long06=";" key07="N" long07="/" key08="M" long08="?" key09="162:c:8" /> <row4 key01="162:layout3" key02="/" key03="108:" key04="432: " key05="." key06="162:action" /> </layout2> <layout3> <keysize height="161" width="108" /> <row1 key01="1" key02="2" key03="3" key04="4" key05="5" key06="6" key07="7" key08="8" key09="9" key10="0" /> <row2 key01="@" key02="#" key03="$" key04="%" key05="&" key06="*" key07="-" key08="+" key09="(" key10=")" /> <row3 key01="162:layout4" key02="!" key03="108:c:34" key04="'" key05=":" key06=";" key07="/" key08="?" key09="162:c:8" /> <row4 key01="162:layout1" key02="," key03="108:" key04="432: " key05="." key06="162:action" /> </layout3> <layout4> <keysize height="161" width="108" /> <row1 key01="~" key02="`" key03="|" key04="108:" key05="108:" key06="108:" key07="%" key08="108:" key09="{" key10="}" /> <row2 key01="108:" key02="108:" key03="108:" key04="108:" key05="108:" key06="^" key07="_" key08="=" key09="[" key10="]" /> <row3 key01="162:layout3" key02="108:" key03="108:" key04="108:" key05="108:" key06="\" key07="<" key08=">" key09="162:c:8" /> <row4 key01="162:layout1" key02="108:c:34" key03="108:" key04="432: " key05="." key06="162:action" /> </layout4> </object> </template> </templates>
well, inside any things who can appair on any pages.
you must change any X and Y values.
If wanted, colors codes too ...
placement x="%........_....._....x%"
% is the value defined in <variables></variables>
NB : for Keyboard values I recommand to copy/past from an ui.xml in size wanted !
And for finish you have
Code:
<page> ... </pages>
there are lot of pages and if you want resize a theme you must change any X and Y values in any pages.
when you finish to edit any pages as wanted, rezipe 2 resources folders + ui.xml in " stockage mod " ( without compression ) and let's GO !

I hope that will help you, don't hesitate to ask me on this thread.
* * * * * * *