[Android Themes] NorthLight:
How resize/edit a theme TWRP

​

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 :

<?xml version="1.0"?>

The version of xml ... Don't touch this.

<recovery>
<details>
<resolution width="1080" height="1920" />
<author>Primokorn</author>
<title>XDA Origins</title>
<description>TWRP Theme </description>
<preview>preview.jpg</preview>
</details>

Well ... I think it's enough explicit.

then, between > ... < put what you want.

<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>

<resources> ... </resources> : any resources files inside.

- 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

<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>

<variables> ... </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

<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>

<templates> ... </template>

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

<page> ... </pages>

any pages who can be open in the Recovery are here.

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 ! :victory:

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

* * * * * * *

​