Emotion UI - Anatomy of a theme

[Guest PaulOBrien]

EMUI takes a lot of stick, rightly or wrongly, about the changes it makes to base Android. In reality though, it does make a number of improvements, one of which is the comprehensive theme engine. In this post, I'm going to talk a bit about the format of the Emotion UI Themes (which are actually usable across a range of Honor and Huawei devices), how they are made up, how they can be modified and how new themes can be created.

We're going to start by looking at the theme that is included with the Honor 7, called 'Spectrum'. This lives in /system/themes (an unmodifiable area of the device) and is, of course, visible in the 'Themes' app. When installing your own or third party themes, the files, which have the '.hwt' extension, need to be placed in /sdcard/HWThemes. The Themes app will then automatically find them.

Although it has the hwt extension, a theme file is actually a zip file. You can go ahead and extract it by renaming it or using the 'unzip' command on the command line. Let's have a look at what's inside Spectrum.

The Spectrum Theme

description.xml

The description file, as you might expect... contains a description of the theme, in both English and Chinese. The spectrum file looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<HwTheme>
    <title>Spectrum</title>
    <title-cn>光谱</title-cn>
    <author>EMUI</author>
    <designer>EMUI</designer>
    <screen>FHD</screen>
    <version>4.0.1</version>
    <font>Default</font>
    <font-cn>默认</font-cn>
</HwTheme>

All quite self explanatory. So far, so simple. What else do we have?

icons

Most EMUI themes change the icons on your device. The new icons are held within another zip file called simply 'icons'. This simple contains PNG files for the custom icons, named according to the package to which they will apply. For example, the 'com.facebook.katana.png' file will apply to the Facebook app. Bear in mind when creating a theme that the icons need to be an appropriate resolution for the display on the device - on the Honor 7, a FHD device, the icons are 192x192 in size.

the dreaded 'icon backgrounds'

Lots of themes, including stock, add a custom background mask to the icons. It doesn't look good. Thankfully these can, of course, be changed! In the icons file above, you'll see a bunch of icon_* files as shown below. Change these and you can modify the background etc.

Note: Your device may have an icons file of its own in /system/themes, which is applied as well as the chosen theme. To get fully stock icons for apps in this archive, you'll need to include the stock icon in your own icons archive. Annoying I know!

dynamic icons

The last thing we can find in the icons file is a 'dynamic icons' directory. This is used for apps that have, as the name suggests, dynamic icons - specifically calendar and weather. For calendar you can specify a different icon for each day and for the weather app, a different icon for different weather conditions.

wallpaper

Themes generally always come with their own wallpapers - one for the home screen, and one for the unlock screen, named home_wallpaper_0.jpg and unlock_wallpaper_1.jpg in this instance, stored in the 'wallpaper' folder. Again, getting the res right is important, Spectrum uses 2160x1920 for the home screen and 1920x1080 for the lock screen. 

preview

In the Themes app itself, a preview is provided of the theme. The images for this are stored within the preview directory, with an image for the main home screen (preview_widget_0.jpg), one for the lock screen (preview_unlock_0.jpg) and one for the 'icons' (preview_icons_0.jpg).

app specific theme elements

In the main directory of the extracted themes, you'll see a number of package names, such as com.android.gallery3d or com.android.mediacenter. These are, again, zip files, with app specific theme elements. If we look in the com.android.gallery3d theme as an example. we can see that it contains some custom drawables in the res/drawable-xxhdpi directory, as well as a theme.xml file which seems to override some default resource colors:

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <!-- Gallery2 -->
    <!-- for album name color -->
    <color name="appwidget_textshadow_color">#00000000</color>
    <color name="appwidget_text_color">#ffffff</color>
</resources>

App specific theming actually seems to be exceptionally powerful, allowing the theme designer to change pretty much anything visual in an app. There is a lot of potential here!

widget layout xml files

The last group of files you'll see in the extracted theme are layout XML files, such as gallery3d_widget_layout.xml, musiclayout.xml or totemweather.xml. These appear to be custom configurations for built in system widget, as shown below. It's unlikely you'll want to mess with these in your own custom theme.

<?xml version="1.0" encoding="utf-8"?>
<layout>

    <item
        id="widget_album_name_2*1"
        layout_x="5.55%"
        layout_y="5.55%"
        flag="1"
        height="0%"
        width="0%"/>

    <item
        id="widget_album_cover_2*1"
        layout_x="0%"
        layout_y="0%"
        flag="1"
        height="100%"
        width="100%"/>

</layout>

So why is this powerful?

The EMUI Theme engine is powerful because you can basically theme anything. Using the approaches detailed above, you can theme any APK, even the notification and navigation bars by targetting com.android.systemui. Looking to change something in the stock framework or Huawei framework? You can, by using framework-res or framework-res-hwext as the package name. 

After creating your theme and testing it on your device, it's easy to distribute too and relatively easy for users to install.

Show us what you can do with themes! :)