How to Customize the Kodi Media Player Skin

Kodi is a free and open-source media player.

The following recipes were tested with Kodi 17.6 (codenamed Krypton) on a Raspberry Pi, running Raspbian Stretch. The default skin is called Estuary, which is very nice indeed. We wished to make only a very few adjustments: but applying those few changes proved to be much more harder than expected, so we resumed our findings in this page.

We modified the XML files which constitute the skin, they are into the /usr/share/kodi/addons/skin.estuary/xml/ directory.

The Estuary skin has a wall viewmode for the videos window which uses portrait-oriented widgets (290×400) with a square thumbnail image (270×270). We prefer instead a bigger, rectangular and landscape-oriented thumbnails, so we have customized the skin in the following way.

Each item in the wall viewmode is created using the InfoWallMovieLayout include, which is defined into the View_54_InfoWall.xml file. Beside that, two containers should be adjusted to accomodate the items; the first one is the main video screen View_500_Wall, the other is the Home's Video section.

• View_54_InfoWall.xml. This file contains the include named InfoWallMovieLayout, which defines the item used to show each movie thumbnail. It is composed mainly by three images; the first two define the item box (unfocused and focused), the third one is actually the picture thumbnail.
• View_500_Wall.xml. This file defines the main container for videos. You can find the include named View_500_Wall which contains a panel with two elements, one called <itemlayout> and the other called <focusedlayout>; both of them contain the InfoWallMovieLayout element.
• Includes_Home.xml. Movie thumbnails are shown directly into the Home screen too, this file defines the include named WidgetListPoster used for this purpose, which contains again an element called <itemlayout> and one called <focusedlayout>.

The Favourites items are rendered using the InfoWallMusicLayout include, defined into the View_54_InfoWall.xml file. They are accomodated directly into the home screen or into a specific dialog. The InfoWallMusicLayout is used also to display music album thumbnails etc., so you have to check all the screens using it and adjust them as required.

If you want to customize the favourites, edit the following files:

• View_54_InfoWall.xml. It contains the definition of InfoWallMusicLayout, used by favourites and music albums thumbnails. The most important part of the widget is composed by three images:
  • A <control type="image"> representing the unfocused widget.
  • A <control type="image"> representing the focused widget, generally some pixels bigger than the unfocused one.
  • A <control type="image"> which is actually the thumbnail image shown into the widget. Pay attention to the aspect ratio of the image. You may want to use square images for music albums (i.e .the folder image of the audio CD), so you may also want to use square images for the favourites.
• Home.xml. Favourites are shown directly into the Home screen, search this file for the <itemlayout> and <focusedlayout> elements which include the InfoWallMusicLayout element. You can change width, height to determine item spacing, etc.
• DialogFavourites.xml. When you click onto the Favourites item from the Home screen, a specific dialog box will open. This file determines the spacing used to show the items. Search for the <itemlayout> and <focusedlayout> elements, to adjust the size, etc.
• Includes_Home.xml. Bacause InfoWallMusicLayout items are used to show music albums too, you will almost certainly need to adjust the layout of the Music section of the Home screen. In this file you have to search for the WidgetListSquare include element, which contains the <itemlayout> and <focusedlayout> elements with the InfoWallMusicLayout inside. Make any adjustment required for item spacing, etc.

When browsing a directory full of video files, it is not possibile to change the viewmode from the left options menu (e.g. we wished to select the Wall Viewmode). According to this post, this is how it should work “by design”: file browsing does not have such option. Fortunately it is sufficient to add the directory as a video source, click Home ⇒ Video ⇒ Add… and fill the relevant dialog box.

Check if it actually works… How to add a favourite item if there is not a contaxt menu with the Add to favourite item? Example: how to add a favourite to open the Music album view. Edit the $HOME/.kodi/userdata/favourites.xml file, add a line like this:

<favourite name="Album" thumb="/data/album.png">
    ActivateWindow(10502,&quot;musicdb://albums/&quot;,return)
</favourite>

You can find more info about using the ActivateWindow function reading the list of available sub-sections in the Videos, Music, and Programs sections and reading the list of window IDs.

• What is the relation between viewMode ID and skin's XML?
• Opening Windows and Dialogs
• Window IDs