1. iOS Customization
2. Android Customization
3. Important Notes
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. 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.
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