如何创建一个新的TWRP主题

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 :

Code:
<?xml version="1.0"?>
The version of xml ... Don't touch this.

Code:
<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.

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

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

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

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

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


* * * * * * *
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值