Skinning Manual

Development

Skinning

Skinning Manual

Kodi includes a GUI library that allows you to skin/change everything you see in Kodi, from the images, the sizes and positions of all controls, colours, fonts, and text, through to altering navigation and even adding new functionality.

The skin system is quite complex, and this portion of the manual is dedicated to providing in depth information on how it all works, along with tips to make the experience a little more pleasant.

If you are just getting started with skinning Kodi, then it is suggested that the best way to learn is by modifying one of the many existing skins that are available. The default skin, Estuary, includes almost all the various tricks and features that make the Kodi Skinning Engine so powerful, so is an ideal place to start. You may wish to start by having a look at the "Skinning for Kodi introduction" article as well as the tutorial section on skinning Kodi, and try modifying a window or two by adding a button, or altering the textures or layout.

Anatomy of a Skin

Kodi skins, once installed, are located in userdata addons folder. This is the folder where all skins are placed and listed.

Any additional skins you create, or download from, or be installed via zip, Kodi will load and ask you if you would like to load the skin and also allow you to load them up from within the Appearance Settings. It is suggested that if you want to make your own skin, then starting by copying an existing skins files over into a new folder (let's say skin/myskin) is a good place to start. You can then edit each of the files as you become more familiar with the skinning system.

Each skin folder contains several subdirectorys, and one file:

myskin/720p

This is a resolution-specific directory. Kodi can run in multiple resolutions, and thus can use different files for some resolutions (as there is a big difference between NTSC at 720x480 pixels and 1080i at 1920x1080 pixels!)

myskin/backgrounds

optional folder containing the background images used in the skin

myskin/colors

contains a defaults.xml file which is used to define the colours used in the skin

myskin/font

This subdirectory contains all fonts used by the skin. you can add/replace fonts here

myskin/language

contains several subfolders for each language (English/strings.po). you can define strings used in your skin in this file.

myskin/media

This subdirectory contains all the media files (.png/.gif/.jpg...) You can replace/edit these as you like.

myskin/resources

place your icon.png (a 256x256 or 512x512 png image for your skin), fanart.jpg (a 1280x720 or 1920x1080 jpeg fanart image for your skin) and 10 jpeg screenshots (1280x720) of your skin in here. Name them screenshot01.jpg, screenshot02.jpg ect.

myskin/addon.xml

This contains the information that Kodi uses to find the other files that Kodi requires to describe it's skin. It also contains credits information, and versioning information.

myskin/LICENSE.txt

we recommend to include a Creative Commons license file in your skin: http://creativecommons.org/licenses/

See here for the order in which it looks for skin files.

Skin Themes

All the basic media files for a skin should be compressed into the Textures.xbt file, and placed in the media/ folder. You can use the tool Texturepacker for this. All the images that make up the default skin theme should be in the Textures.xbt file.

In addition to this, Kodi allows other .xbt files in the media/ folder, each one representing a different theme for your skin. For instance, you could tint all your main textures a red colour, and create a new theme package Red.xbt. This gives users more choice in the look of a particular skin, and only the textures change when you change themes – the layout stays the same. If the user has selected a theme, then when a control requires a texture, Kodi will first look in the <themename>.xbt file for the texture. It will fall back to the Textures.xbt file if <themename>.xbt doesn't contain the image. This means that the theme .xbt files need only contain the changed textures – all other textures will fallback to using Textures.xbt as usual.

A suggested method of creating a theme is as follows:

1. Run Texturepacker.exe on the folder containing the default texture files, to generate Textures.xbt as you would normally do.
2. Identify the textures you wish to have themed and copy them to a separate folder.
3. Create a separate folder for each theme outside of your normal skin work area, and place the altered copies of each of the textures in them.
4. Run Texturepacker.exe on each of the theme folders created in step 3 to create the themed .xbt files (note you can use the -output switch with Texturepacker.exe to name the theme appropriately).
5. Place Textures.xbt and each of the theme .xbt files in the media/ folder of your skin. Kodi will automatically pick them up.

addon.xml

Main page: addon.xml

Windows

About the Window XML Files

Each window in an Kodi skin is represented by a single .xml file. See here for a list of the standard windows and links to their .xml files.

The important thing to remember is that each window has a unique identifying name. This is how Kodi identifies the window from within the source code. The window names are all listed in the Appendix I: List of Windows.

Each .xml file has the same basic structure – it starts with some heading information that pertains to the window as a whole, and then contains a <controls> block within which all the controls that describe the window are defined. Many of the controls within each window should have a unique id's, unless they're just used as images or labels where navigation is unimportant and Kodi does not need to be able to identify them uniquely.

Window Header

<?xml version="1.0" encoding="UTF-8"?>
<window>
  <onload>RunScript(script.foobar)</onload>
  <onunload>SetProperty(foo,bar)</onunload>
  <defaultcontrol always="false">2</defaultcontrol>
  <menucontrol>9000</menucontrol>
  <backgroundcolor>0xff00ff00</backgroundcolor>
  <views>50,51,509,510</views>
  <visible>Window.IsActive(Home)</visible>
  <animation effect="fade" time="100">WindowOpen</animation>
  <animation effect="slide" end="0,576" time="100">WindowClose</animation>
  <zorder>1</zorder>
  <coordinates>
    <left>40</left>
    <top>50</top>
    <origin x="100" y="50">Window.IsActive(Home)</origin>
  </coordinates>
  <previouswindow>MyVideos</previouswindow>
  <controls>
    <control>
    </control>
    ....
  </controls>
</window>

One thing to note is that all tag names are lower case. XML tag names are case sensitive!

The header contains the following tags:

onload

Optional: the build-in function to execute when the window opens

onunload

Optional: the build-in function to execute when the window closes

defaultcontrol

This specifies the default control of the window. This is the id of the control that will receive focus when the window is first opened. Note that most Kodi windows save the current focus when you leave the window, and will return to the last focused item when you return to a window. This behaviour can be stopped by specifying the attribute always="true".

menucontrol

This specifies the control that will be focused when the users presses the 'menu' / 'm' button.

backgroundcolor

Specifies whether the window needs clearing prior to rendering, and if so which colour to use. Defaults to clearing to black. Set to 0 (or 0x00000000) to have no clearing at all. If your skin always renders opaque textures over the entire screen (eg using a backdrop image or multiple backdrop images) then setting the background color to 0 is the most optimal value and may improve performance significantly on slow GPUs.

visible

Specifies the conditions under which a dialog will be visible. Kodi evaluates this at render time, and shows or hides a dialog depending on the evaluation of this tag. See here for more details. Applies only to type="dialog" windows.. By default if a dialog visibility depends on visible condition it will be set as Modeless. A modeless dialog won't be able to catch input as any keystroke/action will be sent to the underlying window. Since v20 you can override this behaviour by setting modality="modal" on the root element of the window/dialog XML definition.

animation

Specifies the animation effect to perform when opening or closing the window. See here for more details.

zorder

This specifies the “depth” that the window should be drawn at. Windows with higher zorder are drawn on top of windows with lower z-order. All dialogs by default have zorder 1, so if you have a particular dialog that you want underneath all others, give it a zorder of 0. (Note that the normal render order is: The base window, then the overlays (music + video), then dialogs. <zorder> only effects the rendering of the dialogs.

coordinates

This block is used to specify how Kodi should compute the coordinates of all controls.

left

Sets the horizontal “origin” position of the window. Defaults to 0 if not present.

top

Sets the vertical “origin” position of the window. Defaults to 0 if not present.

origin

Sets a conditional origin for the window. The window will display at (x,y) whenever the origin condition is met. You can have as many origin tags as you like – they are evaluated in the order present in the file, and the first one for which the condition is met wins. If none of the origin conditions are met, we fall back to the <left> and <top> tags.

previouswindow

This can be used to specify a window to force Kodi to go to on press of the Back button. Normally Kodi keeps a “window stack” of previous windows to handle this. This tag allows you to override this behaviour. The value is the name of the window.

views

This tag lets you use view id's beyond 50 to 59 it also lets you set the order in which they cycle with the change view button in the skin. Only useful in My<Foo>.xml windows.

controls

This is the block the defines all controls that will appear on this window.

The Different Types of Controls

Kodi supports many different types of controls.

Click here for the control types and what they all do.

Some of these controls are required on specific windows, as they're necessary for that window to perform it's duty, or, the contents of the control are only valid on a particular window. The mandatory controls for each window are listed here. While the controls are mandatory, you can ofcourse move them about and change their appearance within the windows to your hearts content!

Adding Extra Windows

All of the windows in the window list are defined within the executable of Kodi itself, as most of them have a specific purpose. However, the skinner may add extra windows as and when they are needed or wanted. The only restriction to this is that only controls that do not require specific source code to operate can be used. This is not too much of a restriction though, as many skinners have found out.

To add an extra window, all you need to do is design up the window's .xml file in the usual way, assign it an <id> within the 1100–1199 range (see window list), and then name the file customN.xml, where N is a number or name. You can have as many as you like, as long as they have unique <id>'s, and are named differently. Then just define the type of window you want, the coordinate system and so on, add the controls and setup the navigation. To activate your window, you can do it by adding a button control elsewhere in the skin, or you can get it to popup on a press of the controller or remote via keymap.xml and so on. Basically you just need to run ActivateWindow(id) from a suitable place.

Includes

The other special (and arguably the most important skinning file of all) is includes.xml. This is, as its title suggests, a place from which you can define the default look, size, and positioning of controls, to save you replicating many of the control's attributes throughout the window .xml files. For instance, you can setup the size, and textures used for a button control, thus allowing you to leave those details out in the rest of the skin files, unless of course you want to override the default look or size etc. in a particular window.

This is extremely valuable as it allows you to greatly simplify a lot of the work in building a skin. For one thing, it means that once you have include files setup, many of the default parameters for a different resolution can be done by just altering the parameters within the include file(s) for the different resolution.

You can infact have more than one include file - you can specify the file attribute when including from a different file, allowing you to have an include file dedicated to a particular set of attributes.

The layout of an includes file is as follows.

  <?xml version="1.0" encoding="UTF-8"?>
  <includes>
    <include name="whitetext">
      <textcolor>ffffffff</textcolor>
    </include>
    <include file="listdefaults.xml" />
    <include condition="Skin.HasSetting(extras) file="includes_extras.xml" />
    <default type="button">
      <include>whitetext</include>
    </default>
    <constant name="leftedge">50</constant>
  </includes>

You'll notice in the above example that we have 4 different types of includes. The first <include> tag basically allows a substitution of the tags underneath it whenever it occurs. For instance, if in a window .xml file you have this:

  <control type="togglebutton">
    <include>whitetext</include>
    ... other tags go here
  </control>

Then it would substitute the <textcolor> tag for where the include tag is. You can have as many includes as you like, and as many tags can be inside an include - even complete controls, or complete control groups.

The second <include> tag in the example demonstrates how to include from a different file. As there is no include name specified, it will include the contents of the entire file at that point.

The <default> tag is similar to an include, except that it is used in every control of that type - even if you don't specify that the control is to use includes. Thus every buttoncontrol will have the whitetext include in it. Note that you can override this by specifying the <textcolor> tag in the buttoncontrol.

And finally, the <constant> tag allows you to define a numeric (floating point) constant by name for use in place of numeric values (<left>, height="" etc.) would otherwise be used. This allows alignment of items using the same position values which can then easily be altered in one place.

Use params in includes

As of Kodi 15.0 Isengard you get is the ability to pass arbitrary parameters to your includes and then use these values anywhere within the include body. Just so you don't have to copy/paste huge chunks of XML anymore in order to change just a value or two. Includes are now roughly equivalent to "procedures" in programming languages. Here's the final syntax that has been included in Kodi.

Include definitions are still written within <includes> tag, usually in includes.xml. But they can now accept parameters:

<include name="MyControl">
    <param name="id"/>
    <param name="left" default="120"/>
    <param name="top">225</param>
    <definition>
        <control type="image" id="$PARAM[id]">
            <left>$PARAM[left]</left>
            <top>$PARAM[top]</top>
            <width>370</width>
            <height>40</height>
            <texture>foo.png</texture>
        </control>
    <definition>
</include>

Here, the first part is called parameter list and is specified using <param> tags. When it is present, include body that follows it should be enclosed within <definition> tag. At the moment, parameter list is optional and is mainly used for specifying default values for parameters (such as 120 and 225 above), but is otherwise not mandatory.

The above include can be called like this:

<include content="MyControl">
    <param name="id" value="52"/>
    <param name="left">300</param>
</include>

This has the exact same effect as if you've written this instead:

<include content="MyControl">
    <control type="image" id="52">
        <left>300</left>
        <top>225</top>
        <width>370</width>
        <height>40</height>
        <texture>foo.png</texture>
    </control>
</include>

and called it (old-style) like this:

<include>MyControl</include>

only without added benefits.

Any appropriate value can be passed as parameter in the new include call, including $INFO labels, $LOCALIZE, $VARs, constants, etc. Empty string (value="") can also be passed, for example to override a non-empty default value set in the include definition.

Default values are used as replacement when their parameters are not passed in the include call.

$PARAM references can be specified within both tag values and attributes inside include body, and are expanded to either actual value passed (if it was passed), default value (if set) or empty string, in that order.

Parameters without default values (such as id above) are specified for better readability and documentation purposes only, but are otherwise not necessary and can be omitted. This is really a matter of style, and some skinners might prefer writing explicit parameter lists to specify all parameters referenced in the include body. It's a good practice though, as explicit parameter lists might be better utilized in the future versions of Kodi.

If there are no <param> tags at all, <definition> can be omitted too. This leads to even shorter syntax:

<include name="MyControl">
    <control type="image" id="$PARAM[id]">
        <left>$PARAM[left]</left>
        <top>$PARAM[top]</top>
        <width>370</width>
        <height>40</height>
        <texture>foo.png</texture>
    </control>
</include>

Includes can call other (nested) includes and even pass them exact parameter values that they've got themselves. This is called parameter forwarding.

<include name="MyControl">
    ...
    <include name="MyOtherControl">
        <param name="label">$INFO[Player.Title]</param>
        <param name="label2" value="x:$PARAM[left]; y:$PARAM[top]"/>
        <param name="color" value="$PARAM[color]"/>     <!-- forwarding -->
        <param name="id" value="$PARAM[scrollbarid]"/>  <!-- forwarding -->
    </include>
    ...
</include>

Here, $PARAM[color] and $PARAM[scrollbarid] will be forwarded to MyOtherControl only if parameters color and scrollbarid have actually been passed to MyControl, otherwise the default values for color and id (if set in MyOtherControl) will be used instead in the body of MyOtherControl. Composite values containing other characters (such as label2) are not considered as "true" forwarding and always override any default value set in the nested include, even when they expand to empty strings.

Nested

The nested element can be used as a placeholder for elements (controls) defined between the start-tag and end-tag of an include element. The nested part can contain anything what is valid in our skin language. Using parameters for the nested XML fragment is also supported.

This is really handy if you want to re-use elements (controls) before and after some variable elements (controls) e.g. a box with a header and footer but variable content.

Definition of an include using nested

<include name="MyBox">
  <control type="">
    ...
  </control>
  <control type="group">
    <top>$PARAM[top]</top>
    <left>$PARAM[left]</left>
    ...
    <nested /> <!-- used to indicate where to place nested elements of the include -->
    ...
  </control>
</include>

Use the include with nested elements

<include content="MyBox">
  <param name="top" value="100" />
  <param name="left" value="200" />

  <!-- nested elements -->
  <control type="label">
    ...
  </control> 
  <control type="group">
    <control type="label">
      ...
    </control> 
  </control> 
</include>

Variables

Variables make it easier to use conditional infolabels. You can define them in includes.xml, or to keep them separate, you can place them in another file which is included in includes.xml. You can include a file in includes.xml by adding a line like this:

<include file="Variables.xml" />

Variables can be used in any tag that supports infolabels, like the texture, label and visible tags. Instead of having to include two whole controls with a condition, they allow you to just apply the condition to the actual texture or label. Meaning less controls to maintain ect. The values in the variable are read from top to bottom and the first condition that is met gets used. The last value usually has no condition and it's content acts as a fallback. The following example shows the album label if the player has audio, the year if there is no audio and no fallback is used (because there either is or is not any audio).

<variable name="Example">
	<value  condition="Player.HasAudio">$INFO[ListItem.Album]</value>
	<value  condition="!Player.HasAudio">$INFO[ListItem.Year]</value>
	<value></value>
</variable>

You can use a variable in a label control like this:

<label>$VAR[Example]</label>

or when the viariable value is likely to contain commas (,) and/or quotes ("):

<label>$ESCVAR[Example]</label>

(see $ESCINFO[] for more info on the need to escape strings: http://kodi.wiki/view/Label_Parsing)

Constants

In case you want to re-use a certain value multiple times in your skin, you can define a constant for it:

<constant name="FanartCrossfadeTime">300</constant>
<constant name="IconCrossfadeTime">300</constant>

you can now reference this value by it's name elsewhere in your skin:

<control type="image">
	<left>0</left>
	<top>0</top>
	<width>256</width>
	<height>256</height>
	<texture background="true">$INFO[ListItem.Icon]</texture>
	<fadetime>IconCrossfadeTime</fadetime>
</control>

Defaults

for every control type, you can define a default template. for instance here's a template for a button control:

<default type="button">
	<left>0</left>
	<top>0</top>
	<width>700</width>
	<height>40</height>
	<label></label>
	<texturefocus border="20">list-focus.png</texturefocus>
	<texturenofocus border="20">list-nofocus.png</texturenofocus>
	<font>font20</font>
	<textcolor>white</textcolor>
	<focusedcolor>blue</focusedcolor>
	<disabledcolor>darkgrey</disabledcolor>
	<invalidcolor>red</invalidcolor>
	<textoffsetx>10</textoffsetx>
	<aligny>center</aligny>
	<pulseonselect>true</pulseonselect>
</default>

the benefit of defining defaults is that kodi will use the template everywhere in you skin where a button is used, so you don't have to code all of the tags for each and every button. you only have to code the tags that you want to differ from the default template.

Expressions

expressions are useful if you need to use a certain boolean expression several times throughout your skin. they can be defined in your includes file like this:

<expression name="HasInfoDialog">Window.IsActive(musicinformation) | Window.IsActive(movieinformation) | Window.IsActive(addoninformation)</expression>
<expression name="PluginAdvancedLauncher">substring(Container.FolderPath,plugin://plugin.program.advanced.launcher/,left)</expression>

to use an expression in your skin, you can reference them using $EXP[]

<animation condition="$EXP[HasInfoDialog]" effect="fade" start="100" end="0" time="200" tween="sine">Conditional</animation>

<visible>$EXP[PluginAdvancedLauncher] + !Window.IsActive(Home)</visible>

expressions can be used in the following tags/attributes:

• visible
• enable
• usealttexture
• selected
• condition

Controls

Controls are the substance of your skin. They define everything from buttons, to text labels, to visualization placement. This portion of the manual will explain each and every control in detail.

Label Control

Label Control

Fade Label Control

Fade Label Control

Button Control

The button control is used for creating push buttons in Kodi. You can choose the position, size, and look of the button, as well as choosing what action(s) should be performed when pushed.

Example

<control type="button" id="1">
      <description>My first button control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus colordiffuse="FFFFAAFF">myfocustexture.png</texturefocus>
      <texturenofocus colordiffuse="FFFFAAFF">mynormaltexture.png</texturenofocus>
      <label>29</label>
      <wrapmultiline>true</wrapmultiline>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <focusedcolor>FFFFFFFF</focusedcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <invalidcolor>FFFFFFFF</invalidcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <onclick>ActivateWindow(MyVideos)</onclick>
      <onfocus></onfocus>
      <onunfocus></onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available tags

In addition to the Default_control_tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
texturefocus	Specifies the image file which should be displayed when the button has focus. See here for additional information about textures.
texturenofocus	Specifies the image file which should be displayed when the button does not have focus.
label	The label used on the button. It can be a link into strings.po, or an actual text label.
font	Font used for the button label. From fonts.xml.
textcolor	Color used for displaying the button label. In AARRGGBB hex format, or a name from the colour theme.
focusedcolor	Color used for the button label when the button has in focus. In AARRGGBB hex format or a name from the colour theme.
disabledcolor	Color used for the button label if the button is disabled. In AARRGGBB hex format or a name from the colour theme.
invalidcolor	Color used for the button if the user entered some invalid value. In AARRGGBB hex format or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text, in AARRGGBB format, or a name from the colour theme.
angle	The angle the text should be rendered at, in degrees. A value of 0 is horizontal.
align	Label horizontal alignment on the button. Defaults to left, can also be center or right.
aligny	Label vertical alignment on the button. Defaults to top, can also be center.
textoffsetx	Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
textoffsety	Amount to offset the label from the top edge of the button when using top alignment.
textwidth	Will truncate any text that's too long.
onclick	Specifies the action to perform when the button is pressed. Should be a built in function. See here for more information. You may have more than one <onclick> tag, and they'll be executed in sequence.
onfocus	Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. See here for more information.
onunfocus	Specifies the action to perform when the button loses focus. Should be a built in function.
wrapmultiline	Will wrap the label across multiple lines if the label exceeds the control width.

Image Control

The image control is used for displaying images in Kodi. You can choose the position, size, transparency and contents of the image to be displayed.

Example

<control type="image" id="1">
      <description>My first image control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <fadetime>200</fadetime>
      <texture border="5" flipy="true" flipx="false">mytexture.png</texture>
      <bordertexture border="5" infill="false">mybordertexture.png</bordertexture>
      <bordersize>5</bordersize>
      <aspectratio>keep</aspectratio>
</control>

Image Size and Type Restrictions

For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:

Size

Images can be any size, though some graphics cards allow only power of 2 textures, so this may be a consideration. For the most case, it doesn't really matter what size things are - Kodi will quite happily load most files.

Formats

If you wish to use transparency, then use PNG. It is suggested that you use PNG and JPG as much as possible. Note that once the images are injected into Textures.xbt, they are not stored as JPG or PNG – rather they are stored in a native format used for GPUs for faster loading, such as ARGB or DXTc textures. The size of the images (in kb) is therefore not as important as the size of the images in pixels – so feel free to store them in a lossless (eg PNG) manner if you wish.

The only exception to this is if you require an animated texture. In this case, we support only animated GIF. There are also some animated gifs that may not work. Use ImageReady CS and make sure you set the gif-anim to “restore to background” and they should work fine.

Available tags and attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
aspectratio	This specifies how the image will be drawn inside the box defined by <width> and <height>. See here for more information.
texture	Specifies the image file which should be displayed. See here for additional information about textures.
bordertexture	Specifies the image file which should be displayed as a border around the image. Use the <bordersize> to specify the size of the border. The <width>,<height> box specifies the size of the image plus border. Set the argument infill="false" to hint to the GUI that the inner portion of the border doesn't have to be rendered.
bordersize	Specifies the size of the border. A single number specifies the border should be the same size all the way around the image, whereas a comma separated list of 4 values indicates left,top,right,bottom values.
info	Specifies the information that this image control is presenting. Kodi will select the texture to use based on this tag. See here for more information.
fadetime	This specifies a crossfade time that will be used whenever the underlying <texture> filename changes. The previous image will be held until the new image is ready, and then they will be crossfaded. This is particularly useful for a large thumbnail image showing the focused item in a list, or for fanart or other large backdrops.
background	For images inside a container, you can specify background="true" to load the textures in a background worker thread.

Texture Loading

Normal texture loading

The only textures loaded by Kodi are the ones currently visible. Nothing displays on the screen until all the images have been loaded in memory, this can result in "jerky" scrolling through panel containers. As you scroll down, Kodi will delay the scrolling animation until all of the images in the next row are loaded.

Background loading

Images are loaded one at a time in a background worker thread and are shown as soon as xbmc processes them. Has the benefit that images can be loaded into memory before they're visible, resulting in smoother scrolling and transitions.

Preloading

Used to automatically load the next items (or rows/columns in the case of a panel) while scrolling. Currently limited to 2.

MultiImage Control

The MultiImage control is used for displaying a slideshow of images from a folder in Kodi. You can choose the position and size of the slideshow, as well as timing information.

Example

<control type="multiimage" id="1">
      <description>My first slideshow control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <imagepath>myimagepath</imagepath>
      <timeperimage>5000</timeperimage>
      <fadetime>2000</fadetime>
      <pauseatend>10000</pauseatend>
      <randomize>true</randomize>
      <loop>no</loop>
      <aspectratio>stretch</aspectratio>
</control>

Image Size and Type Restrictions

For the <texture> tags, and for all <texture> tags in other controls, there is a small set of rules that you should follow if at all possible:

Formats

If you wish to use full 8 bit transparency, then use PNG. If you only need a single transparent colour, then you can specify this in the <colorkey> tag, so any image will be fine. It is suggested that you use PNG and JPG as much as possible. The size of the images (in kb) is therefore not as important as the size of the images in pixels – so feel free to store them in a lossless (eg PNG) manner if you wish.

The only exception to this is if you require an animated texture. In this case, we only support animated GIF. There are also SOME animated gifs that may not work. Use ImageReady CS and make sure you set the gif-anim to “restore to background” and they should work fine.

Available tags and attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
imagepath	Specifies the path containing the images to use for the slideshow. Kodi will first look inside the compressed Textures.xbt file for images, and then will look in the actual folder. The path is relative to the media/ folder if it is not specified completely.
timeperimage	Time in milliseconds that an image is shown for.
fadetime	Time in milliseconds to fade between images.
pauseatend	Time in milliseconds to pause (in addition to <timeperimage>) on the last image at the end of a complete cycle through the images. Only useful if <loop> is set to yes.
loop	If set to no, the last image will display indefinitely. Setting it to yes will loop around once they reach the last image. Defaults to yes.
aspectratio	This specifies how the image will be drawn inside the box defined by <width> and <height>. See here for more info

Radio button Control

The radio button control is used for creating push button on/off settings in Kodi. You can choose the position, size, and look of the button. When the user clicks on the radio button, the state will change, toggling the extra textures (textureradioon and textureradiooff). Used for settings controls.

Example

<control type="radiobutton" id="2">
      <description>My first radiobutton control</description>
      <type>radiobutton</type>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <textureradioonfocus colordiffuse="FFFFAAFF">myradiobutton.png</textureradioonfocus>
      <textureradioonnofocus colordiffuse="FFFFAAFF">myradiobutton.png</textureradioonnofocus>
      <textureradioofffocus colordiffuse="FFFFAAFF">myradiobutton_nf.png</textureradioofffocus>
      <textureradiooffnofocus colordiffuse="FFFFAAFF">myradiobutton_nf.png</textureradiooffnofocus>
      <selected>Player.Paused</selected>
      <onclick>PlayerControls(Pause)</onclick>
      <label>29</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <focusedcolor>FFFFFFFF</focusedcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align>left</align>
      <aligny>center</aligny>
      <textoffsetx>4</textoffsetx>
      <textoffsety>5</textoffsety>
      <pulseonselect>false</pulseonselect>
      <onfocus></onfocus>
      <onunfocus></onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available tags

In addition to the Default_control_tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
texturefocus	Specifies the image file which should be displayed when the button has focus. See here for additional information about textures.
texturenofocus	Specifies the image file which should be displayed when the button does not have focus.
textureradioonfocus	Specifies the image file which should be displayed for the radio button portion when it's the button is on and focused. This texture is positioned on the right of the button – it's positioned 24 pixels from the right edge of the button, and 8 pixels above the center vertically.
textureradioonnofocus	Specifies the image file which should be displayed for the radio button portion when it's the button is on and unfocused. This texture is positioned on the right of the button – it's positioned 24 pixels from the right edge of the button, and 8 pixels above the center vertically.
textureradioon	A shortcut to set both of the above textures to the same image file.
textureradioondisabled	Specifies the image file which should be displayed for the radio button portion when the button is on and disabled.
textureradioofffocus	Specifies the image file which should be displayed for the radio button portion when the button is off and focused.
textureradiooffnofocus	Specifies the image file which should be displayed for the radio button portion when the button is off and unfocused.
textureradiooff	A shortcut to set both of the above textures to the same image file.
textureradioondisabled	Specifies the image file which should be displayed for the radio button portion when the button is off and disabled.
label	The label used on the button. It can be a link into strings.po, or an actual text label.
label2	Optional. Will display an 'on' or 'off' label. Only available if you specify an empty radiowidth and radioheight.
font	Font used for the button label. From fonts.xml.
textcolor	Color used for displaying the button label. In AARRGGBB hex format, or a name from the colour theme.
focusedcolor	Color used for the button label when the button has in focus. In AARRGGBB hex format or a name from the colour theme.
disabledcolor	Color used for the button label if the button is disabled. In AARRGGBB hex format, or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text, in AARRGGBB format, or a name from the colour theme.
align	Label horizontal alignment on the button. Defaults to left, can also be center or right.
aligny	Label vertical alignment on the button. Defaults to top, can also be center.
textoffsetx	Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
textoffsety	Amount to offset the label from the top edge of the button when using top alignment.
textwidth	Will truncate any text that's too long.
selected	The boolean condition that when met will cause the control to become selected. see here for more information.
onclick	The function to perform when the radio button is clicked. Should be a built in function.
radioposx	X offset of the dot or radio button itself
radioposy	Y offset of the dot or radio button itself
radiowidth	Width in Pixels of the dot or radio button itself
radioheight	Height in Pixels of the dot or radio button itself
onfocus	Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. See here for more information.
onunfocus	Specifies the action to perform when the button loses focus. Should be a built in function.

Toggle button control

The toggle button control is used for creating buttons that have 2 states. You can choose the position, size, and look of the button. When the user clicks on the toggle button, the state will change, toggling the extra textures (alttexturefocus and alttexturenofocus). Used for controls where two states are needed (pushed in and pushed out for instance).

Example

<control type="togglebutton" id="25">
      <description>My first togglebutton control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynormaltexture.png</texturenofocus>
      <alttexturefocus>myselectedTexture.png</alttexturefocus>
      <alttexturenofocus>myselectedTexture_nf.png</alttexturenofocus>
      <usealttexture>!Player.IsPaused</usealttexture>
      <label>29</label>
      <altlabel>29</altlabel>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align>left</align>
      <aligny>center</aligny>
      <textoffsetx>4</textoffsetx>
      <textoffsety>5</textoffsety>
      <pulseonselect>false</pulseonselect>
      <onclick>Player.Pause</onclick>
      <onfocus></onfocus>
      <onunfocus></onunfocus>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <wrapmultiline>false</wrapmultiline>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
texturefocus	Specifies the image file which should be displayed when the button has focus. See here for additional information about texture tags.
texturenofocus	Specifies the image file which should be displayed when the button does not have focus.
alttexturefocus	Specifies the image file which should be displayed when the toggle button is in it's selected state. This texture replaces the <texturefocus> texture when the toggle button is selected.
alttexturenofocus	Specifies the image file which should be displayed when the button is in it's selected state but unfocused.
usealttexture	Specifies the conditions under which the Alternative Textures should be shown. Some toggle button controls are handled by Kodi internally, but any extra ones that the skinner has can be controlled using this tag. See here for more information.
label	The label used on the button. It can be a link into strings.po, or an actual text label.
altlabel	The alternate label used on the button. It can be a link into strings.po, or an actual text label.
altclick	The alternate action to perform when the button is pressed. Should be a built in function. See here for more information. You may have more than one <altclick> tag, and they'll be executed in sequence.
font	Font used for the button label. From fonts.xml.
textcolor	Color used for displaying the button label. In AARRGGBB hex format, or a name from the colour theme.
disabledcolor	Color used for the button label if the button is disabled. In AARRGGBB hex format, or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text. In AARRGGBB hex format, or a name from the colour theme.
align	Label horizontal alignment on the button. Defaults to left, can also be center or right.
aligny	Label vertical alignment on the button. Defaults to top, can also be center.
textoffsetx	Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
textoffsety	Amount to offset the label from the top edge of the button when using top alignment.
textwidth	Will truncate any text that's too long.
onclick	Specifies the action to perform when the button is pressed. Should be a built in function. See here for more information. You may have more than one <onclick> tag, and they'll be executed in sequence.
onfocus	Specifies the action to perform when the button is focused. Should be a built in function. The action is performed after any focus animations have completed. See here for more information.
onunfocus	Specifies the action to perform when the button loses focus. Should be a built in function.
wrapmultiline	Allows wrapping on the label across multiple lines. Defaults to false.

Spin Control

The spin control is used for when a list of options can be chosen (such as a page up/down control). You can choose the position, size, and look of the spin control.

Example

<control type="spincontrol" id="14">
      <description>My first spin control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <textureup colordiffuse="FFFFAAFF">myuptexture.png</textureup>
      <textureupfocus colordiffuse="FFFFAAFF">myupfocustexture.png</textureupfocus>
      <texturedown colordiffuse="FFFFAAFF">mydowntexture.png</texturedown>
      <texturedownfocus colordiffuse="FFFFAAFF">mydownfocustexture.png</texturedownfocus>
      <textureupdisabled colordiffuse="AAFFAAFF">mydowntexture.png</textureupdisabled>
      <texturedowndisabled colordiffuse="AAFFAAFF">mydownfocustexture.png</texturedowndisabled>
      <subtype>page</subtype>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
textureup	Specifies the image file which should be displayed for the up arrow when it doesn't have focus. See here for additional information about textures.
textureupfocus	Specifies the image file which should be displayed for the up button when it has focus.
textureupdisabled	Specifies the image file which should be displayed for the up arrow when the button is disabled.
texturedown	Specifies the image file which should be displayed for the down button when it is not focused.
texturedownfocus	Specifies the image file which should be displayed for the down button when it has focus.
texturedowndisabled	Specifies the image file which should be displayed for the up arrow when the button is disabled.
font	Font used for the button label. From fonts.xml.
spincolor	The colour of the text used for this spin control. In AARRGGBB hex format. As of Helix, this doesn't actually get processed, use textcolor
textcolor	Color used for displaying the label. In AARRGGBB hex format, or a name from the colour theme..
disabledcolor	Color used for the label if the control is disabled. In AARRGGBB hex format, or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text. In AARRGGBB format, or a name from the colour theme.
subtype	Defines what type of information the spinner holds. Can be int, float, text or page. Defaults to text. Make sure you use page for a page control.
align	Label horizontal alignment on the control. Defaults to right, can also be left.
aligny	Label vertical alignment on the control. Defaults to top, can also be center.
textoffsetx	Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
textoffsety	Amount to offset the label from the top edge of the button when using top alignment.
textwidth	Will truncate any text that's too long.

Settings Spin Control

The settings spin control is used in the settings screens for when a list of options can be chosen from using up/down arrows. You can choose the position, size, and look of the spin control. It is basically a cross between the button control and a spin control. It has a label and focus and non focus textures, as well as a spin control on the right.

Example

<control type="spincontrolex" id="12">
      <description>My first settings spin control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <spinposx>220</spinposx>
      <spinposy>180</spinposy>
      <spinwidth>16</spinwidth>
      <spinheight>16</spinheight>
      <visible>true</visible>
      <colordiffuse>FFFFFFFF</colordiffuse>
      <texturefocus>myfocustexture.png</texturefocus>
      <texturenofocus>mynofocustexture.png</texturenofocus>
      <textureup>myuptexture.png</textureup>
      <textureupfocus>myupfocustexture.png</textureupfocus>
      <texturedown>mydowntexture.png</texturedown>
      <texturedownfocus>mydownfocustexture.png</texturedownfocus>
      <textureupdisabled colordiffuse="AAFFAAFF">mydowntexture.png</textureupdisabled>
      <texturedowndisabled colordiffuse="AAFFAAFF">mydownfocustexture.png</texturedowndisabled>
      <label>46</label>
      <font>font12</font>
      <textcolor>FFFFFFFF</textcolor>
      <disabledcolor>80FFFFFF</disabledcolor>
      <align></align>
      <aligny></aligny>
      <textoffsetx></textoffsetx>
      <textoffsety></textoffsety>
      <pulseonselect></pulseonselect>
      <reverse></reverse>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
spinposx	The horizontal position of the spin control for multipage lists. This is offset from the top left of the list.
spinposy	The vertical position of the spin control for multipage lists. This is offset from the top left of the list.
spinwidth	The width of one of the spin control buttons. The textures for this spin control will be scaled to fit this width.
spinheight	The height of one of the spin control buttons. The textures for this spin control will be scaled to fit this height.
texturefocus	Specifies the image file which should be displayed for the control when it has focus. See here for additional information about textures.
texturenofocus	Specifies the image file which should be displayed for the control when it doesn't focus.
textureup	Specifies the image file which should be displayed for the up arrow when it doesn't have focus. It is displayed to the left of the down arrow.
textureupfocus	Specifies the image file which should be displayed for the up arrow when it has focus.
textureupdisabled	Specifies the image file which should be displayed for the up arrow when the button is disabled.
texturedown	Specifies the image file which should be displayed for the down arrow when it is not focused. It is displayed to the right of the up arrow so that it's right edge is <textoffsetx> pixels away from the right edge of the control.
texturedownfocus	Specifies the image file which should be displayed for the down arrow when it has focus.
texturedowndisabled	Specifies the image file which should be displayed for the up arrow when the button is disabled.
label	Either a numeric reference into strings.po (for localization), or a string that will be shown on the left of the control.
font	Font used for the controls label. From fonts.xml.
textcolor	Color used for displaying the label. In AARRGGBB hex format, or a name from the colour theme.
disabledcolor	Color used for the label if the control is disabled. In AARRGGBB hex format, or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text. In AARRGGBB hex format, or a name from the colour theme.
align	Label horizontal alignment on the control. Defaults to left.
aligny	Label vertical alignment on the control. Defaults to top, can also be center.
textoffsetx	Amount to offset the label from the left (or right) edge of the button when using left or right alignment.
textoffsety	Amount to offset the label from the top edge of the button when using top alignment.
textwidth	Will truncate any text that's too long.
reverse	Will reverse the up/down actions of the up and down textures.

Slider Control

The slider control is used for things where a sliding bar best represents the operation at hand (such as a volume control or seek control). You can choose the position, size, and look of the slider control.

Example

<control type="slider" id="17">
      <description>My first slider control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <texturesliderbar>mybackgroundtexture.png</texturesliderbar>
      <texturesliderbardisabled>mydisabledbackgroundtexture.png</texturesliderbardisabled>
      <textureslidernib>mydowntexture.png</textureslidernib>
      <textureslidernibfocus>mydownfocustexture.png</textureslidernibfocus>
      <textureslidernibdisabled>mydowndisabledtexture.png</textureslidernibdisabled>
      <info></info>
      <action></action>
      <controloffsetx></controloffsetx>
      <controloffsety></controloffsety>
      <pulseonselect></pulseonselect>
      <orientation>horizontal</orientation>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
texturesliderbar	Specifies the image file which should be displayed in the background of the slider control. See here for additional information about textures.
texturesliderbardisabled	Specifies the image file which should be displayed in the background of the slider control when it is disabled. (v21+)
textureslidernib	Specifies the image file which should be displayed for the slider nib.
textureslidernibfocus	Specifies the image file which should be displayed for the slider nib when it has focus.
textureslidernibdisabled	Specifies the image file which should be displayed for the slider nib when it it is disabled. (v21+)
controloffsetx	Amount to offset the slider background texture from the left edge of the control. Only useful if a value is being rendered as well (ie in int or float mode).
controloffsety	Amount to offset the slider background texture from the top edge of the control.
info	Specifies the information that the slider controls. See here for more information.
action	Can be 'volume' to adjust the volume, 'seek' to change the seek position or 'pvr.seek' for timeshifting in PVR
orientation	Can be horizontal or vertical (default).

Progress Control

The progress control is used to show the progress of an item that may take a long time, or to show how far through a movie you are. You can choose the position, size, and look of the progress control.

Example

<control type="progress" id="12">
      <description>My first progress control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <reveal>false</reveal>
      <texturebg>mybackgroundtexture.png</texturebg>
      <lefttexture>mydowntexture.png</lefttexture>
      <midtexture>mymidtexture.png</midtexture>
      <righttexture>myrighttexture.png</righttexture>
      <overlaytexture>myoverlaytexture.png</overlaytexture>
      <info></info>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
reveal	If set to true the midtexture will reveal itself instead of stretching to fill the gap (works best when its the same size as texturebg)
texturebg	Specifies the image file which should be displayed in the background of the progress control. See here for additional information about textures.
lefttexture	Specifies the image file which should be displayed for the left side of the progress bar. This is rendered on the left side of the bar.
midtexture	Specifies the image file which should be displayed for the middle portion of the progress bar. This is the “fill” texture used to fill up the bar. It's positioned on the right of the <lefttexture> texture, and fills the gap between the <lefttexture> and <righttexture> textures, depending on how far progressed the item is.
righttexture	Specifies the image file which should be displayed for the right side of the progress bar. This is rendered on the right side of the bar.
overlaytexture	Specifies the image file which should be displayed over the top of all other images in the progress bar. It is centered vertically and horizontally within the space taken up by the background image.
info	Specifies the information that the progress bar is reporting on. See here for more information.
info2	Specifies the second piece of information that the progress bar is reporting on (PVR only). See here for more information.

ScrollBar Control

The scroll bar control is used as a page control for lists, panels, wraplists, fixedlists, textboxes, and grouplists. You can choose the position, size, and look of the scroll bar.

Example

<control type="scrollbar" id="17">
      <description>My first scroll bar control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <texturesliderbackground>scroll-background.png</texturesliderbackground>
      <texturesliderbar>bar.png</texturesliderbar>
      <texturesliderbarfocus>bar-focus.png</texturesliderbarfocus>
      <textureslidernib>nib.png</textureslidernib>
      <textureslidernibfocus>nib-focus.png</textureslidernibfocus>
      <pulseonselect></pulseonselect>
      <orientation>vertical</orientation>
      <showonepage>false</showonepage>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available Tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

texturesliderbackground	Specifies the image file which should be displayed in the background of the scroll bar control. See here for additional information about textures.
texturesliderbar	Specifies the image file which should be displayed for the scroll bar. As the size of the scroll bar is dynamic, it is often useful to use the border attribute of this texture.
texturesliderbarfocus	Specifies the image file which should be displayed for the scroll bar when it has focus.
textureslidernib	Specifies the image file which should be displayed for the scroll bar nib. The nib is always centered within the scroll bar.
textureslidernibfocus	Specifies the image file which should be displayed for the scroll bar nib when it has focus. The nib is always centered within the scroll bar.
orientation	Specifies whether this scrollbar is horizontal or vertical. Defaults to vertical.
showonepage	Specifies whether the scrollbar will show if the container it's controlling has just one page. Defaults to true.

Adding Up and Down buttons above and below a scrollbar

To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <onclick> tag to

<onclick>pageup(id)</onclick>

or

<onclick>pagedown(id)</onclick>

where id is the id of this scroll bar.

Text Box

The text box is used for showing a large multipage piece of text in Kodi. You can choose the position, size, and look of the text.

Example

<control type="textbox" id="2">
   <description>My first text box control</description>
   <left>80</left>
   <top>60</top>
   <width>250</width>
   <height>200</height>
   <visible>true</visible>
   <colordiffuse>FFFFFFFF</colordiffuse>
   <font>font13</font>
   <monofont>mono30</monofont>
   <textcolor>FFFFFFFF</textcolor>
   <pulseonselect></pulseonselect>
   <pagecontrol>13</pagecontrol>
   <scrolltime>200</scrolltime>
   <autoscroll delay="3000" time="1000" repeat="10000">!Control.HasFocus(13)</autoscroll>
   <label>Text to display goes here [CR] next line...</label>
   <align>center</align>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
height	<height>auto</height> is supported in textbox controls
font	Font used for the items first label. From fonts.xml.
textcolor	Color used for displaying the text. In AARRGGBB hex format, or a name from the colour theme.
shadowcolor	Specifies the color of the drop shadow on the text. In AARRGGBB format, or a name from the colour theme.
pagecontrol	Specifies the <id> of the page control used to control this textbox. The page control can either be a Spin Control or a Scroll Bar Control.
scrolltime	The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling.
align	possible values for text alignment: left, right, center, justify
autoscroll	Specifies the timing and conditions of any autoscrolling this textbox should have. Times are in milliseconds. The content is delayed for the given delay, then scrolls at a rate of one line per time interval until the end. If the repeat tag is present, it then delays for the repeat time, fades out over 1 second, and repeats. It does not wrap or reset to the top at the end of the scroll. You can use any bool condition to specify when autoscrolling should be allowed.
monofont	Monotype font. For use in the TextViewer dialog only.

RSS feed Control

RSS feed Control

Visualisation Control

The visualisation control is used for displaying those funky patterns that jump to the music in Kodi. You can choose the position, and size of the visualisation displayed. Note that the control is only rendered if music is being played.

Example

<control type="visualisation" id ="3">
      <description>My first visualisation control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
</control>

Available tags

Only the default control tags are applicable to this control.

Video Control

The videowindow control is used for displaying the currently playing video elsewhere in the Kodi GUI. You can choose the position, and size of the video displayed. Note that the control is only rendered if video is being played.

Example

<control type="videowindow" id="2">
      <description>My first video control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
</control>

Available tags

Only the default control tags are applicable to this control.

Mover Control

The mover control is used for the screen calibration portions of Kodi. You can choose the size and look of the mover control.

Example

<control type="mover" id="3">
      <description>My first mover control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <texturefocus>mytexture.png</texturefocus>
      <texturenofocus>mytexture.png</texturenofocus>
      <pulseonselect>true</pulseonselect>
</control>

Available tags

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
texturefocus	Specifies the image file which should be displayed when the mover has focus. See here for additional information about textures.
texturenofocus	Specifies the image file which should be displayed when the mover does not have focus.

Resize Control

Resize Control

Edit Control

The edit control allows a user to input text in Kodi. You can choose the font, size, colour, location and header of the text to be displayed.

Example

  <control type="edit" id="1">
        <description>My First edit control</description>
        <left>80</left>
        <top>60</top>
        <width>250</width>
        <visible>true</visible>
        <aligny>center</aligny>
        <label>Search</label>
        <hinttext>Enter search string</hinttext>
        <font>font14</font>
	<textoffsetx>10</textoffsetx>
        <textcolor>FFB2D4F5</textcolor>
	<disabledcolor>FF000000</disabledcolor>
	<invalidcolor>FFFFFFFF</invalidcolor>
	<texturefocus>button-focus.png</texturefocus>
	<texturenofocus>button-nofocus.png</texturenofocus>
	<pulseonselect>no</pulseonselect>
  </control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
aligny	Can be top or center. Aligns the text within its given control <height>. Defaults to top
label	Specifies the header text which should be shown. You should specify an entry from the strings.po here (either the Kodi strings.po or your skin's strings.po file), however you may also hardcode a piece of text also if you wish, though of course it will not be localized. You can use the full label formatting syntax and you may also specify more than one piece of information here by using the $INFO and $LOCALIZE formats.strings.xml)
hinttext	Specifies the text which should be displayed in the edit label control, until the user enters some text. It can be used to provide a clue as to what a user should enter in this control.
font	Specifies the font to use from the font.xml file.
textcolor	Specifies the color the text should be, in hex AARRGGBB format, or a name from the colour theme.
textwidth	Will truncate any text that's too long.

EPGGrid Control

The epggrid control is used for creating an epg timeline in Kodi. You can choose the position, size, and look of the grid and it's contents.

Example

<control type="epggrid" id="10">
    <description>EPG Grid</description>
    <left>80</left>
    <top>81</top>
    <width>1120</width>
    <height>555</height>
    <pagecontrol>10</pagecontrol>
    <scrolltime>350</scrolltime>
    <timeblocks>40</timeblocks>
    <rulerunit>6</rulerunit>
    <progresstexture border="5">PVR-EpgProgressIndicator.png</progresstexture>
    <onleft>31</onleft>
    <onright>31</onright>
    <onup>10</onup>
    <ondown>10</ondown>
    <orientation>Horizontal</orientation>
    <rulerdatelayout width="1700" height="45" condition="$PARAM[has_rulerdate_layout]">
        <control type="label">
            <width>1700</width>
            <height>45</height>
            <font>font24</font>
            <label>$INFO[ListItem.Label]</label>
            <textcolor>button_focus</textcolor>
            <align>center</align>
            <aligny>center</aligny>
        </control>
    </rulerdatelayout>
    <rulerlayout height="35" width="40">
        <control type="image" id="1">
            <width>40</width>
            <height>29</height>
            <left>0</left>
            <top>0</top>
            <texture border="5">button-nofocus.png</texture>
        </control>
        <control type="label" id="2">
            <left>10</left>
            <top>0</top>
            <width>34</width>
            <height>29</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
        </control>
    </rulerlayout>
    <channellayout height="52" width="280">
        <animation effect="fade" start="110" time="200">UnFocus</animation>
        <control type="image" id="1">
            <left>0</left>
            <top>0</top>
            <width>270</width>
            <height>52</height>
            <texture border="5">button-nofocus.png</texture>
        </control>
        <control type="label">
            <left>5</left>
            <top>5</top>
            <width>40</width>
            <height>35</height>
            <font>font12</font>
            <align>left</align>
            <aligny>center</aligny>
            <textcolor>grey</textcolor>
            <selectedcolor>grey</selectedcolor>
            <label>$INFO[ListItem.ChannelNumber]</label>
        </control>
        <control type="image">
            <left>45</left>
            <top>4</top>
            <width>45</width>
            <height>44</height>
            <texture>$INFO[ListItem.Icon]</texture>
        </control>
        <control type="label" id="1">
            <left>94</left>
            <top>0</top>
            <width>160</width>
            <height>52</height>
            <font>special12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.ChannelName]</label>
        </control>
    </channellayout>
    <focusedchannellayout height="52" width="280">
        <animation effect="fade" start="110" time="200">OnFocus</animation>
        <control type="image" id="1">
            <left>0</left>
            <top>0</top>
            <width>270</width>
            <height>52</height>
            <texture border="5">button-focus.png</texture>
        </control>
        <control type="label">
            <left>5</left>
            <top>5</top>
            <width>40</width>
            <height>35</height>
            <font>font12</font>
            <align>left</align>
            <aligny>center</aligny>
            <textcolor>grey</textcolor>
            <selectedcolor>grey</selectedcolor>
            <label>$INFO[ListItem.ChannelNumber]</label>
        </control>
        <control type="image">
            <left>45</left>
            <top>4</top>
            <width>45</width>
            <height>44</height>
            <texture>$INFO[ListItem.Icon]</texture>
        </control>
        <control type="label" id="1">
            <left>94</left>
            <top>0</top>
            <width>160</width>
            <height>52</height>
            <font>special12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.ChannelName]</label>
        </control>
    </focusedchannellayout>
    <itemlayout height="52" width="40">
        <control type="image" id="2">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <aspectratio>stretch</aspectratio>
            <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
        </control>
        <control type="label" id="1">
            <left>6</left>
            <top>3</top>
            <width>30</width>
            <height>25</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>30</width>
            <height>20</height>
            <texture>PVR-IsRecording.png</texture>
            <visible>ListItem.IsRecording</visible>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>20</width>
            <height>20</height>
            <texture>PVR-HasTimer.png</texture>
            <visible>ListItem.HasTimer + !ListItem.IsRecording</visible>
        </control>
    </itemlayout>
    <focusedlayout height="52" width="40">
        <control type="image" id="14">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <texture border="5">folder-focus.png</texture>
        </control>
        <control type="image" id="2">
            <width>40</width>
            <height>52</height>
            <left>0</left>
            <top>0</top>
            <aspectratio>stretch</aspectratio>
            <texture border="3">epg-genres/$INFO[ListItem.Property(GenreType)].png</texture>
        </control>
        <control type="label" id="1">
            <left>6</left>
            <top>3</top>
            <width>30</width>
            <height>25</height>
            <font>font12</font>
            <aligny>center</aligny>
            <selectedcolor>selected</selectedcolor>
            <align>left</align>
            <label>$INFO[ListItem.Label]</label>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>30</width>
            <height>20</height>
            <texture>PVR-IsRecording.png</texture>
            <visible>ListItem.IsRecording</visible>
        </control>
        <control type="image">
            <left>5</left>
            <top>28</top>
            <width>20</width>
            <height>20</height>
            <texture>PVR-HasTimer.png</texture>
            <visible>ListItem.HasTimer + !ListItem.IsRecording</visible>
        </control>
    </focusedlayout>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
timeblocks	The number of timeframes on the top row.
rulerunit	Timeframe of each unit on the top row. 1 unit equals 5 minutes.
rulerdatelayout	The layout of the date header.
rulerlayout	The layout of the top row.
progresstexture	A texture which indicates the current progress time
channellayout	The layout of the left column.
focusedchannellayout	The focused layout of the left column.
itemlayout	The layout of the grid
focusedlayout	The focused layout of the grid
orientation	The orientation (Horizontal/Vertical) of the grid

Gamecontroller Control

The gamecontroller control is used to display an image of the selected gamecontroller in DialogGameControllers.xml. You can choose the position, and size of the gamecontroller image.

Example

<control type="gamecontroller" id="31">
      <description>My first gamecontroller control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
</control>

Available tags

Only the default control tags are applicable to this control.

GameWindow Control

The GameWindow a screenshot of the currently playing game, with the filter, stretch mode and rotation settings applied.

Example

<control type="gamewindow">
    <left>10</left>
    <top>10</top>
    <width>444</width>
    <height>250</height>
    <videofilter>$INFO[ListItem.Property(game.videofilter)]</videofilter>
    <stretchmode>$INFO[ListItem.Property(game.stretchmode)]</stretchmode>
    <rotation>$INFO[ListItem.Property(game.videorotation)]</rotation>
</control>

Available tags and attributes

In addition to the default control tags, the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
videofilter	Used video filter (eg. Bilinear)
stretchmode	Stretch mode value (eg. Normal, Fullscreen, Original size)
rotation	Screen rotation value (eg. 90°, 180°)

Group Control

The group control is one of the most important controls. It allows you to group controls together, applying attributes to all of them at once. It also remembers the last navigated button in the group, so you can set the <onup> of a control to a group of controls to have it always go back to the one you were at before. It also allows you to position controls more accurately relative to each other, as any controls within a group take their coordinates from the group's top left corner (or from elsewhere if you use the "r" attribute). You can have as many groups as you like within the skin, and groups within groups are handled with no issues.

Example

<control type="group" id="17">
      <description>My first group control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>30</height>
      <defaultcontrol>2</defaultcontrol>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      ... more controls go here ...
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
defaultcontrol	Specifies the default control that will be focused within the group when the group receives focus. Note that the group remembers it's previously focused item and will return to it.

Notes on positioning of controls within groups

All controls within a group take their positions relative to the group's placement. Thus, the group always requires its <left>, <top>, <width>, and <height> attributes to be defined. As this can be a pain to remember, anything that you don't specify will be inherited from it's parent group (or the main window).

By way of example, consider the first group within a PAL full screen window (720x576), and suppose we have

<control type="group" id="15">
  <left>30</left>
  <top>70</top>
  <width>400</width>
  ... more controls go here ...
</control>

so that the <height> hasn't been defined. Then Kodi will automatically set the <height> equal to 506 by inheriting this from the window's height of 576, less the <top> amount.

You can align controls within a group to the right edge of the group, by using the "r" modifier to the <left> and <top> fields

<control type="group" id="20">
  <control type="button" id=2>
    <left>180r</left>
    <width>180</width>
  </control>
  <control type="button" id=3>
    <left>180r</left>
    <width>180</width>
  </control>
  <control type="button" id=4>
    <left>180r</left>
    <width>180</width>
  </control>
</control>

All the buttons have width 180, and are aligned 180 pixels from the right edge of the group they're within.

GroupList Control

The group list control is a special case of the group control. It is used for placing a set of controls into a list (either horizontally or vertically) and handles all the navigation within the list and placement within the list for you. It will be scrollable if the number of items exceeds the size of the list, and you can assign a scrollbar to it just like you can to any of the containers (list, panel, etc.).

Example

<control type="grouplist" id="17">
      <description>My first group list control</description>
      <defaultcontrol>701</defaultcontrol>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>300</height>
      <itemgap>10</itemgap>
      <pagecontrol>25</pagecontrol>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <orientation>vertical</orientation>
      <usecontrolcoords>false</usecontrolcoords>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <align>right</align>
      ...
      <!-- place your controls here -->
      ...
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
itemgap	Specifies the gap (in pixels) between controls in the list. Defaults to 5px.
orientation	Specifies whether the list is horizontal or vertical. Defaults to vertical.
pagecontrol	Specifies the page control used to scroll up and down the list. Set the page control's id here.
scrolltime	The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods.
usecontrolcoords	Specifies whether the list should use the control's coordinates as an offset location from the coordinates it would normally use to draw the control. Defaults to false. Useful for staggering a control in from the edge of the grouplist, or for having more space around a control than <itemgap> gives.
align	Specifies how to align the grouplist. possible values: left, right, center, justify. defaults to left.
defaultcontrol	Specifies the id of the control that should be focussed when the grouplist gains focus.

List Container

The list container is one of several containers used to display items from file lists in various ways. The list container is very flexible - it's only restriction is that it is a list - i.e. a single column or row of items. The layout of the items is very flexible and is up to the skinner.

Example

<control type="list" id="50">
      <description>My first list container</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <viewtype label="3D list">list</viewtype>
      <orientation>vertical</orientation>
      <pagecontrol>25</pagecontrol>
      <autoscroll>true</autoscroll>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <itemlayout width="650" height="29">
		<control type="image">
			<left>5</left>
			<top>3</top>
			<width>22</width>
			<height>22</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="label">
			<left>30</left>
			<top>3</top>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
		<control type="label">
			<left>475</left>
			<top>3</top>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<label>$INFO[ListItem.Label2]</label>
		</control>
      </itemlayout>
      <focusedlayout height="29" width="650">
		<control type="image">
			<width>485</width>
			<height>29</height>
			<left>0</left>
			<top>0</top>
			<visible>Control.HasFocus(50)</visible>
			<texture>list-focus.png</texture>
		</control>
		<control type="image">
			<left>5</left>
			<top>3</top>
			<width>22</width>
			<height>22</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="label">
			<left>30</left>
			<top>3</top>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
		<control type="label">
			<left>475</left>
			<top>3</top>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<label>$INFO[ListItem.Label2]</label>
		</control>
      </focusedlayout>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
viewtype	The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible.
orientation	The orientation of the list. Defaults to vertical.
pagecontrol	Used to set the <id> of the page control used to control this list.
scrolltime	The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods.
itemlayout	Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <itemlayout> then contains as many label and image controls as required. See here for more information.
focusedlayout	Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <focusedlayout> then contains as many label and image controls as required. See here for more information.
content	Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. See here for more information
preloaditems	Used in association with the Background Image Loader.
autoscroll	Used to make the container scroll automatically

Wraplist Container

The wrap list container is one of several containers used to display items from file lists in various ways. The wrap list container is the same as the List Container, with two exceptions:

1. The focused item is fixed.
2. The items "wrap" around once they reach the end.

As with all container controls, the layout of the items within the control is very flexible.

Example

<control type="wraplist" id="50">
      <description>My first wraplist container</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>200</height>
      <visible>true</visible>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
      <viewtype label="3D list">list</viewtype>
      <orientation>vertical</orientation>
      <pagecontrol>25</pagecontrol>
      <focusposition>3</focusposition>
      <scrolltime tween="sine" easing="out">200</scrolltime>
      <autoscroll>true</autoscroll>
      <itemlayout width="650" height="29">
		<control type="image">
			<left>5</left>
			<top>3</top>
			<width>22</width>
			<height>22</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="label">
			<left>30</left>
			<top>3</top>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
		<control type="label">
			<left>475</left>
			<top>3</top>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<label>$INFO[ListItem.Label2]</label>
		</control>
      </itemlayout>
      <focusedlayout height="29" width="650">
		<control type="image">
			<width>485</width>
			<height>29</height>
			<left>0</left>
			<top>0</top>
			<visible>Control.HasFocus(50)</visible>
			<texture>list-focus.png</texture>
		</control>
		<control type="image">
			<left>5</left>
			<top>3</top>
			<width>22</width>
			<height>22</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="label">
			<left>30</left>
			<top>3</top>
			<width>430</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<align>left</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
		<control type="label">
			<left>475</left>
			<top>3</top>
			<width>300</width>
			<height>22</height>
			<font>font13</font>
			<aligny>center</aligny>
			<selectedcolor>green</selectedcolor>
			<textcolor>grey</textcolor>
			<align>right</align>
			<label>$INFO[ListItem.Label2]</label>
		</control>
      </focusedlayout>
</control>

Available tags

In addition to the Default Control Tags the following tags are available. Note that each tag is lower case only. This is important, as xml tags are case-sensitive.

Tag	Description
viewtype	The type of view. Choices are list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. viewtype has no effect on the view itself. It is used by kodi when switching skin to automatically select a view with a similar layout. Skinners should try to set viewtype to describe the layout as best as possible.
orientation	The orientation of the list. Defaults to vertical.
pagecontrol	Used to set the <id> of the page control used to control this list.
scrolltime	The time (in ms) to scroll from one item to another. By default, this is 200ms. The list will scroll smoothly from one item to another as needed. Set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods.
focusposition	Specifies the index (from 0 -> number items displayable - 1) of the focused item. The focused item doesn't move - as the user moves up and down (or left and right) the items scroll instead.
itemlayout	Specifies the layout of items in the list. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <itemlayout> then contains as many label and image controls as required. See here for more information.
focusedlayout	Specifies the layout of items in the list that have focus. Requires the height attribute set in a vertical list, and the width attribute set for a horizontal list. The <focusedlayout> then contains as many label and image controls as required. See here for more information.
content	Used to set the item content that this list will contain. Allows the skinner to setup a list anywhere they want with a static set of content, as a useful alternative to the grouplist control. See here for more information
autoscroll	Used to make the container scroll automatically

Panel Container

The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.

Example

<control type="panel" id="52">
	<left>190</left>
	<top>100</top>
	<width>485</width>
	<height>425</height>
	<onleft>9000</onleft>
	<onright>60</onright>
	<onup>52</onup>
	<ondown>52</ondown>
	<scrolltime tween="sine" easing="out">200</scrolltime>
	<autoscroll>true</autoscroll>
	<viewtype label="536">icon</viewtype>
	<pagecontrol>60</pagecontrol>
	<include>contentpanelslide</include>
	<itemlayout height="150" width="120">
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
		</control>
		<control type="label">
			<left>0</left>
			<top>115</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</itemlayout>
	<focusedlayout height="150" width="120">
		<control type="image">
			<width>110</width>
			<height>110</height>
			<left>5</left>
			<top>5</top>
			<texture>folder-focus.png</texture>
			<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
		</control>
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
			<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
			<animation effect="slide" end="5,5" time="100">focus</animation>
		</control>
		<control type="label">
			<left>0</left>
			<top>120</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</focusedlayout>
</control>

Available tags

In addition to the Default Control Tags, the following tags are also available. Note that each tag is lower case only. This is important, as XML tags are case-sensitive.

Available tags

Tag	Description
<viewtype label="">…</viewtype>	The type of view, valid values are: list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. This tag has no effect on the view itself, it is simply used by Kodi when switching skins to automatically select a view with a similar layout; skinners should try to set it to best describe the layout provided.
<orientation>…</orientation>	The orientation of the panel, defaults to vertical.
<pagecontrol>…</pagecontrol>	Used to set the id of the page control used to control that panel.
<scrolltime tween="" easing="">…</scrolltime>	The time (in ms) to scroll from one item to another, by default this is 200ms. The panel will scroll smoothly from one item to another as needed; set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods.
<itemlayout height="" width="">…</itemlayout>	Specifies the container item layout for the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<focusedlayout height="" width="">…</focusedlayout>	Specifies the container item layout for items that have focus in the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<content>…</content>	Used to set the static list content that the panel will contain, allowing the skinner to create a panel anywhere they want with a static set of content, as a useful counterpart to the grouplist control.
<preloaditems>…</preloaditems>	Used in association with the background image loader.
<autoscroll>…</autoscroll>	Used to make the container scroll automatically, accepts the boolean values of either true or false.

Filling containers

Filling containers with static content

Container controls (the List Container, Fixed List Container, Wrap List Container, and Panel Container) can be setup by the skinner with some predefined static content. This is done by including the <content> tag in the control. This allows skinners to have lists (or panels) of buttons wherever they want in the skin. The content below could used on the home page for instance. You can use <defaultcontrol [always="true"]>id</defaultcontrol> to control which item in the list gets focused by default.

Example

<content>
  <item id="1">
    <label>My First Item</label>
    <label2>Label 2</label2>
    <icon>icon1.png</icon>
    <thumb>thumb1.png</thumb>
    <onclick>ActivateWindow(Videos)</onclick>
    <visible>true</visible>
    <property name="foo">Some1stValueHere</property>
    <property name="foo2">Some2ndValueHere</property>
  </item>
  <item id="2">
    <label>My Second Item</label>
    <label2>Label 2</label2>
    <icon>icon2.png</icon>
    <thumb>thumb2.png</thumb>
    <onclick>ActivateWindow(Music)</onclick>
    <property name="foo">Some1stValueHere</property>
    <property name="foo2">Some2ndValueHere</property>
  </item>
</content>

Available tags

The available XML tags for each item are as follows. Note that, as always, they're lower-case only, as XML is case-sensitive.

Tag	Description
id	The id of the item. Useful for external visibility conditions such as Container.HasFocus(3).
label	The main label of the item. You can reference this within the <itemlayout> of the list via ListItem.Label.
label2	The secondary label of the item. You can reference this within the <itemlayout> of the list via ListItem.Label2.
icon	The icon of the item. You can reference this within the <itemlayout> of the list via ListItem.Icon, or ListItem.ActualIcon.
thumb	The thumbnail image of the item. You can reference this within the <itemlayout> of the list via ListItem.Thumb.
onclick	The action to be performed when this item is clicked. Should be a built in function. See here for more information.
visible	Specifies a condition as to when this item will be visible within the container. Can be true, false, or a condition. See here for more information. Defaults to true.
property	Property of the item. You can reference this within the <itemlayout> of the list via ListItem.Property(name).

Filling containers with dynamic content

Container controls (the List Container, Fixed List Container, Wrap List Container, and Panel Container) can be setup by the skinner with dynamic content from a path or plugin. This is done by including the <content> tag in the control. It saves many lines of code as it's not necessary anymore to use static items for i.e. recently added movies.

Examples

Content filled from a plugin

<content>plugin://plugin.test.me?arg1=foo</content>

Content filled from a path

<content target="music" sortby="artist" sortorder="ascending" limit="10">musicdb://recentlyaddedalbums/</content>

It's also possible to fill a container with multiple <content> sources.

Available attributes

The available XML attributes for the content tag are as follows. Note that, as always, they're lower-case only, as XML is case-sensitive.

Attributes	Description
target	Specifies the context window of the content. This is only necessary for folder items as it defines which window should be activated. For example musicdb://albums/ should have target="music" but musicdb://songs/ does not need a target because it contains only songs which will be played via PlayMedia(...) rather than opened via ActivateWindow(target,path,return)
limit	Limits the number of items in the container.
sortby	Sorts the list by the given value.
sortorder	Sort direction of the list: ascending or descending.
browse	Since v21: Control visibility of the "more..." button which can be appended to lists to open the window specified by the target attribute: always : Add the button, if list contains at least one item. auto : Add the button, if the list as provided by the core actually has more items than specified by the limit attribute. This is the default value. never : Never add the button.

Available item properties (can be filled in plugins)

Property	Description
node.target	Specifies the context window of the content. This overwrites the target attribute of the content tag.
node.target_url	Overwrites the path of an item if it's clicked on. This can be used to show the content of the item's path in another container while entering a different path if the item is clicked on. An example would be Confluence's home screen where Movies shows the items of it's path as a submenu below while clicking the item always takes the user to movie titles.

Override onclick action

You can define a custom <onclick> action for lists with dynamic content.

<control type="list">
    ...
    <onclick>some_builtin</onclick>
    ...
    <content>...</content>
</control>

Conditional_Visibility

Kodi's skinning engine versatility is based upon the fact that the skinner can display and hide portions of the skin using a variety of conditional statements that can be combined to create very user friendly UI implementations. For further information of available variable and how they can be applied.

All controls benefit from conditional visibility support. This means that instead of specifying just YES or NO for the <visible> tag, you can provide one of the many preset boolean conditions. Not only that, you can also specify how Kodi should transistion between a visible state and a hidden state.

For example, the Project Mayhem 3 skin has <visible>!Player.HasMedia</visible> tags on all the background images on the home page. The reason is that we don't want the images being displayed while a media file (audio or video) is playing or paused, as the video or visualisation will cover the images anyway, so they only take up memory unnecessarily. They also slow down navigation, as the need to be loaded/unloaded depending on whether they are visible (ie whether or not the user has a particular button focused).

How They Work

The condition given in the <visible> tag is evaluated at during the control's Render() function. Kodi decides whether or not the condition is true, and updates the control's visibility accordingly. So it all happens without Kodi having to do the extra chores of maintaining which controls need to be shown at which points in time. The controls automatically update themselves.

Conditional Visibility for Dialogs

Dialogs can also be made to popup automatically based on a visibility condition. This is done by supplying the <visible> tag at the top of the window file (where the <id>, <type> and <coordinate> tags are). Kodi once again evaluates this visibility at render time, and if necessary, will create and show the dialog at the appropriate time. It'll also close them once that visibility has vanished.

This only works with dialogs. For custom windows, you can specify the type of window you require by specifying it using the <type> tag. For more information see the window .xml structure page.

Combining Conditions

You can combine two (or more) of the above settings by using:

• + as AND operator
• | as OR operator
• ! as NOT operator
• [ and ] to bracket expressions

For example, <visible>Player.HasVideo + Player.Rewinding8x</visible> will only show the control when the player is rewinding a video at 8x, whereas <visible>Player.HasVideo | Player.IsRecording</visible> will show the control if a video is playing, or if we are recording something.

The AND operator takes precedence over the OR operator when evaluating the logic. AND operators are read from left to right.

So if you want to show something when condition1 OR condition2 is true AND condition3 is true, you can do: <visible>[condition1 | condition2] + condition3</visible>

Note that if you missed the brackets, then it would actually be reading «if condition1 or (condition2 and condition3)" due to AND taking precedence over OR.

Some pointers on boolean logic. The following holds true:

A + (B | C) = A + B | A + C
A | (B + C) = (A | B) + (A | C)

!(A + B) =!A | !B
!(A | B) =!A + !B

A common mistake is to do something like this:

!A | !B | !C

This is false only if A, B and C are all simultaneously true (as it's the same as !(A + B + C)), and you may have possibly been after

!A + !B + !C

which is false if A is true, or B is true, or C is true.

One thing you will notice, is that when a control is hidden, it can't be focused. This means you can't move to a control and have it automatically become visible (eg even if it had Control.HasFocus(myID) it wouldn't come back on, as Kodi wouldn't allow navigation to the hidden control). To solve this issue, you can use:

  <visible allowhiddenfocus="true">Control.HasFocus(21)</visible>

on a control of <id> 21. This will allow the control to be focusable even when it's hidden. When the user moves to the hidden control, it will automatically unhide itself, due to the Control.HasFocus(21) visibility condition.

Animations

The Kodi skinning engine supports animations of any control allowing them to rotate, slide, fade or any combination there-of. Combining animations with conditional statements ensure your skin will have stunning effects that appear as professional as a 1st party product.

Animating Your Skin

Animating Your Skin

Tweeners

A Tween defines how an animation progresses from its initial value to its final value. The simplest way this can be accomplished is to go straight from start to finish in equal steps. This results in a smooth transition, however it starts and stops abruptly and tends to be a bit unnatural. Unnatural in the sense that, in the real world, you never see a linear transition. In the real world, transitions (movements, deformations, etc) are always accompanied by varying degrees of acceleration and deceleration. Some real world examples that come to mind: the movement of a pendulum, a ball bouncing, our breathing pattern, a bungee jump. Tweens basically try to mathematically recreate some of these transitions and can help add naturalism to animations.

What is Easing?

All tweens (except Linear) support an easing attribute that can be one of "in", "out", or "inout". The Quadratic tweener only supports "in" and "out". The default easing method is "out". Easing is basically the direction of the tween action. Looking at the various graphs below and trying the tweens out will make the concept of easing, easier (hehe, say that ten times in a row) to understand.

Supported Tweens

Currently, Kodi's skin engine supports eight different tweens: "linear", "quadratic", "bounce", "elastic", "cubic", "circle", "sine" and "back". They are set in an animation using the tween attribute. The animations next to each graph shows how that tween renders straight motion between 2 points. Tweens however aren't restricted to only motion effects, they can be used on alpha as well.

Linear Tweener

Linear Tweener

Linear Animation

Quadratic Tweener

Quadratic Tweener Easing Out

Quadratic Easing Out Animation

Quadratic Tweener Easing In

Quadratic Easing In Animation

Bounce Tweener

Bounce Tweener Easing Out

Bounce Easing Out Animation

Bounce Tweener Easing InOut

Bounce Easing InOut Animation

Bounce Tweener Easing In

Bounce Easing In Animation

Back Tweener

Back Tweener Easing Out

Back Easing Out Animation

Back Tweener Easing InOut

Back Easing InOut Animation

Back Tweener Easing In

Back Easing In Animation

Cubic Tweener

Cubic Tweener Easing Out

Cubic Easing Out Animation

Cubic Tweener Easing InOut

Cubic Easing InOut Animation

Cubic Tweener Easing In

Cubic Easing In Animation

Circle Tweener

Circle Tweener Easing Out

Circle Easing Out Animation

Circle Tweener Easing InOut

Circle Easing InOut Animation

Circle Tweener Easing In

Circle Easing In Animation

Sine Tweener

Sine Tweener Easing Out

Sine Easing Out Animation

Sine Tweener Easing InOut

Sine Easing InOut Animation

Sine Tweener Easing In

Sine Easing In Animation

Elastic Tweener

Elastic Tweener Easing Out

Elastic Easing Out Animation (animation needs fixing)

Elastic Tweener Easing InOut

Elastic Easing InOut Animation

Elastic Tweener Easing In

Elastic Easing In Animation

Fonts

Kodi allows you to customize which fonts are displayed onscreen in the User Interface.

There's one special file called Font.xml. This file contains a list of all fonts the skin uses. kodi will load all the fonts mentioned in this file from the /myskin/fonts directory first, and if that fails, will attempt to load them from Kodi/media/fonts. In the event that Kodi is unable to locate the specified font, it will default to "font13". It is required that every skin has a font13 definition in their Font.xml file. Apart from that, you can modify this file as you like and add/delete/change fonts. The user friendly font name is referenced by the other xml files mentioned below.

Format of the Font.xml File

The Font.xml file is divided into font sets, which includes a set of fonts used by the skin. Every font set must contain the same font names in order for the skin to work with all font sets.

  <?xml version="1.0" encoding="UTF-8"?>
  <fonts>
    <fontset id="Default" idloc="31390">
      <font>
       ....
      </font>
      <font>
      ....
      </font>
      ....
    </fontset>
    <fontset id="Arial" idloc="31391">
      <font>
      ....
      </font>
      ....
    </fontset>
  </fonts>

A font set has the following attributes:

id

Name of the font set. Displayed to the user. Can have any value.

idloc

Refers to a string in the Skins' language file, so font names can be localized.

It is possible to use includes (eg. <include>MonoSpace</include>) in Font.xml There has to be at least one font set with the unicode attribute set to true else languages like Chinese or Korean will not display properly. There is a font called Arialuni.TTF with a size of 20MB. It is a unicode True Type Font and works with all languages Kodi supports.

Note: Kodi will automatically switch to the first available unicode font set if the user selects a language that needs one. This switch will not be made if the currently loaded font set already supports unicode.

Supported Font Types

True type Fonts

True type fonts must have a .ttf suffix. For a true type font it is possible to define the size (default 20) and a style normal, bold, italics, or bolditalics. Frodo also includes lowercase or uppercase. Isengard includes capitalize. Jarvis includes lighten.

Note: Multiple styles can be used by separating them with a space.

Example:

  <font>
     <name>font12</name>
     <filename>arial.ttf</name>
     <size>12</size>
     <style>uppercase lowercase capitalize bold lighten</style>
     <aspect>0.75</aspect>
     <linespacing>1.0</linespacing>
  </font>

The <aspect> tag specifies the aspect ratio of the font. An aspect of 0.75 means that the width of the font will be 0.75 of the height. By default the aspect is 1.0 for all but the SD 16x9 modes (PAL16x9, NTSC16x9 and 480p16x9) where the aspect ratio is 0.75, due to the stretched pixels.

The <linespacing> tag defines height of each line (sometimes called leading or inteline spacing). By default linespacing is set to 1.0.

How to add a new Font

Font files go in in .kodi/media/fonts (to make them available to all skins), or in the .kodi\addons\skin.myskin\fonts folder if the font file is to be used with your skin only.

1. Place the TTF ( such as verdana.ttf from your PC (C:\Windows\Fonts)) files in .kodi\media\fonts.
2. Edit the file .kodi\addons\skin.myskin\1080p\Font.xml and duplicate the "Default" section.
3. Change the 'id' to the name of your new font
4. change the filename for each definition to the filename of your name font file.
5. Finally go to settings > interface > skin > fonts and select the new font.

Example Font.xml

<fonts>
	<fontset id="Default" idloc="31390" unicode="true"> 
	<!-- Normal Fonts -->
	 	<font>
			<name>font12</name>
			<filename>DejaVuSans.ttf</filename>
			<size>16</size>
		</font>
	 	<font>
			<name>font12caps</name>
			<filename>DefaultCaps.ttf</filename>
			<size>16</size>
		</font>
	 	<font>
			<name>font13</name>
			<filename>DejaVuSans.ttf</filename>
			<size>20</size>
		</font>
		...
	</fontset>

	<fontset id="MyFont" idloc="31392" unicode="true">
	<!-- Normal Fonts -->
	 	<font>
			<name>font12</name>
			<filename>Arial.ttf</filename>
			<size>16</size>
		</font>
	 	<font>
			<name>font12caps</name>
			<filename>Arial.ttf</filename>
			<size>16</size>
		</font>
	 	<font>
			<name>font13</name>
			<filename>Arial.ttf</filename>
			<size>20</size>
		</font>
		...
	</fontset>
</fonts>

Appendix

List of Windows

Appendix IV: List of Built In Functions

Skins can use built-in functions with the <onclick> or <onfocus> tag. Scripts can call built-in functions with xbmc.executebuiltin(function, block).

The latest up-to-date list of built-in functions can be found in the source code files in [1].

In addition to the following list, for most <onclick> and <onfocus> button actions in the skin you can also use the functions from Keyboard.xml.

Example:
<onclick>VolumeUp</onclick>
<onclick>VolumeDown</onclick>

You can use parameters with all media windows, as can be seen here:

• Opening Windows and Dialogs

List of functions

Add-on built-in's

Function	Description	Version
Addon.Default.OpenSettings(extensionpoint)	Open a settings dialog for the default addon of the given type (extensionpoint)
Addon.Default.Set(extensionpoint)	Open a select dialog to allow choosing the default addon of the given type (extensionpoint)
Addon.OpenSettings(id)	Open a settings dialog for the addon of the given id
EnableAddon(id)	Enables the specified plugin/script	v19 addition
InstallAddon(id)	Will install the addon with the given id.
InstallFromZip	Opens the "Install from zip"-dialog if "Unknown sources" is enabled. Prompts the warning message if not.
RunAddon(id)	Runs the specified plugin/script
RunAppleScript(script[,args]*)	Run the specified AppleScript command
RunPlugin(plugin)	Runs the plugin. Full path must be specified. Does not work for folder plugins
RunScript(script[,args]*)	Runs the python script. You must specify the add-on id of the script. As of 2007/02/24, all extra parameters are passed to the script as arguments and can be accessed by python using sys.argv
StopScript(id)	Stop the script by ID or path, if running	v12 Addition
UpdateAddonRepos	Triggers a forced update of enabled add-on repositories.
UpdateLocalAddons	Triggers a scan of local add-on directories.

Android built-in's

Function	Description	Version
StartAndroidActivity(package,[intent,dataType,dataURI])	Launch an Android native app with the given package name. Optional parms (in order): intent, dataType, dataURI. example: StartAndroidActivity(com.android.chrome,android.intent.action.VIEW,,http://kodi.tv/)	v13 Addition

Application built-in's

Function	Description	Version
Extract(archive_url[, destination])	Extracts a specified archive to an optionally specified 'absolute' path.
Mute	Mutes (or unmutes) the volume.
NotifyAll(sender, data [, json])	Notify all connected clients	v13 Addition
SetVolume(percent[,showvolumebar])	Sets the volume to the percentage specified. Optionally, show the Volume Dialog in Kodi when setting the volume.
ToggleDebug	Enables/disables debug mode	v12 Addition
ToggleDPMS	Toggle DPMS (VESA Display Power Management Signaling) mode manually
WakeOnLan(mac)	Sends the wake-up packet to the broadcast address for the specified MAC address (Format: FF:FF:FF:FF:FF:FF or FF-FF-FF-FF-FF-FF).

CEC built-in's

Function	Description	Version
CECActivateSource	Wake up playing device via a CEC peripheral	v13 Addition
CECStandby	Put playing device on standby via a CEC peripheral	v13 Addition
CECToggleState	Toggle state of playing device via a CEC peripheral	v13 Addition

EPG built-in's

Function	Description	Version
PVR.EpgGridControl(command)	supported commands: firstprogramme (jump to the first programme) / currentprogramme (jump to the current programme) / lastprogramme (jump to the last programme) / selectdate (jump to the selected date & time) / +XX (jump XX hours forward) / -XX (jump XX hours back) / firstchannel (jump to the first channel) / playingchannel (jump to the currently playing channel) / lastchannel (jump to the last channel) / previousgroup (switch the epg to the previous group) / nextgroup (switch the epg to the next group) / selectgroup (select a group)	v19 Addition

GUI built-in's

Function	Description	Version
Action(action[,window])	Executes an action (same as in keymap) for the given window or the active window if the parameter window is omitted. The parameter window can either be the window's id, or in the case of a standard window, the window's name. See Action IDs for a list of available actions.
ActivateWindow(window[,dir,return])	Opens the given window. The parameter window can either be the window's id, or in the case of a standard window, the window's name. See Window IDs for a list of window names, and their respective ids. If, furthermore, the window is Music, Video, Pictures, or Program files, then the optional dir parameter specifies which folder Kodi should default to once the window is opened. This must be a source as specified in sources.xml, or a subfolder of a valid source. For some windows (MusicLibrary and VideoLibrary), the return parameter may be specified, which indicates that Kodi should use this folder as the "root" of the level, and thus the "parent directory" action from within this folder will return the user to where they were prior to the window activating.
ActivateWindowAndFocus(id1, id2,item1, id3,item2)	Activate window with id1, first focus control id2 and then focus control id3. if either of the controls is a container, you can specify which item to focus (else, set it to 0).	v12 Addition
AlarmClock(name,command,[time,silent,loop])	Pops up a dialog asking for the length of time (mm:ss) for the alarm (unless the parameter time is specified), and starts a timer. When the timer runs out, it'll execute the built-in command (the parameter command) if it is specified, otherwise it'll pop up an alarm notice. Add silent to hide the alarm notification. Add loop for the alarm to execute the command each time the specified time interval expires. If defining the last optional parameters (silent and loop) both have to be defined for any to take effect. The parameter "time" accepts an integer value (in minutes) or a timestring in the format "hh:mm:ss" or "mm min".
CancelAlarm(name[,silent])	Cancel a running alarm. Set silent to true to hide the alarm notification.
ClearProperty(key[,id])	Clears a window property for the current focused window/dialog(key), or the specified window (key,id).
Dialog.Close(dialog[,force])	Close a dialog. Set force to true to bypass animations. Use (all,true) to close all opened dialogs at once.
NextChannelGroup	Navigate to the next PVR channel group (in DialogPVRChannelsOSD.xml)	v13 Addition
NextStereoMode	Changes the stereo mode of the GUI to the next available mode.	v13 Addition
Notification(header,message[,time,image])	Will display a notification dialog with the specified header and message, in addition you can set the length of time it displays in milliseconds and a icon image.
PreviousChannelGroup	Navigate to the previous PVR channel group (in DialogPVRChannelsOSD.xml)	v13 Addition
PreviousStereoMode	Changes the stereo mode of the GUI to the previous available mode.	v13 Addition
RefreshRSS	Reload RSS feeds from RSSFeeds.xml
ReplaceWindow(window,dir)	Replaces the current window with the given window. This is the same as ActivateWindow() but it doesn't update the window history list, so when you go back from the new window it will not return to the previous window, rather will return to the previous window's previous window.
ReplaceWindowAndFocus(id1, id2,item1, id3,item2)	Replace window with id1, first focus control id2 and then focus control id3. if either of the controls is a container, you can specify which item to focus (else, set it to 0).	v13 Addition
Resolution	Change Kodi's Resolution.
SetGUILanguage(value)	Set GUI Language, 'value' is the language file to use. SetGUILanguage(resource.language.de_de)	v13 Addition
SetProperty(key,value[,id])	Sets a window property for the current window (key,value), or the specified window (key,value,id).
SetStereoMode	Changes the stereo mode of the GUI. Params can be: toggle, next, previous, select, tomono or any of the supported stereomodes (off, split_vertical, split_horizontal, row_interleaved, hardware_based, anaglyph_cyan_red, anaglyph_green_magenta, monoscopic)	v13 Addition
settingslevelchange	Toggles the visible settings (in SettingsCategory.xml) between 'basic', 'standard', 'advanced and 'expert'	v13 Addition
TakeScreenshot([filenameandpath,sync])	Takes a Screenshot. You can optionally specify the filename (including the path). Note: only .png files are supported. Add "sync" parameter to run synchronously (slow).
ToggleDirtyRegionVisualization	makes dirty regions visible for debugging proposes.	v16 Addition
ToggleStereoMode	Toggle the stereoscopic mode of the GUI (on/off).	v13 Addition

GUI container built-in's

Function	Description	Version
Container.NextSortMethod	Change to the next sort method.
Container.NextViewMode	Select the next view mode.
Container.PreviousSortMethod	Change to the previous sort method.
Container.PreviousViewMode	Select the previous view mode.
Container.Refresh	Refresh current listing.
Container.SetSortMethod(id)	Change to the specified sort method. (For list of ID's see [list of sort methods])
Container.SetViewMode(id)	Set the current view mode (list, icons etc.) to the given container id.
Container.SetSortDirection	Toggle the sort direction.
Container.Update	Update current listing. Send Container.Update(path,replace) to reset the path history.

GUI control built-in's

Function	Description	Version
Control.Message(id,message,[windowid])	Sends a given message to a control in a given window (or active window if omitted). Messages can be movedown, moveup, pagedown, pageup, click.
Control.Move(id,offset)	Will make a Container with the "id" specified in the command move focus by "offset".
Control.SetFocus(id,position[,absolute])	Will make a list with the "id" specified in the command gain focus at "position" number in its list. Set absolute to focus the first listitem of a container instead of the first visible listitem. Alias SetFocus(id,position)
PageDown	Send a page down event to the pagecontrol with given id.
PageUp	Send a page up event to the pagecontrol with given id.
SendClick(windowid,id)	Sends a click to a control in a given window (or active window if omitted).
SetFocus(id,position[,absolute])	Will make a list with the "id" specified in the command gain focus at "position" number in its list. Set absolute to focus the first listitem of a container instead of the first visible listitem. Alias Control.SetFocus(id,position)

Library built-in's

Function	Description	Version
CleanLibrary(database)	This funtion will perform a number of 'cleanup' tasks on your video database and can be run if you have moved, deleted or renamed files. Takes either "video" or "music" as a parameter to begin cleaning the corresponding database.
exportlibrary(music,false,filepath)	The music library will be exported to a single file stored at filepath location.
exportlibrary(video,true,thumbs,overwrite,actorthumbs)	The video library is exported to multiple files with the given options. Here thumbs, overwrite and actorthumbs are boolean values (true or false).
UpdateLibrary(database,[path])	Takes either "video" or "music" as a parameter to begin updating the corresponding database. For "video" you can additionally specify a specific path to be scanned.
VideoLibrary.Search	Brings up a search dialog which will search the library

Optical container built-in's

Function	Description	Version
EjectTray()	Either opens or closes the DVD tray, depending on its current state
RipCD	Will rip the inserted CD from the DVD-ROM drive.

Picture built-in's

Function	Description	Version
RecursiveSlideShow(dir)	Run a slideshow from the specified directory, including all subdirs
ShowPicture(picture)	Show a picture by its file path/url.	v13 Addition
SlideShow(dir[,recursive][,[not]random][,pause][,beginslide="/path/to/start/slide.jpg"])	Starts a slideshow of pictures in the folder dir. Optional parameters are 'recursive', 'random' or 'notrandom', 'pause' and 'beginslide="/path/to/some/image.jpg"' parameters. The "recursive" parameter starts a recursive slideshow, adding images from sub-folders. The "random" and "notrandom" parameters override the Randomize setting found in the pictures media window. The "pause" parameter will start the slideshow paused. "beginslide" will start the slideshow with the specified image.

Player built-in's

Function	Description	Version
PlayDisc(param)	Will play the inserted CD or DVD media from the DVD-ROM drive.
PlayerControl(command)	Allows control of music and videos. The command may be one of Play, Stop, Forward, Rewind, Next, Previous, BigSkipForward, BigSkipBackward, SmallSkipForward, SmallSkipBackward, FrameAdvance(#), TempoUp, TempoDown, Tempo(value), Random, RandomOn, RandomOff, Repeat, RepeatOne, RepeatAll, RepeatOff, Partymode(music) or Partymode(video) or Partymode(path to .xsp file) or Reset. Play will either pause, resume, or stop ffwding or rewinding. Random toggles random playback and Repeat cycles through the repeat modes (these both take an optional second parameter, Notify, that notifies the user of the new state). Partymode(music/video) toggles the appropriate partymode, defaults to music if no parameter is given, besides the default music or video partymode you can also pass a path to a custom smartplaylist (.xsp) as parameter. Reset only applies to games and will reset the currently playing game.
PlayerResolutionSelect	Select a different resolution	v18
Playlist.Clear	Clear the current playlist
Playlist.PlayOffset	Start playing from a particular offset in the playlist
PlayMedia(mediaPath[,isdir][,1][,playoffset=xx][,resume][,noresume][,playlist_type_hint=x])	Plays the media. This can be a playlist, music, or video file, directory, plugin or a url. The optional parameter ",isdir" can be used for playing a directory. ",1" will start the media without switching to fullscreen. If media is a playlist, you can use playoffset=xx where xx is the position to start playback from. Set "resume" to force resuming. Set "noresume" to force not resuming. Note: Following parameters are available from Kodi v20. If media is a playlist (e.g. STRM), you can set the type of playlist with "playlist_type_hint=x" where x can be 0 for music playlist or 1 for video playlist, if not set will be used music playlist.
PlayWith()	Play the selected item with the specified player core.
QueueMedia()	Queues the given media. This can be a playlist\, music\, or video file\, directory\, plugin or an Url. The optional parameter "\,isdir" can be used for playing a directory. "\,1" will start the media without switching to fullscreen. If media is a playlist\, you can use playoffset=xx where xx is the position to start playback from. @param[in] media URL of media to queue. @param[in] isdir Set "isdir" if media is a directory (optional). @param[in] 1 Set "1" to start playback without switching to fullscreen (optional). @param[in] resume Set "resume" to force resuming (optional). @param[in] noresume Set "noresume" to force not resuming (optional). @param[in] playeroffset Set "playoffset=<offset>" to start playback from a given position in a playlist (optional). @param[in] playnext Set "playnext" to play the media right after the currently playing item, if player is currently playing. If player is not playing, append media to current playlist (optional).
Seek(seconds)	Seeks to the specified relative amount of seconds within the current playing media. A negative value will seek backward and a positive value forward.	v15 Addition

Profile built-in's

Function	Description	Version
LoadProfile(profilename,[prompt])	Load the specified profile. If prompt is not specified, and a password would be required for the requested profile, this command will silently fail. If promp' is specified and a password is required, a password dialog will be shown.
Mastermode	Runs Kodi in master mode
System.LogOff	Log off current user.

PVR built-in's

Function	Description	Version
PVR.SearchMissingChannelIcons	Will start a search for missing channel icons	v16 Addition
PVR.ToggleRecordPlayingChannel	Will toggle recording on playing channel, if any	v18
PVR.SeekPercentage	Performs a seek to the given percentage in timeshift buffer, if timeshifting is supported

Skin built-in's

Function	Description	Version
ReloadSkin()	Reloads the current skin – useful for Skinners to use after they upload modified skin files (saves power cycling)
Skin.Reset(setting)	Resets the skin setting (setting). If (setting) is a bool setting (i.e. set via SetBool or ToggleSetting) then the setting is reset to false. If (setting) is a string (Set via SetString, SetImage, or SetPath) then it is set to empty.
Skin.ResetSettings	Resets all the above skin settings to their defaults (toggles all set to false, strings all set to empty.)
Skin.SelectBool(header, label1|setting1, label2|setting2)	Pops up select dialog to select between multiple skin setting options. Skin.SelectBool(424, 31411|RecentWidget, 31412|RandomWidget, 31413|InProgressWidget)
Skin.SetAddon(string,type)	Pops up a select dialog and allows the user to select an add-on of the given type to be used elsewhere in the skin via the info tag Skin.String(string). The most common types are xbmc.addon.video, xbmc.addon.audio, xbmc.addon.image, xbmc.addon.executable and kodi.gameclient.
Skin.SetBool(setting)	Sets the skin setting (setting) to true, for use with the conditional visibility tags containing Skin.HasSetting(setting). The settings are saved per-skin in settings.xml just like all the other Kodi settings.
Skin.SetFile(string,mask,folderpath)	Pops up a folder browser and allows the user to select a file off the hard-disk to be used else where in the skin via the info tag Skin.String(string). If the mask parameter is specified, then the file browser will only search for the extension specified (.avi,.mp3,.m3u,.png,.bmp,etc.,etc.). To use multiple extensions separate them using "|" (minus quotes). If the folderpath parameter is set the file browser will start in that folder.
Skin.SetImage(string[,value,path])	Pops up a file browser and allows the user to select an image file to be used in an image control elsewhere in the skin via the info tag Skin.String(string). If the value parameter is specified, then the file browser dialog does not pop up, and the image path is set directly. the path option allows you to open the file browser in the specified folder.
Skin.SetNumeric(numeric[,value])	Pops up a keyboard dialog and allows the user to input a numerical.
Skin.SetPath(string[,folderpath])	Pops up a folder browser and allows the user to select a folder of images to be used in a multi image control else where in the skin via the info tag Skin.String(string). If the folderpath parameter is set the file browser will start in that folder.
Skin.SetString(string[,value])	Pops up a keyboard dialog and allows the user to input a string which can be used in a label control elsewhere in the skin via the info tag Skin.String(string). If the value parameter is specified, then the keyboard dialog does not pop up, and the string is set directly.
Skin.Theme(1)	Cycles the skin theme. Skin.Theme(-1) will go backwards.
Skin.ToggleDebug	Toggles skin debug info on/off
Skin.ToggleSetting(setting)	Toggles the skin setting (setting) for use with conditional visibility tags containing Skin.HasSetting(setting).
UnloadSkin()	Unloads the current skin

System built-in's

Function	Description	Version
ActivateScreensaver	Starts the screensaver	v13 Addition
Hibernate	Hibernate (S4) the System
InhibitIdleShutdown(true/false)	Prevent the system to shutdown on idle.	v12 Addition
InhibitScreensaver(true/false)	Prevent activation of the screensaver.	v19 Addition
Minimize	Minimizes Kodi
Powerdown	Powerdown system
Quit	Quits Kodi
Reboot	Cold reboots the system (power cycle)
Reset	Reset the system (same as reboot)
RestartApp	Restarts Kodi (only implemented under Windows and Linux)
ShutDown	Trigger default Shutdown action defined in System Settings
Suspend	Suspends (S3 / S1 depending on bios setting) the System
System.Exec(exec)	Execute shell commands. The full path to the script has to be placed inside the parentheses.
System.ExecWait(exec)	Execute shell commands and freezes Kodi until shell is closed. As well as for "System.Exec(exec)", the full path to the script has to be placed inside the parentheses.

Weather built-in's

Function	Description	Version
Weather.LocationNext	Switch to next weather location
Weather.LocationPrevious	Switch to previous weather location
Weather.LocationSet	Switch to given weather location (parameter can be 1-3)
Weather.Refresh	Force weather data refresh

Appendix V: List of Built In Controls

.xml files

AddonBrowser.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
5	radiobutton	Enable auto-updating of the installed add-on's
6	radiobutton	Enable add-on notifications
7	radiobutton	Enable language filter
8	radiobutton	Hide broken addons
9	button	Check for repo updates

DialogAddonInfo.xml

ID	Type	Description
6	button	Install the selected add-on
7	button	Disable the selected add-on
8	button	Update the selected add-on
9	button	Show the settings of the selected add-on
10	button	Show the dependencies of the selected add-on
12	button	Run the selected add-on
13	radiobutton	Auto-update
14	button	Select add-on version
50	container	List of available screenshots

DialogAddonSettings.xml

ID	Type	Description
2	label	Heading label
3	grouplist	Grouplist template
5	grouplist	Grouplist template
6	textbox	Setting description help text
7	button	Button template
8	radiobutton	Radiobutton template
9	spincontrolex	Spincontrolex template
10	togglebutton	Togglebutton template
11	image	Default separator image
12	edit	Edit template
13	sliderex	Slider template
14	label	Label template
15	button	Colour button
20	button	Settings level change button
28	button	OK button
29	button	Cancel button
30	button	<unused button>

DialogAudioDSPManager.xml

ID	Type	Description
20	container	List with available options
21	container	List with active options
22	radiobutton	Continuous save button
23	button	Apply button
24	button	Clear button
9000	container	List with available modes

DialogBusy.xml

ID	Type	Description
10	progress	Progress bar

DialogButtonMenu.xml

ID	Type	Description
3100	label	Label of the focused button

DialogColorPicker.xml

ID	Type	Description
1	label	Heading label
6	container	List of colors
7	button	Cancel button

DialogConfirm.xml

ID	Type	Description
1	label	Heading label
9	textbox	Message
10	button	No button
11	button	Yes button
12	button	(for future use)
20	progress	Progress bar

DialogContextMenu.xml

ID	Type	Description
999	image	Background image of the context menu (center part) (deprecated)
998	image	Background image of the context menu (bottom part) (deprecated)
997	image	Background image of the context menu (top part) (deprecated)
996	grouplist	Grouplist template
999	image	Background image of the context menu
1000	button	Button template

DialogExtendedProgressBar.xml

ID	Type	Description
30	label	Heading label
31	label	Line 1
32	progress	Scan progress bar

DialogGameControllers.xml

ID	Type	Description
3	grouplist	List of controller types
5	grouplist	List of feature types
7	button	Button template
8	label	Settings category label template
9	image	Settings separator image template
10	button	Button template
17	button	Help button
18	button	OK button
19	button	Reset button
20	button	Get more... button
21	button	Ignore input button
22	button	Get all button
31	gamecontroller	Gamecontroller image template
32	textbox	Controller description

DialogFavourites.xml

ID	Type	Description
450	container	List of available favourites

DialogKeyboard.xml

ID	Type	Description
8	button	Backspace button
100 – 111	button	Digits 0 – 9
120 – 171	button	Characters A – Z
300	button	Done Button
301	button	Cancel button
302	radiobutton	Shift button
303	radiobutton	Caps-Lock button
304	radiobutton	Switch to symbols
305	button	Navigate left button
306	button	Navigate right button
307	button	Enter IP address button
309	button	Layout button
311	label	Heading label
312	edit	Label displaying the text being entered
313	label	Label displaying the text being entered (when keyboard layout is Chinese)
314	label	Label displaying the available choices (when keyboard layout is Chinese)

DialogMediaSource.xml

ID	Type	Description
2	label	Heading label
10	container	List of added media sources
11	button	Browse for location button
12	edit	Button for entering the name for the selected source
13	button	Add new source button
14	button	Delete source button
18	button	OK button
19	button	Cancel button (unused)

DialogMusicInfo.xml

ID	Type	Description
6	button	Refresh artist information / Refresh album information
7	button	User rating
8	button	Play album/song
10	button	Get artist thumbnail / Get album thumbnail
11	button	Connect to the Last.fm radio channel for this artist
12	button	Get artist fanart image
13	button	Get song thumbnail
50	container	Discography of the selected artist / tracks on the selected album / contributors on the selected song

DialogNotification.xml

ID	Type	Description
400	image	Default Icon
401	label	Heading text
402	label	Message text

DialogNumeric.xml

ID	Type	Description
1	label	Heading label
4	label	Label displaying the digits being entered
10 – 19	button	Digits 0 – 9
20	button	Navigate left button
21	button	Enter Button
22	button	Navigate right button
23	button	Backspace button

DialogPictureInfo.xml

ID	Type	Description
5	container	List of the available exif information of the image currently being displayed

DialogPVRChannelManager.xml

ID	Type	Description
4	button	OK button
5	button	Apply button
6	button	Cancel button
7	radiobutton	Activate channel button
6	button	Cancel button
8	edit	Channel name
9	button	Channel logo
11	spincontrolex	Select group
12	radiobutton	Activate EPG
13	spincontrolex	Select EPG source button
30	button	Switch to group management
31	button	New channel
34	button	Toggle radio / tv channels
20	container	Channel list

DialogPVRChannelsOSD.xml

ID	Type	Description
11	container	Channels list

DialogPVRGroupManager.xml

ID	Type	Description
11	container	Ungrouped channels
12	container	Grouped channels
13	container	Group list
25	radiobutton	Hide / Unhide button
26	button	Add button
27	button	Rename button
28	button	Delete button
29	button	OK button
34	togglebutton	Switch between TV / Radio

DialogPVRChannelGuide.xml

ID	Type	Description
11	container	Guide list

DialogPVRGuideSearch.xml

ID	Type	Description
9	edit	Search string
10	radiobutton	Include description
11	radiobutton	Case sensitive
12	spincontrolex	Minimal duration
13	spincontrolex	Maximal duration
14	edit	Start date
15	edit	End date
16	edit	Start time
17	edit	End Time
18	spincontrolex	Genre
19	radiobutton	Avoid repeats
20	radiobutton	Unknown genres
21	spincontrolex	Groups
22	radiobutton	FTA
23	spincontrolex	Channels
24	radiobutton	Ignore timers
25	button	Cancel button
26	button	Search button
27	radiobutton	Ignore recordings
28	button	Defaults button

DialogPVRInfo.xml

ID	Type	Description
4	button	Similar button
5	button	Switch to channel button
6	button	Record button
7	button	OK button
8	button	Play recording button
9	button	Add timer button
10	button	Play programme button
11	button	Set reminder button

DialogSeekBar.xml

ID	Type	Description
401	slider	Marker representing the current seek position
402	slider	Marker representing the epg seek position (PVR)
403	slider	Marker representing the current timeshift position (PVR)

DialogSelect.xml

ID	Type	Description
1	label	Heading label
2	label	Number of items in the list
3	container	List of available options
5	button	OK (on multiple selection) or Manual/Get More... button
6	container	List of available add-ons
7	button	Cancel button
8	button	Add/Get More... button
11	container	List with game video thumbnails
12	textbox	Description of the currently-selected video filter

DialogSettings.xml

ID	Type	Description
2	label	Header label
5	grouplist	Grouplist template
7	button	button template
8	radiobutton	radiobutton template
9	spincontrolex	spincontrolex template
11	image	image template
12	edit	edit template
13	sliderex	sliderex template
14	label	label template
28	button	ok button
29	button	cancel button
30	button	clear/settings button

DialogSlider.xml

ID	Type	Description
10	label	Heading label
11	slider	Slider
12	label	Label representing the slider value

DialogSubtitles.xml

ID	Type	Description
100	label	Name of subtitle service
110	image	Logo of subtitle service
120	container	List of available subtitles
130	label	Local subtitle available
140	label	Number of available subtitles
150	container	List of available subtitle services
160	button	Manual search buttom

DialogTextViewer.xml

ID	Type	Description
5	textbox	Text area for add-on output

DialogVideoInfo.xml

ID	Type	Description
3	image	Video thumb
4	textbox	Text area for displaying the video plot
5	button	Toggle between video review and cast members (Deprecated)
6	button	Refresh video information
7	button	User rating
8	button	Play video
9	button	Resume video
10	button	Get video Fanart, Poster, Banner, or Thumb
11	button	Play movie trailer
13	button	Show all movies by the director of the selected movie
50	container	List of cast members of the currently selected movie

DialogVideoManager.xml

ID	Type	Description
21	button	Play
22	button	Add version
23	button	Add extra
24	button	Rename version
25	button	Set default
26	button	Remove
27	button	Choose art
28	button	Rename extra

MyFavourites.xml

ID	Type	Description
2	button	Select viewtype
3	button	Select sort method
4	togglebutton	Select sortmode (ascending or descending)
19	radiobutton / edit	Filter the content to only show items that include the specified string in the name

EventLog.xml

ID	Type	Description
4	togglebutton	Select sortmode (ascending or descending)
20	button	Clear button
21	button	Level button
22	radiobutton	Only show current level radiobutton
50	container	Container with event loglines

FileBrowser.xml

ID	Type	Description
450	container	Directory list
451	container	List of available thumbnails
411	label	Heading label
412	label	Path of the selected item
413	button	OK button
414	button	Cancel button
415	button	Create folder
416	radiobutton	Flip Image horizontally

FileManager.xml

ID	Type	Description
12	label	Number of items in directory list 1
13	label	Number of items in directory list 2
20	container	Directory list 1
21	container	Directory list 2
101	label	Path of the currently selected directory in list 1
102	label	Path of the currently selected directory in list 2

GameOSD.xml

ID	Type	Description
1101	label	Help text
1102	gamecontroller	Controller layout

LoginScreen.xml

ID	Type	Description
2	label	Heading label
3	label	Number of the currently selected profile
52	container	List of the available profiles

MusicOSD.xml

ID	Type	Description
500	button	Select visualization
501	button	Lock visualization to the current preset

MusicVisualisation.xml

ID	Type	Description
2	visualisation	Background Visualization

MyMusicNav.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
5	radiobutton	Switch to file mode
8	edit	Search for a string anywhere in the Kodi music database
12	label	Number of items in the list
15	label	Filter label
16	radiobutton	Start party mode (randomly play songs from your entire music collection)
17	button	Manually enter artist and album name to lookup the artist and album information on the internet
18	label	Warning to the user to turn off library mode when no scanned media is found
19	radiobutton / edit	Filter the media files to only show items that include the specified string in the name
20	button	Update library

MyMusicPlaylistEditor.xml

ID	Type	Description
6	button	Load the playlist
7	button	Save the playlist
8	button	Clear the playlist
12	label	Number of items in the current directory or library list
XX	container	List allowing you to browse your directories and music library
100	container	List of songs in the playlist
101	label	Number of items in the playlist

MyPics.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
6	button	Start a picture slideshow
7	button	Start a recursive picture slideshow
9	radiobutton	Randomize the picture slideshow
12	label	Number of items in the list

MyPlaylist.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
12	label	Number of items in the playlist
20	radiobutton	Shuffle the playlist
21	button	Save the playlist
22	button	Clear the playlist
23	button	Play the playlist
24	button	Play the next item in the playlist
25	button	Play the previous item in the playlist
26	button	Put the playlist on repeat

MyPrograms.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
12	label	Number of items in the list

MyPVRChannels.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
6	radiobutton	Show hidden channels
28	button	Channel groups button
29	label	Channel groups name
31	radiobutton	Filter

MyPVRGuide.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
10	epggrid	EPG Guide Timeline
11	container	Channel groups selector
28	button	Channel groups button
29	label	View name (Now / Next / Timeline)
30	label	Channel groups name

MyPVRRecordings.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
5	radiobutton	Group items by folder structure
7	radiobutton	Show deleted recordings
10	button	Show only watched, unwatched or all recordings
28	button	Channelgroups button
29	label	'Deleted' (When show deleted recordings is enabled, otherwise empty)

MyPVRSearch.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
28	button	Channel groups button

MyPVRTimers.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
8	radiobutton	Hide disabled timers
28	button	Channel groups button

MyVideoNav.xml

ID	Type	Description
2	button	Select viewtype (list, thumbnail, media info, etc...)
3	button	Select sort method (sort by: name, date size, etc...)
4	togglebutton	Select sortmode (ascending or descending)
5	button	Switch to file mode
6	button	Play DVD (used the play physical DVD discs)
8	button	Search for a string anywhere in the Kodi video database
10	button	Show only watched, unwatched or all videos
12	label	Number of items in the list
14	button	Show only unwatched or all videos
11	button	Unlock shares
15	label	Filter label
16	button	Start party mode (randomly play musicvideos from your collection)
18	label	Warning to the user to turn off library mode when no scanned media is found
19	radiobutton / edit	Filter the media files to only show items that include the specified string in the name
20	button	Update library

MyWeather.xml

ID	Type	Description
2	button	Refresh the weather information
3	spincontrolex	Change weather location
11	label	Shows the time of last weather update
31	label	Current day label
32	label	Today's high temperature value
33	label	Today's low temperature value
34	label	Today's weather condition
35	image	Today's weather icon
223	label	Localized “Temperature” string
224	label	Localized “Feels like” string
225	label	Localized “UV index” string
226	label	Localized “Wind” string
227	label	Localized “Dew point” string
228	label	Localized “Humidity” string

Pointer.xml

ID	Type	Description
1	image	Pointer no focus image
2	image	Pointer focus image
3	image	Pointer drag image
4	image	Pointer click image

SettingsCategory.xml

ID	Type	Description
2	label	Label displaying the current settings category
3	grouplist	Grouplist template for the menu
5	grouplist	Grouplist template for the settings section
6	textbox	Settings description
7	button	Button template
8	radiobutton	Radiobutton template
9	spincontrolex	Spincontrolex template
10	button	Button template for the menu
11	image	Default separator image
12	edit	Edit control template
13	sliderex	Sliderex control template
14	label	Label template
15	button	Color button
20	button	Setting level button

SettingsProfile.xml

ID	Type	Description
2	container	List of available profiles
4	button	Enable the loginscreen
5	button	Auto login

SettingsScreenCalibration.xml

ID	Type	Description
2	label	Coordinates label
3	label	Help information
8	mover	Top left mover
9	mover	Right bottom mover
10	mover	Subtitle position mover
11	resize	Pixel aspect ratio box
12	mover	Reset calibration control
20	videowindow	currently playing video

SlideShow.xml

ID	Type	Description
10	label	Error loading image message
13	[any]	These controls are visible when the slideshow is paused

SettingsSystemInfo.xml

ID	Type	Description
2 – 11	label	Line 2 – Line 11
30	textbox	privacy-policy text
40	label	System information category label
52	label	Kodi build label
53	label	Kodi build date label
94	button	Show storage information
95	button	Show summary information
96	button	Show network information
97	button	Show video information
98	button	Show hardware information
99	button	Show PVR information
100	button	Show privacy-policy

SmartPlaylistEditor.xml

ID	Type	Description
2	label	Heading label
10	container	List of playlist rules
12	button	Name of the playlist
13	button	Add a rule
14	button	Remove a rule
15	button	Edit a rule
16	button	Match rules option (match all rules / match one or more rules)
17	button	Limit rules option (number of results: 10, 25, 50, 100, etc... items)
18	button	Sort rules option (order the results by: title, genre, random, etc...)
19	button	Sort direction option (ascending / descending)
20	button	OK button
21	button	Cancel button
22	button	Set Playlist type (movies, episodes, mixed, etc...)
23	button	Group by
24	radiobutton	Mixed

SmartPlaylistRule.xml

ID	Type	Description
15	button	Select field (director, duration, video resolution, etc...)
16	button	Select operator (is, is not, less than, etc...)
17	edit	Enter a value the rule should match
18	button	OK button
19	button	Cancel button
20	button	Browse button

VideoFullScreen.xml

ID	Type	Description
1	label	Numpad seek label
10	label	Line 1
11	label	Line 2
12	label	Line 3

VideoOSDBookmarks.xml

ID	Type	Description
2	button	Add a video bookmark
3	button	Clear all bookmarks
4	button	Use the currently selected video bookmark as the episode thumbnail
11	container	List of available bookmarks

Appendix VI: List of Default Icons

Icons used in Kodi skins

The filenames of the default icons are as follows:

Add-ons

DefaultAddon.png

DefaultAddonAlbumInfo.png

DefaultAddonArtistInfo.png

DefaultAddonAudioDecoder.png

DefaultAddonAudioEncoder.png

DefaultAddonContextItem.png

DefaultAddonGame.png

DefaultAddonHelper.png

DefaultAddonImageDecoder.png

DefaultAddonImages.png

DefaultAddonInfoLibrary.png

DefaultAddonInfoProvider.png

DefaultAddonInputstream.png

DefaultAddonsInstalled.png

DefaultAddonLanguage.png

DefaultAddonLibrary.png

DefaultAddonLookAndFeel.png

DefaultAddonLyrics.png

DefaultAddonMovieInfo.png

DefaultAddonMusic.png

DefaultAddonMusicVideoInfo.png

DefaultAddonNone.png

DefaultAddonPeripheral.png

DefaultAddonPVRClient.png

DefaultAddonPicture.png

DefaultAddonProgram.png

DefaultAddonsRecentlyUpdated.png

DefaultAddonRepository.png

DefaultAddonsRepo.png

DefaultAddonScreensaver.png

DefaultAddonsSearch.png

DefaultAddonService.png

DefaultAddonSkin.png

DefaultAddonSubtitles.png

DefaultAddonTvInfo.png

DefaultAddonUISounds.png

DefaultAddonsUpdates.png

DefaultAddonVfs.png

DefaultAddonVideo.png

DefaultAddonVisualization.png

DefaultAddonWeather.png

DefaultAddonWebSkin.png

DefaultAddonsZip.png

DefaultGameAddons.png

Music

DefaultArtist.png

DefaultAudio.png

DefaultAlbumCover.png

DefaultMusicAlbums.png

DefaultMusicArtists.png

DefaultMusicCompilations.png

DefaultMusicGenres.png

DefaultMusicPlaylists.png

DefaultMusicRecentlyAdded.png

DefaultMusicRecentlyPlayed.png

DefaultMusicRoles.png

DefaultMusicSongs.png

DefaultMusicSources.png

DefaultMusicTop100.png

DefaultMusicTop100Albums.png

DefaultMusicTop100Songs.png

DefaultMusicVideoTitle.png

DefaultMusicVideos.png

DefaultMusicYears.png

DefaultPartyMode.png

Videos

DefaultActor.png

DefaultCountry.png

DefaultDirector.png

DefaultGenre.png

DefaultInProgressShows.png

DefaultMovieTitle.png

DefaultMovies.png

DefaultRecentlyAddedEpisodes.png

DefaultRecentlyAddedMovies.png

DefaultRecentlyAddedMusicVideos.png

DefaultSets.png

DefaultStudios.png

DefaultTVShowTitle.png

DefaultTVShows.png

DefaultTags.png

DefaultVideo.png

DefaultVideoCover.png

DefaultVideoDeleted.png

DefaultVideoPlaylists.png

DefaultYear.png

Generic

DefaultAddSource.png

DefaultCDDA.png

DefaultDVDEmpty.png

DefaultDVDFull.png

DefaultDVDRom.png

DefaultFile.png

DefaultFolder.png

DefaultFolderBack.png

DefaultHardDisk.png

DefaultNetwork.png

DefaultPicture.png

DefaultPlaylist.png

DefaultProgram.png

DefaultRemovableDisk.png

DefaultScript.png

DefaultUser.png

DefaultVCD.png

Other

DefaultIconError.png

DefaultIconInfo.png

DefaultIconWarning.png

OverlayHD.png

OverlayLocked.png

OverlayRAR.png

OverlaySpoiler.png

OverlayUnwatched.png

OverlayWatched.png

OverlayZIP.png

If one or more of the images above are not present in a skin, Kodi will try to fallback to another Default* image. For this to work correctly, several of the images above are required to be present (if not, Kodi will fallback to DefaultFolder.png in the end.

DefaultAudio.png - If listitem is Audio file or PVR channel is Radio.

DefaultVideo.png - If listitem is Video file or LiveTV or PVRChannel or PVRRecording or a PVRTimer.

DefaultPicture.png - If listitem is a picture file.

DefaultPlaylist.png - If listitem is a playlist.

DefaultScript.png - If listitem is a python script.

DefaultFile.png - If listitem is a archive file or of unknown files type.

DefaultFolderBack.png - If Parent folder exists for current folder.

DefaultFolder.png - If none of the above apply.

(Source of information : FillInDefaultIcon() in FileItem.cpp.)

DefaultHardDisk.png - If user is at the source level of the Library.

(Source of information : GetDirectory() in SourcesDirectory.cpp)