Appendix 1. Color Definition
Appendix 2. Color Legend
This section explains how to customize UI theme of KTplay Community Window that custom fit to your game’s look and feel.
1. iOS Customization
1.1 Color
- Open KTplay SDK’s ktplay.bundle directory
- Open the file color/color-iphone@2x.plist
- All color value prefixed with kt_theme are customizable. Please refer to Color definition and Color Legend for details .
1.2 Images
- Open KTplay SDK’s ktplay.bundle directory.
- Open the directory image/iphone, it contains all the customizable image resources that can be selected to replace with your own image (Note: image with suffix @2x @3x are used for higher resolution)
- Preferred images for customization:
- tab_background : navigation background.
- tab_blank_selected : navigation selected background.
- Image with tab prefixed (navigation item), and contains “selected”.
2. Android Customization
2.1 Color
- Open KTplay SDK directory.
- Open the file res/values/kryptanium_theme_colors_default.xml
- All color values are customizable（RGBA values）. Please refer to Color definition and Color Legend for details.
- Preferred color for customization:
- kt_theme_color : main theme color.
- kt_theme_navigationbar_background : navigation background.
- kt_theme_navigationitem_selected : navigation selected background.
2.2 Images
- Open KTplay SDK directory.
- Open the directory res/drawable-xhdpi-v4, it contains all the customizable image resources that can be selected to replace with your own image.
- Preferred images for customization:
- Any image with prefix of kryptanium_tab_indicator (image for navigation), and for image name contains _select is image for selected status)
3. Important Notes
- For replacing image, stick to original file name.
- For replacing image, stick to original image resolution.
- Make change log or note for any customization effort involve, so that can be reference for next SDK upgrade
- When update to new version of KTplay SDK, please follow the customizable process for color value customization, and don’t direct replace the property file, as they may be modified due to SDK upgrade.
4. Update SDK Version
- Backup old SDK
Rename and backup old SDK in your computer. - Update to new SDK
Add new SDK to your project. - Copy selected files from old SDK to new SDK
Android:
1) Copy the file res/values/kryptanium_theme_colors_default.xml from old SDK to new SDK.
2) Copy changed images under res/drawable-xhdpi-v4 from old SDK to new SDK. 
IOS:
1) Copy the file KTPlay/ktplay.bundle/color from old SDK to new SDK.
2) Copy changed images under KTPlay/ktplay.bundle/image/iphone from old SDK to new SDK.
Appendix 1. Color Definition
| Color Name | Description |
|---|---|
| kt_theme_color | Main theme color, suggest to match with game’s style。 Apply to ： - Button background - Link text - Highlight text - Loading animation background - Player progress bar background |
| kt_theme_background | Background color |
| kt_theme_navigationbar_background | Navigation bar background color Not apply to iOS, please refer to |
| kt_theme_navigationitem_selected | Navigation item selected color Not apply to iOS, please refer to |
| kt_theme_titlebar_background | Title bar background color |
| kt_theme_color_disabled | UI element disabled, e.g. button disabled |
| kt_theme_section_background | Section background color Apply to: - Main page’s section (Hot Topics/Video/Collection) - Card style content |
| kt_theme_headsection_background | Selected section background color Apply to： - Main page hot topics - Embedded topic from sharing / LiveOps content |
| kt_theme_listitem_background | List item background color |
| kt_theme_listitem_dividercolor | List item separator color |
| kt_theme_popup_background | Popup background color |
| kt_theme_popup_border | Popup border color |
| kt_theme_highlighted_item_background | Highlighted list item background color Apply to: - Highlighted reply in Profile page - Highlighted friend request from Friend page - Selected vote item in voting UI |
| kt_theme_imageloading_placeholder_background | Image loading placeholder background color |
| kt_theme_subtitle_background | Subtitle background color |
| kt_theme_title_textcolor | Title color |
| kt_theme_primary_textcolor | Primary text color |
| kt_theme_primary_textcolor_dark | Primary text color in dark background |
| kt_theme_secondary_textcolor | Secondary text color |
| kt_theme_secondary_textcolor_dark | Secondary text color in dark background |
| kt_theme_hint_textcolor | Hint text color |
Appendix 2. Color Legend
0 Comments