[Android Themes] yuweng:
i've ported to 480x854 for 2.8.1.0 with the combinations of thewisenerd for graphics & Modding.MyMind for ui.xml . . . :cowboy:

Thank you so much [MENTION=2719389]z31s1g[/MENTION], these themes makes TWRP look so elegant . . . :good:

Updates

TWRP Materialised

Quick Porting Guide for newbies

thewisenerd

's

twrp-theme-porter

Updates

thewisenerd AKA Vineeth Raj is so kind & given me a very detail Walk-Through & with his consent, below is my simplified version . . . :cowboy: For this guide, i'll be using 768x1280 so its easier to follow.

But pls do not trash this thread with questions regarding this simply b'cos this thread is NOT about themes porting . . . You can either pm me but best is pm thewisenerd as he is the creator of this awesome tools to port TWRP Materialised . . . :good: i'm using BBQLinux & it requires quite a few of extra dependency packages for this to work so on your distro, you might need to do so too, so google it . . .

git clone [url]https://github.com/thewisenerd/twrp-theme-porter.git[/url] ~/thewisenerd
ls -a --ignore . --ignore .. | grep -v gitignore >> .gitignore

Resize images

- imgparse

Dependency :

sudo pacman -S perl-image-exiftool

Download & extract 768x1280 theme to ~/thewisenerd, edit ORIG_RES (themes with res nearest/ closes to your device) & PORT_RES (your device res) accordingly

Eg. ORIG_RES is already 768x1280 so no need editing & PORT_RES is originally 480x800 to 480x854, my device res

Start Mate Terminal at ~/thewisenerd (right mouse-click -> Open In Terminal), execute imgparse & it'll do it's job . . . :good:

./imgparse [COLOR="Red"]<- Execute it by typing [COLOR="blue"]dot forward-slash imgparse[/COLOR][/COLOR]

imgparse will automatically find, resize & save all images back to the images folder.

Port ui.xml

- xmlparse

Dependency:

sudo pacman -S xclip

Cut the content between <variables> to </variables> on ui.xml to ui_fix.xml ( excluding the <variables> or </variables> )

Eg. On 768x1280 ui.xml, cut Line 442 to 692 ( Ctrl + x ) to ui_fix.xml & save it.

Now, at Mate Terminal ->

cat ui_fix.xml | ./xmlparse | tee ui_fix_complete.xml

Open the newly generated ui_fix_complete.xml & copy the whole content back to ui.xml at Line 442.

Open ui_fix.xml, copy the last Line 252 back to ui.xml -> Line 671 & save it.

valfix

According to thewisenerd, all the variables that do *not* end with below are not auto-resize by xmlparse.

_x

_w

_width

_y

_h

_height

He has given below Eg. where variables that needs manual intervention to determine whether it is a width or a height.

fastscroll_rectw

fastscroll_recth

slidervalue_sliderw

slidervalue_sliderh

col1_x_neg (w)

col1_x_indent (w)

battery_x_m (w)

Updates

fastscroll_linew

slidervalue_lineh

slidervalue_padding (w)

textbox_spacing (w)

storage_heigt

Eg.

<variable name="fastscroll_rect[COLOR="Blue"]w[/COLOR]" value="[COLOR="blue"]16[/COLOR]" />
./valfix w 16
[COLOR="Blue"]10[/COLOR] [COLOR="Red"]<- Update to this new value[/COLOR]

So the new fixed resize value should be as below.

<variable name="fastscroll_rectw" value="[COLOR="red"]10[/COLOR]" />

Use valfix to fix the remaining variable listed above.

Also manually go thru ui_fix.xml at Line 1 to 14 & update it back to ui.xml at Line 422 to 454. Manual edit Line 5 to your device res too.

Keyboard

Reference here Line 1682 - 1717 needs fixing too.

<object type="image">
<placement x="0" [COLOR="blue"]y[/COLOR]="[COLOR="blue"]475[/COLOR]" />
<image resource="keyboard_shadow" />
</object>

<object type="keyboard">
<placement x="0" [COLOR="blue"]y[/COLOR]="[COLOR="blue"]482[/COLOR]" />
<layout resource1="keyboard1" resource2="keyboard2" resource3="keyboard3" resource4="keyboard4" />
<highlight color="%highlight_color%" />
<capshighlight color="%highlight_color%" />
<layout1>
<keysize [COLOR="Blue"]h[/COLOR]eight="[COLOR="blue"]77[/COLOR]" [COLOR="blue"]w[/COLOR]idth="[COLOR="blue"]48[/COLOR]" />

./valfix h 712
[COLOR="blue"]475[/COLOR]
./valfix h 722
[COLOR="blue"]482[/COLOR]
./valfix h 115
[COLOR="blue"]77[/COLOR]
./valfix w 77
[COLOR="blue"]48[/COLOR]

You will also need to update all Width value 77 to 48 & all Height value 115 to 77 at Line 1692 - 1717, these are the key size & shadow when you press it, you might need to play around with it, trial & error & you'll be able to figured it out . . . ;)

As for key03="384: " at Line 1696, 1703, 1710, 1717, you'll need to trial & error or you will not be able to press the ENTER key, this one is the spacebar spacing. On my 480x854, the value is 250. Cross-check it with your stock TWRP recovery.img -> res folder -> ui.xml, the value should be plus/ minus 20.

Console

Reference here Line 3766 needs fixing too.

./valfix w 900
[COLOR="blue"]563[/COLOR]

<placement x="%col1_x%" y="%row2_2_y%" w="%[COLOR="Blue"]console_width[/COLOR]%" h="[COLOR="blue"]563[/COLOR]" />

fontfixer

Dependency :

sudo pacman -S python-pillow
sudo pacman -S sane
sudo pacman -S tk
sudo pacman -S python-pyqt4
sudo pacman -S phonon [COLOR="Blue"][B]->[/B][/COLOR] phonon-qt4-gstreamer
sudo pacman -S qscintilla
sudo pacman -S qt-assistant-compat

Requires Python 3 to work. At BBQLinux -> System Tools -> BBQLinux Python Switcher -> Python 3

./fontfixer

According to thewisenerd, if TWRP reports E:Resource type (font) failed to load meaning your device doesn't support ttf fonts (At Advanced -> Copy Log to SD). You can also check it at Materialised Theme's console/ TWRP's console <- square button at the bottom. Else then you can try to change the size of ttf font, refer to the most bottom of this post ->

Updates

-> Fonts & font size.

Reference here Line 14 - 20, use valfix to fix font size at ui.xml. Dependent on correct value on ORIG_RES & PORT_RES.

According to thewisenerd, generally as a good programming practice/ themer porting themes, is to re-arrange/ tidy up your work so that it will be uniform, easier to trouble-shoot & also for others to follow . . . Below is the original 768x1280 format.

<resource name="status" type="font" filename="Roboto[COLOR="blue"][B]Regular[/B][/COLOR].ttf" size="[COLOR="Blue"]28[/COLOR]" fallback="Roboto-Medium-[COLOR="blue"]32[/COLOR]" /> [COLOR="red"]<- Change to [COLOR="blue"]28[/COLOR] for easy conversion[/COLOR]
<resource name="caption" type="font" filename="RobotoMedium.ttf" size="24" fallback="Roboto-[COLOR="blue"]Regular[/COLOR]-24" />
<resource name="body1" type="font" filename="RobotoRegular.ttf" size="28" fallback="Roboto-Regular-28" />
<resource name="body2" type="font" filename="RobotoMedium.ttf" size="28" fallback="Roboto-Medium-28" />
<resource name="subhead" type="font" filename="RobotoRegular.ttf" size="34" fallback="Roboto-Regular-34" />
<resource name="menu" type="font" filename="RobotoMedium.ttf" size="28" fallback="Roboto-Medium-28" />
<resource name="title" type="font" filename="Roboto[COLOR="Blue"]Regular[/COLOR].ttf" size="40" fallback="Roboto-Medium-40" />

./valfix h 28
[COLOR="blue"]19[/COLOR]
./valfix h 24
[COLOR="blue"]16[/COLOR]
./valfix h 34
[COLOR="blue"]23[/COLOR]
./valfix h 40
[COLOR="blue"]27[/COLOR]

Below is the format that he propose to use so that the ttf font is exactly the same as dat (fallback) font & font size.

<resource name="status" type="font" filename="Roboto-Medium.ttf" size="19" fallback="Roboto-[COLOR="Blue"][B]Medium[/B][/COLOR]-19" />
<resource name="caption" type="font" filename="Roboto-Regular.ttf" size="16" fallback="[COLOR="blue"]Roboto-Regular-16[/COLOR]" />
<resource name="body1" type="font" filename="Roboto-Regular.ttf" size="19" fallback="[COLOR="blue"]Roboto-Regular-19[/COLOR]" />
<resource name="body2" type="font" filename="Roboto-Medium.ttf" size="19" fallback="Roboto-[COLOR="blue"][B]Medium[/B][/COLOR]-19" />
<resource name="subhead" type="font" filename="Roboto-Regular.ttf" size="23" fallback="[COLOR="blue"]Roboto-Regular-23[/COLOR]" />
<resource name="menu" type="font" filename="Roboto-Medium.ttf" size="19" fallback="Roboto-[COLOR="Blue"][B]Medium[/B][/COLOR]-19" />
<resource name="title" type="font" filename="Roboto-Medium.ttf" size="27" fallback="Roboto-[COLOR="blue"][B]Medium[/B][/COLOR]-27" />

Reference to above, below is the conclusion.

Roboto-[COLOR="blue"][B]Medium[/B][/COLOR]-19
Roboto-[COLOR="blue"][B]Medium[/B][/COLOR]-27

Roboto-[COLOR="blue"]Regular[/COLOR]-16
Roboto-[COLOR="blue"]Regular[/COLOR]-19
Roboto-[COLOR="blue"]Regular[/COLOR]-23

Open fontfixer & edit as below.

[COLOR="blue"]MEDIUM[/COLOR]_SIZES=$( echo 19 27 )
[COLOR="blue"]REGULAR[/COLOR]_SIZES=$( echo 16 19 23)

Rename ttf font as below at font folder.

RobotoMedium.ttf -> [COLOR="blue"]Roboto[B]-[/B]Medium.ttf[/COLOR]
RobotoRegular.ttf -> [COLOR="blue"]Roboto[B]-[/B]Regular.ttf[/COLOR]

Execute fontfixer, delete all *.dat at font folder, cut all *.dat from out folder to font folder and remember to delete the empty out folder.

Auto Zip & push to your device

- build

Delete ui_fix_complete.xml & out folder, plugin your device to the PC & execute build

./build

build will automatically zip back all the files & folders ( ignoring the listing at .gitignore ) & will automatically adb push the newly created ui.zip to your device /sdcard/TWRP/theme folder . . . :good:

Updates

If you are porting dark or light themes then you will have to remove the *.zip at .gitignore or build will not update flashify -> flashify.zip

Modding.MyMind's

TWRPPORTER

Follow the web cache copy of the guide here on how to install it

Download & extract one theme to Eg. /sdcard/z31s1g

You can use Terminal Emulator or adb shell on PC & if it doesn't move forward then update your busybox

adb shell
su
cd /system/bin
TWRPPORTER

TWRP Theme Porter - version 3.1

GraphicsMagick is not installed!
It is required to port TWRP Images!

TWRP Theme Porter - version 3.1

Enter directory to the theme, ex. /sdcard/TWRP:

Enter Path: [COLOR="blue"]/sdcard/z31s1g[/COLOR] [COLOR="Red"]<- Eg. Make a new folder named [COLOR="Blue"]z31s1g[/COLOR] at your sdcard[/COLOR]

TWRP Theme Porter - version 3.1

Enter your resolution, ex. 480x800:

Base Resolution: [COLOR="Blue"]480x854[/COLOR] [COLOR="Red"]<- Change according to your Device Resolution[/COLOR]

TWRP Theme Porter - version 3.1

Enter their resolution, ex. 720x1280:

Port Resolution: [COLOR="blue"]768x1280[/COLOR] [COLOR="Red"]<- Change according to your downloaded [COLOR="Blue"]TWRP Materialised[/COLOR] theme resolution[/COLOR]

TWRP Theme Porter - version 3.1

Please select your option:
1. Port TWRP Images
2. Port TWRP ui.xml
3. Port Both
4. Install GraphicsMagick
Q/q - Exit Script

Option: [COLOR="Blue"]4[/COLOR]

TWRP Theme Porter - version 3.1

Installing GraphicsMagick!

TWRP Theme Porter - version 3.1

Please select your option:
1. Port TWRP Images
2. Port TWRP ui.xml
3. Port Both
4. Install GraphicsMagick
Q/q - Exit Script

Option: [COLOR="Blue"]3[/COLOR]

it will take awhile to convert the graphics first then the ui.xml . . .

Below i think is where most newbies will have problems but its so obvious except for padding, i think its a width . . . :cowboy:

The value below must be determined by the human mind!

<variable name="storage_[COLOR="blue"]h[/COLOR]eigt" value="244" />
Please type and enter, W for width or H for height:
[COLOR="blue"]h[/COLOR] [COLOR="Red"]<- upper-case or lower-case letter will work[/COLOR]

<variable name="fastscroll_rect[COLOR="blue"]w[/COLOR]" value="16" />
Please type and enter, W for width or H for height:
[COLOR="blue"]w[/COLOR]

<variable name="fastscroll_rect[COLOR="blue"]h[/COLOR]" value="80" />
Please type and enter, W for width or H for height:
[COLOR="blue"]h[/COLOR]

<variable name="textbox_spacing" value="6" />
Please type and enter, W for width or H for height:
[COLOR="blue"]w[/COLOR]

<variable name="slidervalue_line[COLOR="blue"]h[/COLOR]" value="4" />
Please type and enter, W for width or H for height:
[COLOR="blue"]h[/COLOR]

<variable name="slidervalue_[COLOR="Blue"]padding[/COLOR]" value="48" />
Please type and enter, W for width or H for height:
[COLOR="blue"]w[/COLOR]

<variable name="slidervalue_slider[COLOR="blue"]w[/COLOR]" value="80" />
Please type and enter, W for width or H for height:
[COLOR="blue"]w[/COLOR]

<variable name="slidervalue_slider[COLOR="blue"]h[/COLOR]" value="120" />
Please type and enter, W for width or H for height:
[COLOR="blue"]h[/COLOR]

Above will take

quite

awhile to finish so pls be patience . . .

When finish, delete CONVERTUI.xml & existing ui.xml, rename the newly generated UI_PORT.xml to ui.xml, zip back all the extracted files & folders, name it ui.zip & copy it to internal /sdcard/TWRP/theme

Test & make sure that the ported theme is fully working & as per OP request, share your ported themes here if the res is not available at OP . . . :cool:

Credits to thewisenerd, Modding.MyMind & of course z31s1g for making such awesome themes . . . :good:

Updates

Fonts & font size

A XDA member pm'ed me & told me that he doesn't like the font at Install menu & would like to know how to change it so here's the updates . . .

if you don't like the fonts then you can always manual edit ui.zip -> ui.xml -> Line 15 to 21 & change to the font/ font size to your liking . . . :cowboy:

<resource name="status" type="font" filename="RobotoRegular.ttf" size="28" fallback="Roboto-Medium-32" />
<resource name="caption" type="font" filename="RobotoMedium.ttf" size="24" fallback="Roboto-Regular-24" />
<resource name="[COLOR="Blue"]body1[/COLOR]" type="font" filename="RobotoRegular.ttf" size="[COLOR="blue"]28[/COLOR]" fallback="Roboto-Regular-28" />
<resource name="[COLOR="blue"]body2[/COLOR]" type="font" filename="RobotoMedium.ttf" size="[COLOR="blue"]28[/COLOR]" fallback="Roboto-Medium-28" />
<resource name="subhead" type="font" filename="RobotoRegular.ttf" size="34" fallback="Roboto-Regular-34" />
<resource name="menu" type="font" filename="RobotoMedium.ttf" size="28" fallback="Roboto-Medium-28" />
<resource name="title" type="font" filename="RobotoRegular.ttf" size="40" fallback="Roboto-Medium-40" />

Manual edit one at a time & if there is no changes after editing then your device is using the fallback then manual edit the fallback instead . . .

Updates

SHM AKA ModdingMyMind is so kind & given me the updated of his program, it is extremely fast, no more waiting.... :laugh: :good:

With his permission, attach here is the updated version... :good:

TWRP Theme Porter - Version 5.4.3

GraphicsMagick is not installed!
It is required to port TWRP Images!

TWRP Theme Porter - Version 5.4.3

Enter directory to the theme, ex. /sdcard/TWRP:

Enter Path:

TWRP Theme Porter - Version 5.4.3

Enter your resolution, ex. 480x800:

Base Resolution:

TWRP Theme Porter - version 5.4.3

Enter their resolution, ex. 720x1280:

Port Resolution:

TWRP Theme Porter - Version 5.4.3

Please select your option:
1. Port TWRP Images (GM)
2. Port TWRP XML
3. Port Images (GM) & XML
4. Resize TTF Fonts
5. Optimize PNG Image's (pngcrush)
6. Change Theme Directory
7. Change Base Resolution
8. Change Port Resolution
9. Install GraphicsMagick
10. Install pngcrush
Q/q - Exit Script

Option: [COLOR="blue"]9[/COLOR]

TWRP Theme Porter - Version 5.4.3

Installing GraphicsMagick!

GraphicsMagick has been installed!

TWRP Theme Porter - Version 5.4.3

Please select your option:
1. Port TWRP Images (GM)
2. Port TWRP XML
3. Port Images (GM) & XML
4. Resize TTF Fonts
5. Optimize PNG Image's (pngcrush)
6. Change Theme Directory
7. Change Base Resolution
8. Change Port Resolution
9. Install GraphicsMagick
10. Install pngcrush
Q/q - Exit Script

Option: [COLOR="blue"]3[/COLOR]

Quick Note

If you use adb shell on PC to execute TWRPPORTER then it will leave behind some reference files, with Terminal Emulator it doesn't...