Operators can customise branding elements within the OpenTV ION application for different devices.
User interface theme customisation options
This section lists standard customisations supported by ION with respect to background, focus, text, and border colours of UI screen elements such as screens, menu items, icons, and popups.
|
Color theme item |
Description |
Impacted screen or UI elements |
Supported device |
|---|---|---|---|
|
|
Configure primary colour for UI highlights across application screens. |
All |
TV, mobile/tablet, web |
|
|
Configure background colour of UI elements. Used as main background colour for screens, buttons, and popups. Ensures a consistent look and feel across the application. |
All |
TV, mobile/tablet, web |
|
|
Configure colour for secondary UI elements on a screen. Text and icon highlight colour. Applicable across screens. |
All |
TV, mobile/tablet, web |
|
(Default colour – we suggest not to change it.) |
This colour is used to configure errors, alerts, and background icon colour .
|
|
TV, mobile/tablet, web |
|
|
Configure background of focused elements in EPG, replay screen, and channel strip. |
|
TV |
|
|
Configure background of focused/active pill-shaped menu items. |
|
TV, web |
|
|
Configure EPG screen grid border colour. |
EPG screen |
TV, mobile/tablet |
|
|
Configure the background colour of live events in EPG screen. |
EPG screen |
Mobile/tablet |
|
|
Configure progress bar base colour. |
Progress bar |
TV, mobile/tablet, web. |
User interface theme screenshots
Primary highlight colour (focus colour)
The primary highlight colour is the main accent colour used across a product’s interface to draw user attention, indicate focus states, and highlight key actions. It represents the brand’s identity and provides a consistent visual cue across all platforms.
TV reference screenshot
Mobile and tablet screenshot
Desktop screenshot
PrimaryBase colour (#000000)
TV screenshot
Mobile and tablet screenshot
Desktop screenshot
Secondary colour
Primary focus background colour
Pill focus background colour
EPG marker highlight colour (background colour of live event)
Grid border colour
Progress bar base colour
Image customisations
This section provides details of standard image customisation options supported by ION. The resource files will be shared on request.
|
Identifier |
Impacted screens |
Devices applicable |
|---|---|---|
|
Brand logo (icon_logo) |
Sign-in screen Main screens Settings |
TV, mobile/tablet, web |
|
Splash screen logo |
Boot-up screen |
TV, mobile/tablet, web |
|
Sign-in screen background |
Sign-in screen |
TV, mobile/tablet, web |
|
Splash screen background |
All screens |
TV, mobile/tablet, web |
|
Brand identifier icon for website |
Web browser window |
Web |
|
App launcher icon for store |
Application icon downloaded from store |
Fire TV, Android TV |
Image dimensions
Android TV and Fire TV
|
Fire TV |
|||||||
|---|---|---|---|---|---|---|---|
|
|
generic |
ldpi (0.75x) |
mdpi (x) |
hdpi (1.5x) |
xhdpi (2x) |
xxhdpi (3x) |
xxhdpi (4x) |
|
ic_banner.png |
160x90 |
120x68 |
160x90 |
240x135 |
320x180 |
480x270 |
640x360 |
|
ic_launcher.png |
80x80 |
60x60 |
80x80 |
120x120 |
160x160 |
240x240 |
320x320 |
|
icon_logo.png |
256x256 |
192x192 |
256x256 |
384x384 |
512x512 |
768x768 |
1024x1024 |
|
icon_splash.png |
360x360 |
270x270 |
360x360 |
540x540 |
720x720 |
1080x1080 |
1440x1440 |
|
icon_notification.png |
50x50 |
38x38 |
50x50 |
75x75 |
100x100 |
150x150 |
200x200 |
|
signin_background.png |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
|
splash_tv.jpg |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
|
Android TV |
|||||||
|
|
generic |
ldpi (0.75x) |
mdpi (x) |
hdpi (1.5x) |
xhdpi (2x) |
xxhdpi (3x) |
xxhdpi (4x) |
|
ic_banner.png |
160x90 |
120x68 |
160x90 |
240x135 |
320x180 |
480x270 |
640x360 |
|
ic_launcher.png |
80x80 |
60x60 |
80x80 |
120x120 |
160x160 |
240x240 |
320x320 |
|
icon_logo.png |
256x256 |
192x192 |
256x256 |
384x384 |
512x512 |
768x768 |
1024x1024 |
|
icon_splash.png |
360x360 |
270x270 |
360x360 |
540x540 |
720x720 |
1080x1080 |
1440x1440 |
|
icon_notification.png |
50x50 |
38x38 |
50x50 |
75x75 |
100x100 |
150x150 |
200x200 |
|
signin_background.png |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
|
splash_tv.jpg |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
Android mobile
|
Android mobile |
|||||||
|
|
generic |
ldpi (0.75x) |
mdpi (x) |
hdpi (1.5x) |
xhdpi (2x) |
xxhdpi (3x) |
xxhdpi (4x) |
|
ic_launcher.png |
108x108 |
81x81 |
108x108 |
162x162 |
216x216 |
324x324 |
432x432 |
|
icon_logo.png |
256x256 |
192x192 |
256x256 |
384x384 |
512x512 |
768x768 |
1024x1024 |
|
icon_splash.png |
360x360 |
270x270 |
360x360 |
540x540 |
720x720 |
1080x1080 |
1440x1440 |
|
icon_notification.png |
50x50 |
38x38 |
50x50 |
75x75 |
100x100 |
150x150 |
200x200 |
|
signin_background.png |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
|
signin_background_tablet.png |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
1920x1080 |
LG/Samsung
|
LG/Samsung |
|
|
Image name |
Generic |
|
icon_favourite_on.webp |
72x64 |
|
icon_logo.webp |
240x150 |
|
icon_select.webp |
30x22 |
|
icon_sort_filter |
40x30 |
|
icon_splash.webp |
360x360 |
|
icon_ws_epg_favourite_on.webp |
72x64 |
|
icon_ws_filter_selected.webp |
40x30 |
|
splash_tv.webp |
1920x1080 |
Desktop
|
Desktop |
|
|
Image name |
Generic |
|
icon_logo.webp |
178x100 |
|
icon_select.webp |
30x22 |
|
icon_sort_filter.webp |
40x30 |
|
icon_splash.webp |
360x360 |
|
icon_ws_epg_favourite_on.webp |
72x64 |
|
icon_ws_filter_selected.webp |
40x30 |
|
splash_tv.webp |
1920x1080 |
iOS
|
iOS |
|||||
|
Images.xcassets Folder |
Image name(png) |
Generic (dimensions) |
1x |
2x |
3x |
|
AppIcon.appiconset |
Icon-20x20@1x |
|
20x20 |
40x40 |
60x60 |
|
|
Icon-29x29@1x |
|
29x29 |
58x58 |
87x87 |
|
|
Icon-40x40@1x |
|
40x40 |
80x80 |
120x120 |
|
|
Icon-60x60@1x |
|
60x60 |
120x120 |
180x180 |
|
|
Icon-76x76@1x |
|
76x76 |
152x152 |
228x228 |
|
|
Icon-167 |
167x167 |
|
|
|
|
|
Icon-marketing-1024x1024 |
1024x1024 |
|
|
|
|
icon_logo.imageset |
icon_logo |
2750x2750 |
|
|
|
|
|
splash icon |
916x916 |
|
|
|
|
icon_favourite_on.imageset |
btn_favorite_on |
63x57 |
|
|
|
|
icon_select.imageset |
icon_select_green_1x |
|
15x12 |
30x24 |
45x36 |
|
signin_background_large.imageset |
signin_background_tablet |
2048x1536 |
|
|
|
|
signin_background.imageset |
default_bg |
768x1004 |
|
|
|
|
slider_thumb.imageset |
slider_thumb |
15x15 |
|
|
|
|
LaunchImage-1.launchimage |
320x480 |
320x480 |
|
|
|
|
|
640x960 |
640x960 |
|
|
|
|
|
640x1136 |
640x1136 |
|
|
|
|
|
750x1134 |
750x1134 |
|
|
|
|
|
750x1334 |
750x1334 |
|
|
|
|
|
768x1004 |
768x1004 |
|
|
|
|
|
768x1024 |
768x1024 |
|
|
|
|
|
1024x748 |
1024x748 |
|
|
|
|
|
1024x768 |
1024x768 |
|
|
|
|
|
1125x2436 |
1125x2436 |
|
|
|
|
|
1242x2208 |
1242x2208 |
|
|
|
|
|
1536x2008 |
1536x2008 |
|
|
|
|
|
1536x2048 |
1536x2048 |
|
|
|
|
|
2048x1496 |
2048x1496 |
|
|
|
|
|
2048x1536 |
2048x1536 |
|
|
|
|
|
2208x1242 |
2208x1242 |
|
|
|
|
|
2436x1125 |
2436x1125 |
|
|
|
Image customisation screenshots
Brand logo (icon_logo)
TV screenshots
Mobile and tablet screenshots
Desktop screenshots
Splash screen logo and background
Sign-in screen background
