How to support multiple resolutions and aspect ratios with a single XML file

First of all, to be able to have multiple resolutions supported by the same XML file some things needs to hold true: 1). once the skin is done (eg. with SkinDesigner) the XML needs to be edited with a text editor (eg. Notepad++ in Windows, TextWrangler on Mac) 2). once the XML is edited (even a little) in the text editor, you can NOT go back to SkinDesigner -- you will either loose the edited data or you'll completely corrupt the entire XML file 3). the original image (the one that was used to map the skin/XML) has a certain aspect ratio (eg. if it was 1366x768 or 1920x1080 it means the skin is in 16:9 aspect ratio, or written differently 1.777; 16/9 = 1.777; if the original image was 1680x1050 or 1440x900 then the skin is in 16:10 aspect ratio or 1.600); The idea is that it's extremely easy to add multiple images of the SAME aspect ratio as the original image -- you only need to specify them in the XML like so:

<aspectratios_supported>

   <aspectratio_supported name="16:10" aspectratio="1.600">
       <image name="skinimg_1024.png" resolutionx="1024" resolutiony="640" />
       <image name="skinimg_1280.png" resolutionx="1280" resolutiony="800" />
       <image name="skinimg_1440.png" resolutionx="1440" resolutiony="900" />
       <image name="skinimg_1680.png" resolutionx="1680" resolutiony="1050" />
   </aspectratio_supported>

</aspectratios_supported>

This is for a 16:10 aspect ratio. If you want to implement other aspect ratios (eg. 16:9 being the other popular one) you have 2 options: 1). you can either start with a 16:9 image and simply do a completely new skin -- and then add all resolutions with the same aspect ratio OR 2). you can add ALL aspect ratios to the same XML like so: <aspectratios_supported>

   <aspectratio_supported name="16:10" aspectratio="1.600">
       <image name="skinimg_1024.png" resolutionx="1024" resolutiony="640" />
       <image name="skinimg_1280.png" resolutionx="1280" resolutiony="800" />
       <image name="skinimg_1440.png" resolutionx="1440" resolutiony="900" />
       <image name="skinimg_1680.png" resolutionx="1680" resolutiony="1050" />
   </aspectratio_supported>
   <aspectratio_supported name="16:9" aspectratio="1.777">
       <image name="skinimg_1024.png" resolutionx="1024" resolutiony="576" />
       <image name="skinimg_1366.png" resolutionx="1366" resolutiony="768" />
       <image name="skinimg_1600.png" resolutionx="1600" resolutiony="900" />
       <image name="skinimg_1920.png" resolutionx="1920" resolutiony="1080" />
   </aspectratio_supported>

</aspectratios_supported>

However, this is a bit more difficult (or extremely difficult) depending on how your skin looks like. If you only have the browser/lists at the bottom of the screen it's fairly easy -- it almost "just works" -- you only need to specify the browser/list/sidelist twice (once for each aspect ratio) like so:

<browser action="browser" aspectratio="1.600" width="235" height="402" posx="2" posy="396" linesize="32" fontsize="14" iconx="23" icony="947" iconsize="31.7" fontcolor="#D7D7D7" cursorcolor="#DDDDDD" cursorcoloractive="#7F7FFF" /> <browser action="browser" aspectratio="1.777" width="235" height="322" posx="2" posy="396" linesize="32" fontsize="14" iconx="23" icony="947" iconsize="31.7" fontcolor="#D7D7D7" cursorcolor="#DDDDDD" cursorcoloractive="#7F7FFF" />

However, if your screen layout is very different it's much more difficult to support all aspect ratios in one single XML -- in which case is better to use option #1 instead.

It's a very good idea to take a look at the code of the existing skin in future.dj (Mac/Windows) and see how those skins implement the different aspect ratios.